Javascript
desarrollo web
tutorial
ES6
Si vienes de otro lenguaje de programación y estás empezando con JavaScript, probablemente te hayas dado cuenta de que el ecosistema ha cambiado muchísimo en los últimos años. Lo que solías ver en tutoriales antiguos (var, callbacks anidados, concatenación de strings con +) ya no es la forma en que se escribe JavaScript hoy.
Este artículo cubre las herramientas y patrones modernos que realmente se usan en proyectos actuales. No es una lista exhaustiva de características, sino las cosas que aparecen todos los días en código de producción.
El concepto de "hoisting" hace referencia a la capacidad que tiene Javascript de "elevar" la declaracion de variables al inicio de su contexto lógico o "scope".
En este ejemplo, gracias al hoisting, Javascript moverá la declaracion de la variable "name" al inicio de su scope (durante la fase de compilación interna) Si intentamos acceder a la variable antes de asignarle un valor, el resultado será "undefined" Sin embargo, este comportamiento puede cambiar ligeramente, dependiendo del tipo de variable que se use.
Cuando JavaScript era joven, todo el mundo usaba var. Pero var, funciona como una "variable global", lo cual puede introducir bugs sutiles si no se maneja adecuadamente el "scope"
Por ejemplo: La variable podria ser "sobrescrita" desde un submétodo, lo cual alteraria otros métodos que la usan
Hoy en día, se usa const y let los cuales permiten controler mejor el nivel de "acceso" de las variables: const se usa cuando el valor es "constante", es decir no esperas que cambie. Por otro lado, let se usa cuando planeas asignar un nuevo valor a la variable en algun otro momento. A diferencia de var, las variables const y let solo poseen hoisting parcial (no son accesibles a nivel global, sino unicamente desde su scope) y por ende deben ser declaradas antes de poder acceder a ellas.
La regla es simple, usa const por defecto. Solo cambia a let cuando realmente necesites reasignar la variable. Esto hace que el código sea más predecible y fácil de razonar.
1const apiUrl = 'https://example.com'; 2const user = { name: 'Ana', age: 28 }; 3 4// Esto va a fallar 5// apiUrl = 'otra-url'; 6 7// Pero puedes modificar propiedades de objetos 8user.age = 29; // Esto está bien
Al principio puede parecer raro usar const para objetos que modificas, pero recuerda: const significa que la referencia no cambia, no que el objeto sea inmutable.
Las funciones flecha no son solo una forma más corta de escribir funciones. La diferencia real está en cómo manejan this, lo cual puede evitar muchos dolores de cabeza.
Las funciones flecha se usan casi todo el tiempo: en callbacks de arrays, en promesas, en event handlers. La única excepción es cuando necesitas que this se refiera al objeto que contiene el método.
Este patrón es tan común que se vuelve segunda naturaleza rápidamente.
JavaScript moderno tiene algunas características que hacen que trabajar con objetos y arrays sea mucho más limpio.
Si estás creando un objeto y los nombres de las variables coinciden con los nombres de las propiedades, puedes omitir la repetición:
Esto puede parecer un detalle pequeño, pero cuando estás construyendo muchos objetos, marca una diferencia real en legibilidad.
Destructuring es una de esas características que una vez que empiezas a usar, no puedes vivir sin ella. Te permite extraer valores de objetos y arrays de forma elegante:
Con arrays es igual de útil:
Esto es especialmente útil en parámetros de funciones. En lugar de recibir un objeto completo y acceder a sus propiedades dentro de la función, puedes destructurar directamente en los parámetros:
1// Antes 2function greet(user) { 3 console.log(`Hola, ${user.name}`); 4} 5 6// Ahora 7function greet({ name }) { 8 console.log(`Hola, ${name}`); 9}
Si vienes de lenguajes funcionales, estos te resultarán familiares. Si no, puede que al principio parezcan extraños, pero una vez que se entienden, hacen el código mucho más limpio.
map transforma cada elemento:
filter se queda solo con los elementos que cumplen una condición:
reduce es el más poderoso pero también el más difícil de entender al principio. Reduce un array a un solo valor:
La clave con reduce es entender que estás "acumulando" algo. El primer argumento es el acumulador, el segundo es el elemento actual, y el último argumento (0 en este caso) es el valor inicial del acumulador.
Cuando se trata de trabajar con objetos clave-valor, o con colecciones de elementos repetidos, Javascript ofrece poderosas alternativas como Map y Set.
Un Map es una colección de pares clave-valor muy similar a un objeto, pero con mayores funcionalides. A diferencia de los objetos, sus "llaves" pueden ser de cualquier tipo (no solamente strings), además, recuerda el orden de inserción de los elementos e incluye multiples métodos para añadir o remover items, conocer su tamaño, entre otras acciones.
Un Set es una coleccion de elementos únicos, sin duplicados. Puede ser creado en base a un array, e incluye métodos para añadir elementos, removerlos, saber si existen y contabilizarlos. Es una excelente alternativa cuando se desea filtrar elementos repetidos
Las operaciones asincrónicas solían manejarse con callbacks. Y si necesitabas hacer varias operaciones en secuencia, terminabas con lo que llamamos "callback hell":
1getData(function(a) { 2 getMoreData(a, function(b) { 3 getEvenMoreData(b, function(c) { 4 console.log(c); 5 }); 6 }); 7});
Es difícil de leer y aún más difícil de mantener. Luego llegaron las Promesas, que mejoraron las cosas:
1getData() 2 .then(a => getMoreData(a)) 3 .then(b => getEvenMoreData(b)) 4 .then(c => console.log(c)) 5 .catch(error => console.error(error));
Pero la verdadera revolución fue async/await. Hace que el código asincrónico se vea como código sincrónico:
1async function fetchUser(id) { 2 try { 3 const response = await fetch(`https://example.com/users/${id}`); 4 const user = await response.json(); 5 return user; 6 } catch (error) { 7 console.error('Error:', error); 8 } 9}
Esto es mucho más fácil de leer. El código hace exactamente lo que parece que hace: espera la respuesta, la convierte a JSON, y retorna el usuario. Si algo falla, lo captura en el catch.
Para hacer peticiones HTTP, se usa Fetch API. Es mucho más simple que XMLHttpRequest (que probablemente nunca necesitarás usar):
1async function getUsers() { 2 const response = await fetch('https://example.com/users'); 3 4 if (!response.ok) { 5 throw new Error(`Error: ${response.status}`); 6 } 7 8 return await response.json(); 9}
Una cosa importante: Fetch no rechaza la promesa en errores HTTP (como 404 o 500). Por eso siempre hay que revisar response.ok antes de procesar la respuesta.
Si necesitas hacer múltiples peticiones y no dependen una de otra, usa Promise.all para ejecutarlas en paralelo:
1async function fetchMultipleUsers(ids) { 2 const promises = ids.map(id => 3 fetch(`https://example.com/users/${id}`).then(r => r.json()) 4 ); 5 6 return await Promise.all(promises); 7}
Esto es mucho más rápido que hacer las peticiones en secuencia, especialmente cuando hay muchas.
En JavaScript moderno, cada archivo puede ser un módulo. Puedes exportar funciones, clases, o valores, e importarlos donde los necesites. Hay dos tipos de exports: named exports y default exports.
Named exports son útiles cuando quieres exportar múltiples cosas de un archivo:
Default exports son para cuando tienes una cosa principal que exportar:
1// User.js 2export default class User { 3 constructor(name) { 4 this.name = name; 5 } 6} 7 8// app.js 9import User from './User.js';
Puedes usar ambos en el mismo archivo, pero es mejor mantenerlo simple: si un archivo tiene una cosa principal, usa default export. Si tiene varias utilidades relacionadas, usa named exports.
Si has trabajado con Node.js, probablemente has visto require y module.exports. Esa es la sintaxis de CommonJS, el sistema de módulos original de Node.
1// CommonJS (viejo) 2const fs = require('fs'); 3module.exports = myFunction; 4 5// ES Modules (moderno) 6import fs from 'fs'; 7export default myFunction;
ES Modules es el estándar oficial de JavaScript y es lo que deberías usar en código nuevo. Node.js moderno soporta ambos, pero ES Modules es el futuro.
Antes se concatenaban strings con +, y era feo:
1const name = 'Ana'; 2const greeting = 'Hola, ' + name + '!';
Ahora se usan template literals con backticks:
1const greeting = `Hola, ${name}!`;
Puedes poner cualquier expresión JavaScript dentro de ${}:
1const price = 99.99; 2const message = `El total es: $${(price * 1.21).toFixed(2)}`;
Y lo mejor: puedes escribir strings multilínea sin trucos raros:
1const html = ` 2 <div class="card"> 3 <h2>${title}</h2> 4 <p>${description}</p> 5 </div> 6`;
Esto es especialmente útil cuando estás generando HTML o SQL queries (aunque para SQL deberías usar prepared statements por seguridad).
El spread operator es como "desempacar" un array u objeto:
Con objetos es súper útil para crear copias con modificaciones:
Este operador salva de escribir tanto código defensivo. Antes, si querías acceder a una propiedad anidada que podría no existir, tenías que hacer esto:
Ahora:
Si cualquier parte de la cadena es null o undefined, toda la expresión retorna undefined en lugar de explotar con un error.
Este es diferente del operador OR (||). OR retorna el lado derecho si el izquierdo es cualquier valor "falsy" (incluyendo 0, '', false). Nullish coalescing solo retorna el lado derecho si el izquierdo es null o undefined:
Esto es especialmente útil para valores por defecto:
1const port = process.env.PORT ?? 3000;
En JavaScript moderno, especialmente si usas React u otros frameworks modernos, se trata de evitar modificar datos directamente. En lugar de eso, se crean nuevas versiones.
1// ❌ Mutación 2const user = { name: 'Ana', age: 28 }; 3user.age = 29; 4 5// ✓ Inmutabilidad 6const updatedUser = { ...user, age: 29 };
¿Por qué? Porque hace que el código sea más predecible. Cuando pasas un objeto a una función, sabes que esa función no va a modificarlo. Esto también hace que sea más fácil rastrear cambios y debuggear.
Con arrays, usa métodos que retornan nuevos arrays en lugar de modificar el original:
1const numbers = [1, 2, 3]; 2 3// ❌ Métodos que mutan 4numbers.push(4); 5numbers.sort(); 6 7// ✓ Métodos inmutables 8const withNew = [...numbers, 4]; 9const sorted = [...numbers].sort();
ESLint es una herramienta que analiza tu código y te dice cuando estás haciendo algo que probablemente no deberías. Al principio puede parecer molesto, pero te va a salvar de bugs tontos.
Una configuración básica incluye:
No necesitas una configuración súper estricta para empezar. Es mejor comenzar con eslint:recommended y ajustar según tus necesidades.
Todos estos conceptos pueden parecer mucho al principio, pero la verdad es que cuando empiezas a escribir JavaScript moderno, estos patrones se vuelven naturales rápidamente.
Aquí está un ejemplo real de cómo se ve todo esto junto:
1// api.js 2export const fetchUsers = async () => { 3 try { 4 const response = await fetch('https://example.com/users'); 5 if (!response.ok) throw new Error('Network error'); 6 return await response.json(); 7 } catch (error) { 8 console.error('Failed to fetch users:', error); 9 return []; 10 } 11}; 12 13// app.js 14import { fetchUsers } from './api.js'; 15 16const getActiveUsers = async () => { 17 const users = await fetchUsers(); 18 const active = users.filter(user => user.active); 19 const names = active.map(user => user.name); 20 21 return names; 22}; 23 24const displayUsers = async () => { 25 const names = await getActiveUsers(); 26 const message = `Active users: ${names.join(', ')}`; 27 console.log(message); 28};
Este código usa async/await, arrow functions, destructuring implícito en los callbacks de map/filter, template literals, y módulos ES6. Y lo mejor es que es fácil de leer y entender.
JavaScript ha evolucionado muchísimo. Las características modernas no son solo "syntax sugar" - realmente hacen que el código sea más mantenible, más fácil de razonar, y menos propenso a bugs. No necesitas aprender todo de una vez. Empieza usando const/let en lugar de var, funciones flecha, y template literals. Luego agrega destructuring y los métodos de arrays. Async/await vendrá naturalmente cuando necesites manejar operaciones asincrónicas.
Lo importante es escribir código, cometer errores, y aprender de ellos. JavaScript moderno es mucho más amigable de lo que era hace unos años.