JavaScript Moderno (ES6+)

JavaScript Moderno

ES6 (ECMAScript 2015) y versiones posteriores introdujeron muchas caracteristicas que hacen JavaScript mas potente y agradable de escribir. Aqui estan las mas importantes.

Template Literals

const nombre = "Ana";
const edad = 25;

// Interpolacion de strings
const mensaje = `Hola, ${nombre}! Tienes ${edad} anos.`;

// Strings multilinea
const html = `
  <div class="tarjeta">
    <h2>${nombre}</h2>
    <p>Edad: ${edad}</p>
  </div>
`;

// Expresiones en templates
const precio = 100;
const iva = `Total: $${(precio * 1.21).toFixed(2)}`;

Destructuring

// Arrays
const [primero, segundo, ...resto] = [1, 2, 3, 4, 5];
const [a, , c] = [1, 2, 3]; // Saltar elementos

// Objetos
const { nombre, edad } = { nombre: "Ana", edad: 25 };
const { nombre: n, edad: e } = persona; // Renombrar
const { direccion: { ciudad } } = persona; // Anidado

// En parametros de funcion
function saludar({ nombre, edad = 0 }) {
  return `${nombre} tiene ${edad} anos`;
}

// Intercambiar variables
let x = 1, y = 2;
[x, y] = [y, x];

Spread Operator

// Arrays
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
const copia = [...arr1];

// Objetos
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// Argumentos de funcion
const numeros = [1, 2, 3];
console.log(Math.max(...numeros)); // 3

Rest Parameters

// Recoger argumentos restantes
function sumar(...numeros) {
  return numeros.reduce((a, b) => a + b, 0);
}
sumar(1, 2, 3, 4); // 10

// Combinar con parametros normales
function log(primero, ...resto) {
  console.log(primero); // "a"
  console.log(resto);   // ["b", "c"]
}
log("a", "b", "c");

Shorthand Properties y Methods

const nombre = "Ana";
const edad = 25;

// Shorthand properties
const persona = { nombre, edad };
// Equivalente a: { nombre: nombre, edad: edad }

// Shorthand methods
const calculadora = {
  sumar(a, b) {
    return a + b;
  },
  restar(a, b) {
    return a - b;
  }
};
// En vez de: sumar: function(a, b) { ... }

Optional Chaining y Nullish Coalescing

const usuario = {
  nombre: "Ana",
  direccion: {
    ciudad: "Madrid"
  }
};

// Optional chaining (?.)
console.log(usuario.direccion?.ciudad);  // "Madrid"
console.log(usuario.trabajo?.empresa);   // undefined (sin error)
console.log(usuario.metodo?.());         // undefined si no existe

// Nullish coalescing (??)
const valor = null ?? "por defecto";     // "por defecto"
const cero = 0 ?? "por defecto";         // 0 (solo null/undefined)
const cadenaVacia = "" ?? "por defecto"; // "" (solo null/undefined)

// Combinar ambos
const ciudad = usuario.direccion?.ciudad ?? "Desconocida";

Otras Caracteristicas ES6+

// Symbol - valores unicos
const id = Symbol("id");

// Map - pares clave-valor (cualquier tipo de clave)
const mapa = new Map();
mapa.set("clave", "valor");
mapa.set(123, "numero como clave");

// Set - valores unicos
const conjunto = new Set([1, 2, 2, 3]); // {1, 2, 3}

// for...of - iterar sobre iterables
for (const valor of [1, 2, 3]) {
  console.log(valor);
}

// Array.includes
[1, 2, 3].includes(2); // true

// Object.entries/values/keys
Object.entries({ a: 1, b: 2 }); // [["a", 1], ["b", 2]]

// Exponenciacion
2 ** 3; // 8

// Array.flat y flatMap
[[1, 2], [3, 4]].flat(); // [1, 2, 3, 4]