Formación corporativa en JavaScript

Sintaxis de JavaScript

JavaScript es un lenguaje de programación interpretado que forma parte fundamental del desarrollo web moderno. Su sintaxis combina elementos familiares de otros lenguajes con características únicas que lo hacen especialmente versátil para la programación tanto del lado del cliente como del servidor.

Estructura básica del código

La sintaxis de JavaScript se basa en declaraciones que terminan con punto y coma, aunque este es opcional en muchos casos. El lenguaje distingue entre mayúsculas y minúsculas, lo que significa que variable y Variable son identificadores completamente diferentes.

// Declaración simple
let mensaje = "Hola mundo";
console.log(mensaje);

Los comentarios en JavaScript pueden ser de una línea usando // o de múltiples líneas usando /* */. Esta práctica es esencial para documentar el código y mejorar su legibilidad.

// Comentario de una línea
let edad = 25;

/* 
   Comentario de 
   múltiples líneas 
*/
let nombre = "Ana";

Declaración de variables

JavaScript ofrece tres formas principales de declarar variables: var, let y const. Cada una tiene un comportamiento específico en cuanto al alcance y la reasignación.

Declaración con let:

let contador = 0;
let activo = true;
let datos = null;

Declaración con const:

const PI = 3.14159;
const configuracion = {
    servidor: "localhost",
    puerto: 3000
};

Declaración con var (uso tradicional):

var nombre = "Carlos";
var edad = 30;

Estructura de datos en JavaScript

Las estructuras de datos constituyen la base fundamental para organizar y manipular información en cualquier aplicación JavaScript. Comprender cómo almacenar, acceder y modificar datos de manera eficiente es esencial para desarrollar código robusto y escalable.

JavaScript ofrece múltiples formas de estructurar datos, desde los tipos primitivos básicos hasta estructuras más complejas como objetos y arrays. Cada estructura tiene características específicas que la hacen más adecuada para diferentes escenarios de programación.

Tipos de datos primitivos

Los datos primitivos representan valores únicos e inmutables que sirven como bloques de construcción básicos. JavaScript incluye varios tipos primitivos fundamentales.

El tipo number maneja tanto números enteros como decimales en un formato unificado:

let edad = 25;
let precio = 19.99;
let temperatura = -5.2;

Las cadenas de texto (strings) almacenan secuencias de caracteres y admiten múltiples formas de declaración:

let nombre = "María";
let apellido = 'González';
let mensaje = `Hola, ${nombre} ${apellido}`;

Los valores booleanos representan estados de verdadero o falso, fundamentales para la lógica de control:

let esActivo = true;
let estaCompleto = false;

Arrays: colecciones ordenadas

Los arrays constituyen estructuras de datos ordenadas que permiten almacenar múltiples elementos bajo un único identificador. Cada elemento ocupa una posición específica identificada por un índice numérico.

let frutas = ["manzana", "banana", "naranja"];
let numeros = [1, 2, 3, 4, 5];
let mixto = ["texto", 42, true, null];

El acceso a elementos se realiza mediante la notación de corchetes, comenzando desde el índice 0:

console.log(frutas[0]); // "manzana"
console.log(frutas[2]); // "naranja"

Los arrays son mutables, permitiendo modificar su contenido después de la creación:

frutas[1] = "pera";
frutas.push("uva"); // Añade al final
frutas.unshift("kiwi"); // Añade al inicio

Programación funcional en JavaScript

La programación funcional representa un paradigma de desarrollo que trata las funciones como elementos de primera clase, permitiendo crear código más predecible, mantenible y libre de efectos secundarios. En JavaScript, este enfoque ha ganado popularidad debido a su capacidad para simplificar operaciones complejas y mejorar la legibilidad del código.

Fundamentos del paradigma funcional

JavaScript soporta múltiples paradigmas de programación, siendo la programación funcional uno de los más expresivos. Este paradigma se basa en el concepto matemático de funciones, donde cada función produce una salida determinística basada únicamente en sus entradas, sin modificar el estado externo.

