Let y Const: una nueva forma de declarar variables
Antes de ES6, solo se usaba la palabra clave var para declarar variables, lo que presentaba varios problemas. El JavaScript moderno ofrece let y const con visibilidad de bloque.
// var - área de visibilidad funcional
function oldWay() {
if (true) {
var x = 10;
}
console.log(x); // 10 - variable disponible
}
// let - área de visibilidad de bloque
function newWay() {
if (true) {
let y = 10;
}
// console.log(y); // ReferenceError
}
// const - para enlaces inmutables
const API_URL = 'https://api.example.com';
const user = { name: 'Alexey' };
user.name = 'Ivan'; // Funciona - objeto variable
// user = {}; // TypeError - no se puede reasignarUtiliza const por defecto para todas las variables que no requieran reasignación. Esto hace que el código sea más predecible y lo protege de cambios accidentales.
Funciones de flecha: brevedad y this
Las funciones de flecha proporcionan una sintaxis más compacta y resuelven el problema con el contexto this.
// Función clásica
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(n) {
return n * 2;
});
// Función de desvío
const doubledArrow = numbers.map(n => n * 2);
// Varios parámetros
const sum = (a, b) => a + b;
// Cuerpo de la función con varias expresiones
const processUser = user => {
const name = user.name.toUpperCase();
return `Hi ${name}!`;
};Una característica importante de las funciones de flecha: no crean su propio contexto this, sino que lo heredan del área circundante.
class Timer {
constructor() {
this.seconds = 0;
}
// Con la función habitual, se necesitaría .bind(this)
start() {
setInterval(() => {
this.seconds++; // esto indica una instancia de Timer
console.log(this.seconds);
}, 1000);
}
}Desestructuración: extracción de datos de objetos y matrices
La desestructuración permite extraer valores de matrices y objetos en variables separadas de una manera elegante.
// Desestructuración de objetos
const user = {
name: 'Alexey',
age: 30,
email: 'alexey@example.com'
};
const { name, age } = user;
console.log(name); // Alexey
// Cambio de nombre de las variables
const { name: userName, age: userAge } = user;
// Valores predeterminados
const { role = 'user' } = user;
// Desestructuración de matrices
const colors = ['red', 'green', 'blue'];
const [primary, secondary] = colors;
// Omitir elementos
const [first, , third] = colors;
// Operador Rest
const [head, ...tail] = colors;
console.log(tail); // ['green', 'blue']La desestructuración es especialmente útil en los parámetros de las funciones.
function displayUser({ name, age, email = 'not specified' }) {
console.log(`${name}, ${age} years old, email: ${email}`);
}
displayUser(user);Operadores Spread y Rest: trabajo con colecciones
El operador de extensión (spread) y el operador de resto (rest) utilizan la misma sintaxis ..., pero realizan operaciones opuestas.
// Spread: despliega una matriz u objeto
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
// Copiar matriz
const original = [1, 2, 3];
const copy = [...original];
// Spread para objetos
const defaults = { theme: 'dark', language: 'ru' };
const userSettings = { language: 'en', fontSize: 14 };
const settings = { ...defaults, ...userSettings };
// { theme: 'dark', language: 'en', fontSize: 14 }
// Rest - recoge los elementos restantes
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3, 4); // 10Cadenas de plantilla: interpolación conveniente
Las cadenas de plantilla (template literals) usan comillas invertidas y permiten que las expresiones se incrusten en una cadena.
const name = 'Alexey';
const age = 30;
// Método antiguo
const greeting = 'Hi, ' + name + '! To you ' + age + ' years.';
// Líneas de plantilla
const modernGreeting = `Hi ${name}! You are ${age} years old.`;
// Líneas de varias líneas
const html = `
<div class="card">
<h2>${name}</h2>
<p>Age: ${age}</p>
</div>
`;
// Expresiones en plantillas
const price = 100;
const message = `Discounted price: ${price * 0.9} rub.`;Promesas y async/await: asincronía sin dolor
Las promesas han simplificado en gran medida el trabajo con el código asíncrono, y async/await lo han hecho parecer síncrono.
// Promis
function fetchUser(id) {
return fetch(`/api/users/${id}`)
.then(response => response.json())
.then(data => data.user)
.catch(error => console.error('Error:', error));
}
// Async/await - código más legible
async function fetchUserAsync(id) {
try {
const response = await fetch(`/api/users/${id}`);
const data = await response.json();
return data.user;
} catch (error) {
console.error('Error:', error);
}
}
// Ejecución en paralelo
async function fetchMultipleUsers(ids) {
const promises = ids.map(id => fetchUserAsync(id));
const users = await Promise.all(promises);
return users;
}Módulos: organización del código
Los módulos ES6 permiten dividir el código en partes lógicas y gestionar las dependencias.
// math.js - exportación
export const PI = 3.14159;
export function sum(a, b) {
return a + b;
}
export class Calculator {
multiply(a, b) {
return a * b;
}
}
// main.js - importación
import { PI, sum, Calculator } from './math.js';
// Importar todo el módulo
import * as MathUtils from './math.js';
// Exportación predeterminada
// user.js
export default class User {
constructor(name) {
this.name = name;
}
}
// Importar exportación predeterminada
import User from './user.js';
Clases: programación orientada a objetos
ES6 añadió azúcar sintáctico para trabajar con prototipos en forma de clases.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // Llamada al constructor padre
this.breed = breed;
}
speak() {
console.log(`${this.name} is barking`);
}
// Método estático
static info() {
return 'Dogs - pets';
}
}
const dog = new Dog('Bobik', 'Labrador');
dog.speak(); // Bobik ladraMétodos de matriz: map, filter, reduce y otros
Los métodos modernos de matrices hacen que trabajar con datos sea más declarativo.
const users = [
{ name: 'Alexey', age: 30, active: true },
{ name: 'Maria', age: 25, active: false },
{ name: 'Ivan', age: 35, active: true }
];
// map - transformación de elementos
const names = users.map(user => user.name);
// filter - filtración
const activeUsers = users.filter(user => user.active);
// reduce - agregación
const totalAge = users.reduce((sum, user) => sum + user.age, 0);
// find - buscar el primer elemento
const alex = users.find(user => user.name === 'Alexey');
// some - comprobar la condición para al menos un elemento
const hasActive = users.some(user => user.active);
// every - comprobar la condición para todos los elementos
const allActive = users.every(user => user.active);
// Cadenas de métodos
const result = users
.filter(user => user.active)
.map(user => user.name)
.sort();Optional Chaining y Nullish Coalescing
Estos operadores simplifican el trabajo con valores potencialmente indefinidos.
const user = {
name: 'Alexey',
address: {
city: 'Moscow'
}
};
// Encadenamiento opcional (?.) - acceso seguro
const street = user.address?.street; // indefinido, sin error
const zip = user.address?.zip?.code; // undefined
// Con métodos
const result = user.getData?.(); // indefinido si no hay método
// Nullish coalescing (??) - valor predeterminado
const port = process.env.PORT ?? 3000;
// Diferencia de ||
const count = 0;
console.log(count || 10); // 10 (0 se considera falso)
console.log(count ?? 10); // 0 (solo funciona con null/undefined)Conclusión
El JavaScript moderno ofrece muchas herramientas para escribir un código limpio y eficiente. Las características de ES6 y versiones posteriores no solo agregan una nueva sintaxis, sino que cambian el enfoque de la programación en JavaScript, haciéndolo más expresivo y confiable.
Comienza a aplicar estas características en tus proyectos gradualmente. Con el tiempo, muchas de ellas se convertirán en una parte natural de tu estilo de programación. El JavaScript moderno abre nuevos horizontes para los desarrolladores, haciendo que el proceso de creación de aplicaciones sea más productivo y agradable.
Kodik - plataforma educativa para desarrolladores principiantes. Creamos cursos y artículos comprensibles sobre Python, JavaScript, HTML, CSS y otras tecnologías modernas.
Únete a a nuestra comunidad!
Suscríbete a nuestro Canal de Telegram de Kodik, donde publicamos:
Nuevos artículos y tutoriales de programación
Consejos útiles para desarrolladores
Análisis de temas complejos en un lenguaje sencillo
Noticias actuales del mundo de TI
Desarrolla ¡junto con Kodik! 🚀