Curso de programación JavaScript Sintaxis

JavaScript es un lenguaje de programación interpretado, de alto nivel y dinámico que se ha convertido en uno de los pilares fundamentales del desarrollo web moderno. Creado originalmente para añadir interactividad a las páginas web, JavaScript ha evolucionado hasta convertirse en un lenguaje versátil capaz de ejecutarse tanto en navegadores (frontend) como en servidores (backend) gracias a entornos como Node.js.

Características fundamentales de JavaScript

JavaScript destaca por ser un lenguaje:

• Interpretado: Se ejecuta directamente sin necesidad de compilación previa
• Dinámico: Permite cambiar el tipo de las variables durante la ejecución
• Orientado a objetos: Basado en prototipos en lugar de clases (aunque las clases fueron añadidas como azúcar sintáctico en ES6)
• De tipado débil: No requiere declarar el tipo de datos de las variables
• Multiparadigma: Soporta programación funcional, orientada a objetos y basada en eventos

Evolución y estándares

JavaScript sigue el estándar ECMAScript (ES), que define la sintaxis y características del lenguaje. Las versiones más relevantes incluyen:

• ES5 (2009): Introdujo métodos de array como map(), filter() y reduce()
• ES6/ES2015: Añadió características fundamentales como clases, módulos, promesas, arrow functions, destructuring y más
• ES2016-2022: Incorporaciones continuas como async/await, operador de propagación, y otras mejoras sintácticas

Fundamentos de la sintaxis

Tipos de datos

JavaScript maneja varios tipos de datos primitivos y complejos que permiten representar diferentes tipos de información:

// Primitivos
let texto = "Hola mundo";    // String
let numero = 42;             // Number
let esVerdad = true;         // Boolean
let noDefinido;              // undefined
let nulo = null;             // null
let simbolo = Symbol("id");  // Symbol
let enteroGrande = 9007199254740991n; // BigInt

// Complejos (por referencia)
let objeto = { nombre: "Ana", edad: 25 };  // Object
let arreglo = [1, 2, 3, 4];                // Array (tipo de objeto)
let fecha = new Date();                    // Date (tipo de objeto)

Variables y constantes

Las variables son contenedores para almacenar datos. JavaScript ofrece tres formas de declarar variables, cada una con diferentes características de ámbito y reasignación:

// var - ámbito de función, puede ser redeclarada
var contador = 1;

// let - ámbito de bloque, puede ser reasignada pero no redeclarada
let puntuacion = 100;

// const - ámbito de bloque, no puede ser reasignada
const PI = 3.14159;

Operadores

JavaScript proporciona diversos operadores para realizar operaciones con valores:

• Aritméticos: Para cálculos matemáticos básicos

let suma = 5 + 3;        // 8
let resta = 10 - 4;      // 6
let multiplicacion = 3 * 4;  // 12
let division = 20 / 5;   // 4
let modulo = 10 % 3;     // 1 (resto de la división)
let exponente = 2 ** 3;  // 8 (2 elevado a 3)

• Comparación: Para evaluar relaciones entre valores

5 > 3;    // true (mayor que)
7 < 2;    // false (menor que)
5 >= 5;   // true (mayor o igual que)
3 <= 2;   // false (menor o igual que)
5 == "5"; // true (igualdad con conversión de tipo)
5 === "5"; // false (igualdad estricta, sin conversión)

• Lógicos: Para combinar expresiones booleanas

true && false;  // false (AND lógico)
true || false;  // true (OR lógico)
!true;          // false (NOT lógico)

Estructuras de control

Las estructuras de control permiten alterar el flujo de ejecución del programa:

• Condicionales: Ejecutan código basado en condiciones

// if-else
let edad = 18;

if (edad >= 18) {
    console.log("Eres mayor de edad");
} else {
    console.log("Eres menor de edad");
}

// switch
let dia = "Lunes";

switch (dia) {
    case "Lunes":
        console.log("Inicio de semana");
        break;
    case "Viernes":
        console.log("Fin de semana laboral");
        break;
    default:
        console.log("Otro día de la semana");
}

• Bucles: Repiten código mientras se cumpla una condición

// for
for (let i = 0; i < 5; i++) {
    console.log(`Iteración ${i}`);
}

// while
let contador = 0;
while (contador < 3) {
    console.log(`Contador: ${contador}`);
    contador++;
}

// for...of (para iterar elementos)
const frutas = ["manzana", "pera", "naranja"];
for (const fruta of frutas) {
    console.log(fruta);
}

// for...in (para iterar propiedades)
const persona = {nombre: "Juan", edad: 30};
for (const propiedad in persona) {
    console.log(`${propiedad}: ${persona[propiedad]}`);
}

Funciones

Las funciones son bloques de código reutilizables que realizan tareas específicas:

// Declaración de función
function saludar(nombre) {
    return `¡Hola, ${nombre}!`;
}

// Expresión de función
const despedir = function(nombre) {
    return `¡Adiós, ${nombre}!`;
};

// Arrow function (función flecha)
const multiplicar = (a, b) => a * b;

// Función con parámetros por defecto
function configurar(opciones = {color: "azul", tamaño: "mediano"}) {
    console.log(`Color: ${opciones.color}, Tamaño: ${opciones.tamaño}`);
}

Funciones cierre (closures)