Las funciones puras constituyen el pilar fundamental de este paradigma. Una función pura siempre devuelve el mismo resultado para los mismos argumentos y no produce efectos secundarios observables:

// Función pura
function sumar(a, b) {
    return a + b;
}

// Función impura (modifica estado externo)
let contador = 0;
function incrementar() {
    contador++; // Efecto secundario
    return contador;
}

La inmutabilidad es otro concepto clave que evita la modificación directa de datos existentes, creando nuevas estructuras en su lugar:

// Enfoque inmutable
const numeros = [1, 2, 3];
const nuevosNumeros = [...numeros, 4]; // Crea nuevo array

// En lugar de modificar el original
// numeros.push(4); // Esto sería mutable

Funciones de orden superior

Las funciones de orden superior son aquellas que reciben otras funciones como argumentos o devuelven funciones como resultado. JavaScript proporciona métodos nativos que implementan este concepto de manera elegante.

El método map() transforma cada elemento de un array aplicando una función:

const precios = [10, 20, 30];
const preciosConIVA = precios.map(precio => precio * 1.21);
console.log(preciosConIVA); // [12.1, 24.2, 36.3]

El método filter() selecciona elementos que cumplen una condición específica:

const productos = [
    { nombre: 'Laptop', precio: 800 },
    { nombre: 'Mouse', precio: 25 },
    { nombre: 'Teclado', precio: 60 }
];

const productosCaros = productos.filter(producto => producto.precio > 50);

El método reduce() combina todos los elementos de un array en un único valor:

const ventas = [100, 200, 150, 300];
const totalVentas = ventas.reduce((total, venta) => total + venta, 0);
console.log(totalVentas); // 750

Programación Orientada a Objetos en JavaScript

La programación orientada a objetos (POO) representa uno de los paradigmas más influyentes en el desarrollo de software moderno. En JavaScript, este paradigma ha evolucionado significativamente desde sus primeras implementaciones basadas en prototipos hasta la introducción de la sintaxis de clases en ES6, proporcionando a los desarrolladores herramientas más familiares y expresivas para estructurar código complejo.

JavaScript implementa la POO de manera única, combinando características de lenguajes basados en clases con su sistema nativo de prototipos. Esta dualidad permite múltiples aproximaciones para crear y organizar objetos, desde la herencia prototípica tradicional hasta la sintaxis moderna de clases que facilita la transición desde otros lenguajes orientados a objetos.

Fundamentos de objetos en JavaScript

Los objetos constituyen la base fundamental de JavaScript. A diferencia de los tipos primitivos, los objetos pueden contener múltiples valores relacionados y funcionalidades asociadas. Un objeto agrupa propiedades (datos) y métodos (funciones) que operan sobre esos datos, creando unidades cohesivas de funcionalidad.

const usuario = {
  nombre: "Ana García",
  edad: 28,
  email: "ana@ejemplo.com",
  
  saludar() {
    return `Hola, soy ${this.nombre}`;
  }
};

La palabra clave this representa el contexto del objeto actual, permitiendo que los métodos accedan a las propiedades del mismo objeto. Este concepto resulta fundamental para entender cómo los objetos mantienen su estado interno y exponen comportamientos específicos.

Constructores y creación de objetos

Los constructores proporcionan plantillas para crear múltiples objetos con estructura similar. JavaScript ofrece varias aproximaciones para definir constructores, desde funciones constructoras tradicionales hasta la sintaxis moderna de clases.

function Producto(nombre, precio) {
  this.nombre = nombre;
  this.precio = precio;
  this.aplicarDescuento = function(porcentaje) {
    return this.precio * (1 - porcentaje / 100);
  };
}

const laptop = new Producto("Laptop Gaming", 1200);

La sintaxis de clases introduce una forma más clara y familiar de definir constructores:

