Guía completa sobre las características modernas de JavaScript ES6+ con ejemplos prácticos

Introducción

JavaScript ha evolucionado significativamente desde ES6 (2015). Este manual cubre las características más importantes del JavaScript moderno que todo desarrollador debe conocer.

Índice

1. Variables y Constantes
2. Funciones Arrow
3. Destructuring
4. Template Literals
5. Módulos
6. Promesas y Async/Await

Variables y Constantes

let y const

En JavaScript moderno, se recomienda usar let y const en lugar de var:

// ❌ Evitar
var nombre = "Juan";

// ✅ Recomendado
const nombre = "Juan";  // Para valores que no cambiarán
let edad = 25;          // Para valores que pueden cambiar

Diferencias clave

Funciones Arrow

Las funciones arrow proporcionan una sintaxis más concisa:

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

// Función arrow
const sumar = (a, b) => a + b;

// Con un solo parámetro
const duplicar = x => x * 2;

// Sin parámetros
const saludar = () => "¡Hola!";

Nota importante: Las funciones arrow no tienen su propio contexto this, heredan el this del ámbito padre.

Destructuring

Permite extraer valores de arrays y objetos de forma elegante:

Destructuring de Arrays

const numeros = [1, 2, 3, 4, 5];

// Método tradicional
const primero = numeros[0];
const segundo = numeros[1];

// Con destructuring
const [primero, segundo, ...resto] = numeros;
console.log(primero); // 1
console.log(segundo); // 2
console.log(resto);   // [3, 4, 5]

Destructuring de Objetos

const persona = {
  nombre: "Ana",
  edad: 30,
  ciudad: "Madrid"
};

// Con destructuring
const { nombre, edad, profesion = "No especificada" } = persona;
console.log(nombre);    // "Ana"
console.log(profesion); // "No especificada" (valor por defecto)

Template Literals

Facilitan la interpolación de strings y strings multilínea:

const nombre = "Carlos";
const edad = 28;

// Método tradicional
const mensaje = "Hola, soy " + nombre + " y tengo " + edad + " años";

// Con template literals
const mensaje = `Hola, soy ${nombre} y tengo ${edad} años`;

// Strings multilínea
const html = `
  <div>
    <h1>${nombre}</h1>
    <p>Edad: ${edad}</p>
  </div>
`;

Módulos

Los módulos ES6 permiten organizar el código en archivos separados:

Exportar

// math.js
export const PI = 3.14159;

export function area(radio) {
  return PI * radio * radio;
}

export default function perimetro(radio) {
  return 2 * PI * radio;
}

Importar

// main.js
import perimetro, { PI, area } from './math.js';

console.log(PI);              // 3.14159
console.log(area(5));         // 78.53975
console.log(perimetro(5));    // 31.4159

Promesas y Async/Await

Promesas

Las promesas manejan operaciones asíncronas de forma más elegante:

// Crear una promesa
function obtenerDatos() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const exito = Math.random() > 0.5;
      if (exito) {
        resolve("Datos obtenidos correctamente");
      } else {
        reject("Error al obtener datos");
      }
    }, 1000);
  });
}

// Usar la promesa
obtenerDatos()
  .then(datos => console.log(datos))
  .catch(error => console.error(error));

Async/Await

Sintaxis más limpia para trabajar con promesas:

async function procesarDatos() {
  try {
    const datos = await obtenerDatos();
    console.log(datos);
    
    // Procesar datos aquí
    const resultado = await procesarResultado(datos);
    return resultado;
  } catch (error) {
    console.error("Error:", error);
  }
}

Ejemplos Prácticos

Fetch API con Async/Await

async function obtenerUsuarios() {
  try {
    const response = await fetch('https://api.ejemplo.com/usuarios');
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const usuarios = await response.json();
    return usuarios;
  } catch (error) {
    console.error('Error al obtener usuarios:', error);
    throw error;
  }
}

// Uso
obtenerUsuarios()
  .then(usuarios => {
    usuarios.forEach(({ nombre, email }) => {
      console.log(`${nombre}: ${email}`);
    });
  })
  .catch(error => console.error('Error:', error));

Manejo de Arrays con Métodos Modernos

const productos = [
  { nombre: "Laptop", precio: 1200, categoria: "electrónicos" },
  { nombre: "Camisa", precio: 30, categoria: "ropa" },
  { nombre: "Teléfono", precio: 800, categoria: "electrónicos" },
  { nombre: "Zapatos", precio: 120, categoria: "ropa" }
];

// Filtrar productos electrónicos
const electronicos = productos.filter(({ categoria }) => categoria === "electrónicos");

// Obtener solo los nombres
const nombres = productos.map(({ nombre }) => nombre);

// Calcular precio total
const total = productos.reduce((sum, { precio }) => sum + precio, 0);

// Encontrar producto más caro
const masCaro = productos.reduce((max, producto) => 
  producto.precio > max.precio ? producto : max
);

console.log({ electronicos, nombres, total, masCaro });

Mejores Prácticas

1. Usa const por defecto

// ✅ Buena práctica
const configuracion = { api: "https://api.ejemplo.com" };
const usuarios = [];

// ❌ Evitar
var configuracion = { api: "https://api.ejemplo.com" };

2. Destructuring en parámetros de función

// ✅ Claro y conciso
function crearUsuario({ nombre, email, edad = 18 }) {
  return { nombre, email, edad, id: Date.now() };
}

// Uso
const usuario = crearUsuario({ nombre: "Ana", email: "ana@ejemplo.com" });

3. Usa template literals para strings complejos

// ✅ Legible
const mensaje = `
  Estimado/a ${nombre},
  
  Su pedido #${numeroPedido} ha sido procesado.
  Total: ${formatearPrecio(total)}
  
  Saludos cordiales
`;

Recursos Adicionales

• MDN Web Docs - JavaScript
• ES6 Features
• JavaScript.info

Conclusión

El JavaScript moderno ofrece herramientas poderosas que hacen el código más legible, mantenible y eficiente. Dominar estas características es esencial para cualquier desarrollador web actual.

Próximos pasos: Practica estos conceptos creando pequeños proyectos y consulta la documentación oficial cuando tengas dudas.