Los closures son funciones que "recuerdan" el entorno en el que fueron creadas, permitiendo acceder a variables de ámbitos externos incluso después de que la función externa haya terminado:

function crearContador() {
    let contador = 0;
    
    return function() {
        contador++;
        return contador;
    };
}

const miContador = crearContador();
console.log(miContador()); // 1
console.log(miContador()); // 2

Expresiones regulares

Las expresiones regulares son patrones utilizados para hacer coincidir combinaciones de caracteres en cadenas:

// Crear una expresión regular
const patron = /javascript/i;  // La 'i' hace que sea insensible a mayúsculas/minúsculas

// Probar coincidencias
const texto = "Me encanta JavaScript";
console.log(patron.test(texto));  // true

// Encontrar coincidencias
const coincidencias = texto.match(/[A-Z]/g);  // Encuentra todas las mayúsculas
console.log(coincidencias);  // ["M", "J", "S"]

// Reemplazar texto
const nuevoTexto = texto.replace(/javascript/i, "Python");
console.log(nuevoTexto);  // "Me encanta Python"

Manipulación de strings

JavaScript ofrece numerosos métodos para manipular cadenas de texto:

const texto = "JavaScript es fantástico";

// Longitud
console.log(texto.length);  // 25

// Acceso a caracteres
console.log(texto[0]);  // "J"
console.log(texto.charAt(0));  // "J"

// Búsqueda
console.log(texto.indexOf("Script"));  // 4
console.log(texto.includes("es"));  // true

// Transformación
console.log(texto.toUpperCase());  // "JAVASCRIPT ES FANTÁSTICO"
console.log(texto.toLowerCase());  // "javascript es fantástico"

// Extracción
console.log(texto.slice(0, 10));  // "JavaScript"
console.log(texto.substring(11, 13));  // "es"

// División
console.log(texto.split(" "));  // ["JavaScript", "es", "fantástico"]

// Eliminación de espacios
const textoConEspacios = "   Hola mundo   ";
console.log(textoConEspacios.trim());  // "Hola mundo"

Arrays y sus métodos

Los arrays son estructuras de datos que almacenan colecciones ordenadas de elementos:

// Crear arrays
const numeros = [1, 2, 3, 4, 5];
const mixto = [1, "dos", true, {nombre: "objeto"}, [6, 7]];

// Acceder a elementos
console.log(numeros[0]);  // 1
console.log(numeros[numeros.length - 1]);  // 5

// Modificar elementos
numeros[2] = 30;
console.log(numeros);  // [1, 2, 30, 4, 5]

// Métodos para añadir/eliminar elementos
numeros.push(6);  // Añade al final
numeros.pop();    // Elimina del final
numeros.unshift(0);  // Añade al inicio
numeros.shift();     // Elimina del inicio
numeros.splice(2, 1, 3);  // Reemplaza elementos

// Métodos de iteración
numeros.forEach(num => console.log(num * 2));

const duplicados = numeros.map(num => num * 2);
const pares = numeros.filter(num => num % 2 === 0);
const suma = numeros.reduce((total, num) => total + num, 0);

// Búsqueda
const indice = numeros.indexOf(4);
const encontrado = numeros.find(num => num > 3);
const algunoNegativo = numeros.some(num => num < 0);
const todosMayoresQueCero = numeros.every(num => num > 0);

Estructuras de datos avanzadas

Conjuntos (Set)

Los Sets son colecciones de valores únicos, sin duplicados:

// Crear un Set
const colores = new Set(["rojo", "verde", "azul", "rojo"]);
console.log(colores);  // Set(3) {"rojo", "verde", "azul"}

// Añadir y eliminar elementos
colores.add("amarillo");
colores.delete("verde");

// Comprobar existencia
console.log(colores.has("azul"));  // true

// Tamaño
console.log(colores.size);  // 3

// Iteración
colores.forEach(color => console.log(color));

// Convertir a array
const arrayColores = [...colores];

Mapas (Map)

Los Maps son colecciones de pares clave-valor donde las claves pueden ser de cualquier tipo:

// Crear un Map
const usuario = new Map();

// Añadir entradas
usuario.set("nombre", "Ana");
usuario.set("edad", 28);
usuario.set(1, "ID de usuario");

// Obtener valores
console.log(usuario.get("nombre"));  // "Ana"

// Comprobar existencia
console.log(usuario.has("apellido"));  // false

// Eliminar entradas
usuario.delete("edad");

// Tamaño
console.log(usuario.size);  // 2

// Iteración
usuario.forEach((valor, clave) => {
    console.log(`${clave}: ${valor}`);
});

// Obtener claves y valores
console.log([...usuario.keys()]);
console.log([...usuario.values()]);
console.log([...usuario.entries()]);

Aplicaciones prácticas

JavaScript es fundamental en el desarrollo web moderno, permitiendo crear:

• Interfaces interactivas que responden a acciones del usuario
• Aplicaciones de una sola página (SPA) con frameworks como React, Angular o Vue
• Aplicaciones móviles híbridas con tecnologías como React Native o Ionic
• Aplicaciones de servidor con Node.js
• Aplicaciones de escritorio con Electron
• Automatización de tareas con herramientas como Gulp o Webpack

El dominio de la sintaxis de JavaScript es el primer paso para desarrollar aplicaciones web modernas, interactivas y eficientes que ofrezcan experiencias de usuario excepcionales.