Introducción a ES6

ECMAScript 2015, comúnmente conocido como ES6, representa una actualización significativa del lenguaje JavaScript. Introdujo numerosas mejoras sintácticas y conceptuales para simplificar el desarrollo. Herramientas como Babel permiten transpilar código ES6 a versiones anteriores para compatibilidad.

Declaración de variables con let y const

En ES5, solo existían los ámbitos global y de función. ES6 introdujo el ámbito de bloque, delimitado por llaves {}. La palabra clave let declara variables con alcance de bloque, previniendo fugas de varaibles y conflictos globales.

// Ejemplo con let
{
  let temporaryValue = 5;
  console.log(temporaryValue); // 5
}
// console.log(temporaryValue); // Error: no definido

La palabra clave const define constantes que no pueden reasignarse. Sin embargo, los objetos y arreglos declarados con const siguen siendo mutables.

const config = { theme: 'dark' };
config.theme = 'light'; // Permitido
// config = {}; // Error: reasignación no permitida

Desestructuración de variables

ES6 permite extraer valores de arreglos u objetos y asignarlos a variables de forma concisa.

Desestructuración de objetos

const person = { name: 'Ana', age: 25 };
const { name: personName, age: personAge } = person;
console.log(personName, personAge); // Ana 25

Desestructuración de arreglos

const numbers = [10, 20, 30];
const [first, , third] = numbers;
console.log(first, third); // 10 30

Se pueden establecer valores predeterminados en la desestructuración.

const { color = 'blue' } = {};
console.log(color); // blue

Plantillas literales y métodos de cadenas

Las plantillas literales usan backticks y permiten interpolación y cadenas multilínea.

const item = 'libro';
const message = `Este ${item} es interesante.`;
console.log(message);

Nuevos métodos incluyen startsWith, includes y repeat.

const phrase = '¡Hola mundo!';
console.log(phrase.startsWith('¡Hola')); // true
console.log(phrase.includes('mundo')); // true
console.log('*'.repeat(3)); // ***

Operadores de extensión y parámetros rest

El operador de extensión (...) copia o fusiona arreglos y objetos.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 2 }

Los parámetros rest (...) recogen argumentos restantes en funciones.

function sum(...nums) {
  return nums.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3)); // 6

Funciones de flecha

Las funciones de flecha ofrecen una sintaxis concisa y no tienen su propio contexto this.

const double = x => x * 2;
console.log(double(4)); // 8

const greet = (name) => {
  return `¡Hola, ${name}!`;
};

No son adecuadas como constructores ni tienen objeto arguments.

Mejoras en objetos y arreglos

Sintaxis abreviada en objetos

const x = 10;
const y = 20;
const point = { x, y }; // Equivalente a { x: x, y: y }

Nuevos métodos de arreglos

Array.from convierte estructuras similares a arreglos.

const elements = Array.from(document.querySelectorAll('div'));

find y findIndex localizan elementos en arreglos.

const users = [{ id: 1 }, { id: 2 }];
const found = users.find(u => u.id === 2); // { id: 2 }

Map y Set como estructuras de datos

Set almacena valores únicos, mientras que Map permite claves de cualquier tipo.

const uniqueNumbers = new Set([1, 2, 2, 3]);
console.log(uniqueNumbers.size); // 3

const dictionary = new Map();
dictionary.set('key', 'value');
console.log(dictionary.get('key')); // value

Promesas para asincronía

Las promesas representan valores eventualmente disponibles, simplificando el código asíncrono.

const fetchData = () => new Promise((resolve, reject) => {
  setTimeout(() => resolve('datos'), 1000);
});
fetchData().then(data => console.log(data));

Módulos ES6

Los módulos permiten organizar código en archivos independientes, usando exportaciones e importaciones.

// utils.js
export const PI = 3.14;
export function square(x) { return x * x; }

// main.js
import { PI, square } from './utils.js';
console.log(PI);