Esta página contiene ejemplos de las características más modernas de JavaScript, como let/const, arrow functions, nuevas formas de manejar arrays y más.
Novedades en JavaScript (ES6+)
let y const - Declaración de variables con alcance de bloque
Arrow Functions - Funciones flecha con sintaxis más concisa
Template Literals - Strings con interpolación de variables
Destructuring - Extracción de valores de arrays u objetos
Spread Operator - Expansión de elementos iterables
Métodos de arrays modernos - map, filter, reduce, etc.
Parámetros por defecto - Valores predeterminados en funciones
Async/Await - Manejo de operaciones asíncronas
Ejemplo 1: let vs var vs const
Resultado:
Código:
function ejemploLetVarConst() {
let resultado = "";
// Ejemplo con var (hoisting y function scope)
resultado += "=== EJEMPLO CON var ===\n";
for (var i = 0; i < 3; i++) {
resultado += `Dentro del bucle: ${i}\n`;
}
resultado += `Fuera del bucle: ${i}\n\n`;
// Ejemplo con let (block scope)
resultado += "=== EJEMPLO CON let ===\n";
for (let j = 0; j < 3; j++) {
resultado += `Dentro del bucle: ${j}\n`;
}
// j no está definido fuera del bucle → Error si intentamos usarlo
resultado += "j no está accesible fuera del bucle\n\n";
// Ejemplo con const
resultado += "=== EJEMPLO CON const ===\n";
const PI = 3.1416;
// PI = 3.14; // Esto produciría un error
resultado += `El valor de PI es: ${PI}\n`;
// Const con objetos (la referencia es constante, no el contenido)
const persona = { nombre: "Juan", edad: 30 };
persona.edad = 31; // Esto es válido
resultado += `Persona: ${JSON.stringify(persona)}\n`;
return resultado;
}
Explicación:
var tiene alcance de función y sufre de hoisting.
let tiene alcance de bloque y no sufre de hoisting de la misma manera.
const también tiene alcance de bloque pero no puede ser reasignada. Sin embargo, los objetos y arrays declarados con const pueden ser modificados.
Ejemplo 2: Arrow Functions
Resultado:
Código:
function ejemploArrowFunctions() {
let resultado = "";
// Función tradicional
function sumaTradicional(a, b) {
return a + b;
}
// Arrow function equivalente
const sumaFlecha = (a, b) => {
return a + b;
};
// Arrow function con return implícito
const sumaFlechaCorta = (a, b) => a + b;
resultado += `Suma tradicional: ${sumaTradicional(5, 3)}\n`;
resultado += `Suma flecha: ${sumaFlecha(5, 3)}\n`;
resultado += `Suma flecha corta: ${sumaFlechaCorta(5, 3)}\n\n`;
// Uso con arrays
const numeros = [1, 2, 3, 4, 5];
// Map con función tradicional
const cuadradosTrad = numeros.map(function(x) {
return x * x;
});
// Map con arrow function
const cuadradosFlecha = numeros.map(x => x * x);
resultado += `Números: ${numeros}\n`;
resultado += `Cuadrados (trad): ${cuadradosTrad}\n`;
resultado += `Cuadrados (flecha): ${cuadradosFlecha}\n`;
return resultado;
}
Explicación:
Las arrow functions proporcionan una sintaxis más concisa para escribir funciones y no tienen su propio this, arguments, super o new.target.
Son especialmente útiles con métodos de arrays como map, filter y reduce.
Ejemplo 3: Nuevos Métodos de Arrays
Resultado:
Código:
function ejemploMetodosArrays() {
const input = document.getElementById('arrayInput').value;
const numeros = input.split(',').map(Number);
let resultado = "";
resultado += `Array original: ${JSON.stringify(numeros)}\n\n`;
// Map - transformar cada elemento
const cuadrados = numeros.map(x => x * x);
resultado += `Map (cuadrados): ${JSON.stringify(cuadrados)}\n`;
// Filter - filtrar elementos
const pares = numeros.filter(x => x % 2 === 0);
resultado += `Filter (pares): ${JSON.stringify(pares)}\n`;
// Reduce - reducir a un solo valor
const suma = numeros.reduce((acumulador, valor) => acumulador + valor, 0);
resultado += `Reduce (suma): ${suma}\n`;
// Find - encontrar primer elemento que cumpla condición
const mayorQue3 = numeros.find(x => x > 3);
resultado += `Find (>3): ${mayorQue3}\n`;
// Some - verificar si al menos uno cumple condición
const hayNegativos = numeros.some(x => x < 0);
resultado += `Some (<0): ${hayNegativos}\n`;
// Every - verificar si todos cumplen condición
const todosPositivos = numeros.every(x => x > 0);
resultado += `Every (>0): ${todosPositivos}\n`;
// Includes - verificar si contiene un elemento
const contiene3 = numeros.includes(3);
resultado += `Includes (3): ${contiene3}\n`;
return resultado;
}
Explicación:
JavaScript moderno introduce muchos métodos útiles para trabajar con arrays:
map(): Transforma cada elemento del array
filter(): Filtra elementos según una condición
reduce(): Reduce el array a un único valor
find(): Encuentra el primer elemento que cumple una condición
some(): Verifica si al menos un elemento cumple una condición
every(): Verifica si todos los elementos cumplen una condición
includes(): Verifica si el array contiene un elemento