Default Params y Concatenación

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.