class Vehiculo {
  constructor(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
    this.encendido = false;
  }
  
  arrancar() {
    this.encendido = true;
    return `${this.marca} ${this.modelo} arrancado`;
  }
}

DOM (Document Object Model)

El Document Object Model representa la estructura de un documento HTML como un árbol de objetos que JavaScript puede manipular dinámicamente. Esta interfaz de programación permite acceder, modificar y actualizar el contenido, estructura y estilo de las páginas web en tiempo real.

Estructura del DOM

El DOM organiza los elementos HTML en una jerarquía de nodos donde cada etiqueta, atributo y texto se convierte en un objeto manipulable. El documento completo se representa como un árbol donde el nodo raíz es document, seguido por el elemento <html>, que contiene <head> y <body>, y así sucesivamente.

// Acceso al documento completo
console.log(document);

// Acceso al elemento raíz HTML
console.log(document.documentElement);

// Acceso al body del documento
console.log(document.body);

Esta representación jerárquica permite navegar entre elementos utilizando relaciones familiares como padre, hijo y hermano, facilitando la manipulación precisa de cualquier parte del documento.

Selección de elementos

JavaScript proporciona múltiples métodos para localizar elementos específicos dentro del DOM. Los selectores más utilizados incluyen getElementById(), querySelector() y querySelectorAll().

// Selección por ID
const titulo = document.getElementById('titulo-principal');

// Selección por selector CSS
const primerParrafo = document.querySelector('p');
const todosLosParrafos = document.querySelectorAll('p');

// Selección por clase
const elementos = document.getElementsByClassName('destacado');

El método querySelector() acepta cualquier selector CSS válido, lo que proporciona flexibilidad para selecciones complejas utilizando combinadores, pseudo-clases y atributos.

Programación asíncrona en JavaScript

La programación asíncrona representa uno de los paradigmas más importantes en JavaScript moderno. A diferencia de la programación síncrona tradicional, donde cada operación debe completarse antes de continuar con la siguiente, la programación asíncrona permite que el código continúe ejecutándose mientras esperamos que se completen operaciones que pueden tomar tiempo.

El problema de las operaciones bloqueantes

En JavaScript, muchas operaciones requieren tiempo para completarse: peticiones HTTP, lectura de archivos, consultas a bases de datos o temporizadores. Si estas operaciones fueran síncronas, bloquearían completamente la ejecución del programa hasta completarse.

// Ejemplo de operación que toma tiempo
console.log("Inicio");
// Imagina que esta operación tarda 3 segundos
realizarPeticionHTTP();
console.log("Fin"); // Se ejecutaría después de 3 segundos

JavaScript resuelve este problema mediante su modelo de concurrencia basado en un bucle de eventos (event loop) que permite manejar múltiples operaciones de forma no bloqueante.

Callbacks: la base de la asincronía

Los callbacks fueron la primera solución para manejar operaciones asíncronas en JavaScript. Un callback es una función que se pasa como argumento a otra función y se ejecuta cuando la operación asíncrona se completa.

function obtenerDatos(callback) {
    setTimeout(() => {
        const datos = { id: 1, nombre: "Usuario" };
        callback(datos);
    }, 2000);
}

obtenerDatos((resultado) => {
    console.log("Datos recibidos:", resultado);
});

Sin embargo, cuando necesitamos realizar múltiples operaciones asíncronas secuenciales, los callbacks pueden crear el temido "callback hell":

obtenerUsuario(id, (usuario) => {
    obtenerPedidos(usuario.id, (pedidos) => {
        obtenerDetalles(pedidos[0].id, (detalles) => {
            // Código anidado difícil de mantener
        });
    });
});

Construcción en JavaScript

La construcción en JavaScript representa uno de los pilares fundamentales para crear aplicaciones robustas y escalables. Este concepto abarca desde la organización básica del código hasta la implementación de patrones avanzados que permiten estructurar proyectos complejos de manera eficiente.

Fundamentos de la construcción

