Preparar un entorno de trabajo sólido y comprender las primeras características de ECMAScript 6 es el paso fundamental para escribir JavaScript moderno. Aquí se explica cómo configurar un proyecto desde cero y cómo aprovechar dos funcionalidades que simplifican la escritura de código: los parámetros por defecto y los template literals.
¿Cómo preparar el entorno de trabajo para ECMAScript 6?
Antes de escribir una sola línea de código, conviene inicializar el proyecto correctamente desde la terminal [0:10]:
- Crear la carpeta del proyecto con
mkdir ecmascript.
- Ingresar a la carpeta y ejecutar
git init como buena práctica de control de versiones.
- Ejecutar
npm init para generar el archivo package.json con la configuración inicial.
Dentro del editor —en este caso Visual Studio Code— se crea la estructura de carpetas src/es6/ y dentro de ella un archivo index.js, que será el punto de entrada para experimentar con las nuevas características [1:30].
Para ejecutar bloques de código directamente desde el editor se recomienda instalar la extensión Code Runner. Este plugin permite seleccionar fragmentos específicos de código y correrlos sin salir del editor, lo que agiliza mucho el proceso de aprendizaje [5:00].
¿Qué son los parámetros por defecto en funciones?
Los parámetros por defecto (default params) permiten asignar valores iniciales a los argumentos de una función directamente en su declaración [2:15].
¿Cómo se hacía antes de ES6?
Antes de ECMAScript 6, la técnica consistía en usar el operador lógico || dentro del cuerpo de la función:
javascript
function newFunction(name, age, country) {
var name = name || 'Oscar';
var age = age || 32;
var country = country || 'MX';
console.log(name, age, country);
}
Este patrón funcionaba, pero resultaba repetitivo y propenso a errores cuando el valor legítimo era falsy (por ejemplo, 0 o una cadena vacía).
¿Cómo se resuelve con ES6?
Con la nueva sintaxis se asignan los valores directamente en la firma de la función [3:20]:
javascript
function newFunction2(name = 'Oscar', age = 32, country = 'MX') {
console.log(name, age, country);
}
- Si se llama
newFunction2() sin argumentos, se usan los valores por defecto: Oscar, 32, MX.
- Si se pasan valores —por ejemplo
newFunction2('Ricardo', 23, 'CO')— estos reemplazan a los predeterminados.
El resultado es un código más limpio, legible y menos propenso a errores.
¿Cómo funcionan los template literals en JavaScript?
Los template literals resuelven el problema de la concatenación de cadenas de texto, que antes requería el operador + de forma repetida y poco intuitiva [6:20].
¿Cuál era el método tradicional de concatenar strings?
javascript
var hello = 'Hello';
var world = 'World';
var epicPhrase = hello + ' ' + world;
console.log(epicPhrase); // Hello World
Cuando se encadenaban múltiples variables, la lectura del código se volvía confusa.
¿Qué ventaja ofrecen las comillas francesas?
Los template literals utilizan las comillas francesas (`) y la sintaxis ${} para insertar variables directamente dentro de la cadena [7:05]:
javascript
var epicPhrase2 = ${hello} ${world};
console.log(epicPhrase2); // Hello World
- Se pueden incluir tantas variables o expresiones como se necesiten dentro de
${}.
- El código queda más legible y fácil de mantener.
- Es importante localizar las comillas francesas en tu teclado, ya que su posición varía según la distribución de idioma.
Estas dos características —parámetros por defecto y template literals— son apenas el inicio de lo que ECMAScript 6 trajo al lenguaje. Si ya las estás probando en tu editor, comparte en los comentarios qué otras funcionalidades te gustaría dominar.