JavaScript ofrece múltiples paradigmas de programación que permiten construir aplicaciones desde diferentes enfoques. La construcción efectiva comienza con la comprensión de cómo organizar el código de manera que sea mantenible, reutilizable y fácil de entender.

La modularización constituye el primer paso hacia una construcción sólida. Dividir el código en módulos permite crear componentes independientes que pueden desarrollarse, probarse y mantenerse por separado:

// modulo-calculadora.js
export function sumar(a, b) {
    return a + b;
}

export function multiplicar(a, b) {
    return a * b;
}

// main.js
import { sumar, multiplicar } from './modulo-calculadora.js';

const resultado = sumar(5, 3);
console.log(resultado); // 8

Patrones de construcción

Los patrones de diseño proporcionan soluciones probadas para problemas comunes en la construcción de software. El patrón Factory permite crear objetos sin especificar exactamente qué clase de objeto se creará:

class UsuarioFactory {
    static crearUsuario(tipo, datos) {
        switch(tipo) {
            case 'admin':
                return new Administrador(datos);
            case 'cliente':
                return new Cliente(datos);
            default:
                throw new Error('Tipo de usuario no válido');
        }
    }
}

const admin = UsuarioFactory.crearUsuario('admin', {
    nombre: 'Ana',
    permisos: ['leer', 'escribir', 'eliminar']
});

El patrón Observer facilita la construcción de sistemas reactivos donde los objetos pueden notificar cambios a otros objetos interesados:

class EventoManager {
    constructor() {
        this.listeners = {};
    }
    
    suscribir(evento, callback) {
        if (!this.listeners[evento]) {
            this.listeners[evento] = [];
        }
        this.listeners[evento].push(callback);
    }
    
    emitir(evento, datos) {
        if (this.listeners[evento]) {
            this.listeners[evento].forEach(callback => callback(datos));
        }
    }
}

Testing en JavaScript

El testing o pruebas de software representa una disciplina fundamental en el desarrollo moderno de aplicaciones JavaScript. Esta práctica consiste en escribir código específico para verificar que nuestro código principal funciona correctamente bajo diferentes condiciones y escenarios.

En el ecosistema JavaScript, las pruebas automatizadas han evolucionado desde simples verificaciones manuales hasta sofisticados frameworks que permiten validar desde funciones individuales hasta flujos completos de aplicación. Esta evolución responde a la creciente complejidad de las aplicaciones web y la necesidad de mantener la calidad del código a medida que los proyectos crecen.

Fundamentos del testing

Las pruebas unitarias constituyen la base del testing en JavaScript. Estas pruebas se enfocan en verificar el comportamiento de unidades individuales de código, típicamente funciones o métodos, de forma aislada. El objetivo es asegurar que cada componente funciona correctamente por sí mismo antes de integrarlo con otros elementos.

// Función a probar
function sumar(a, b) {
    return a + b;
}

// Prueba básica
function testSumar() {
    const resultado = sumar(2, 3);
    if (resultado === 5) {
        console.log('✓ Test pasado');
    } else {
        console.log('✗ Test fallido');
    }
}

Las aserciones son el mecanismo fundamental para verificar que los resultados obtenidos coinciden con los esperados. Una aserción es una declaración que debe ser verdadera; si es falsa, la prueba falla.

Estructura de las pruebas

Una prueba bien estructurada sigue el patrón AAA (Arrange, Act, Assert):

• Arrange: Preparar los datos y el entorno necesario
• Act: Ejecutar la función o código a probar
• Assert: Verificar que el resultado es el esperado

function testCalcularDescuento() {
    // Arrange - Preparar datos
    const precio = 100;
    const porcentajeDescuento = 20;
    
    // Act - Ejecutar función
    const precioFinal = calcularDescuento(precio, porcentajeDescuento);
    
    // Assert - Verificar resultado
    console.assert(precioFinal === 80, 'El descuento no se calculó correctamente');
}