Y luego de un tiempo de no escribir nada por acá, quiero retomar con una pequeña serie de post para contar de forma rápida algunas de las nuevas características que tenemos disponibles en ECMAScript6 (bueno, en realidad es ECMA-262), la nueva versión del estandar sobre el cual está basado JavaScript.


ECMAScript6 ofrece un conjunto de nuevas características a JavaScript que permite tener un lenguaje más robusto subsanando algunas "deficiencias" o mejor faltantes del lenguaje.

En esta serie estaremos hablando de algunas de esas características de una forma poco técnica (para eso podemos leer el estandár) y me enfocaré en explicar la característica y claro, el código que se debe usar.

En este post veremos:

  • Interpolación de cadenas
  • Parámetros opcionales y valores por defecto en funciones
  • Palabras clave let y const
  • Funciones como expresiones

Interpolación de cadenas

Tradicionalmente, para concatenar cadenas de texto se utilizaba el operador +, es decir, anteriormente era necesario hacer lo siguiente:


var name = "Julio";
var lastName = "Avellaneda";
console.log("Bienvenido " + name + " " + lastName);

ECMAScript6 hace uso del símbolo `, $ y de las llaves {} para permitir la interpolación de cadenas, aplicando dicho cambio se obtiene un código más límpio:


var name = "Julio";
var lastName = "Avellaneda";
console.log(`Bienvenido ${name} ${lastName}`);

Parámetros opcionales y valores por defecto en funciones

En relación al uso de funciones encontramos dos cambios interesantes que son: la posibilidad de asignar valores por defectos a parámetros y por ende dicho parámetro puede ser opcional. En la siguiente porción de código la función Sum espera recibir dos números para ser sumados, sin embargo los dos parámetros tiene un valor por defecto por lo tanto son opcionales:


function sum(num1 = 0, num2 = 0){
  console.log(num1 + num2);
}

sum(); //imprime 0
sum(10, 10); //imprime 20

Adicionalmente, el valor por defecto para los parámetros puede obtenerse llamando a otra función:


function returnDefaultValue(){
  return 5;
}

function sum(num1 = returnDefaultValue(), num2 = returnDefaultValue()){
  console.log(num1 + num2);
}

sum(); //imprime 10
sum(10, 10); //imprime 20


Palabras clave let y const

Tradicionalmente, la palabra clave que se ha utilizado para declarar variables es var, y en dicha variable es posible almacenar lo que se quiera (un string, un número, una funcióin, un objecto...) e igualmente es posible durante la ejecución de la aplicación modificar tanto el valor como el tipo de dato de la variable, lo cual puede suponer un riesgo.

Por lo anterior, en ECMAScript6 disponibles de dos nuevas palabras clave, la primera de ellas es const pensada para declarar constantes y let diseñada para permitir que las variables tengan un scope más pequeño, por ejemplo a nivel de bloque (si, recuerden que var tiene scope a nivel de función y/o global y no de bloque).

Para usar const:


//Declaración de la constante
const serviceUrl = "http://domain.com/api";
console.log(serviceUrl);
//No es posible cambiar el valor por ser una constante
serviceUrl = "new value";
console.log(serviceUrl);

La siguiente imagen permite ver el error que se obtiene al ejecutar el bloque de código anterior:

gg

Conversando por twitter con @eiximenis y con @panicoenlaxbox es importante tener presente que const no significa inmutabilidad, esto se puede ver con el siguiente código de @panicoenlaxbox:


const me = { name: "Sergio" };
console.log(me.name); //imprime Sergio
me.name="panicoenlaxbox";
console.log(me.name); //imprime panicoenlaxbox

Y para mostrar el caso del uso de let:


(function doSomething(){
  for (let i = 1; i <= 5; i++){
    console.log(i);
  }
  console.log(i);
})()

En el ejemplo anterior, la variable de "control" del ciclo for se declara utilizando let, en este caso i solo existe en dicho for, si ejecutamos el código anterior:

error let

Funciones como expresiones

Otros cambios interesantes acerca de las funciones es la posibilidad de definirlas como expresiones, y si vienes de un lenguaje como C# te van a ir muy bien :).

  • Expresión de una sola línea:

let sum = (num1, num2) => num1 + num2;
console.log(sum(10,10)); //imprime 20

  • Expresión multilíena:

let sum = (num1, num2) => {
    //do something
    return num1 + num2;
}
console.log(sum(10,10)); //imprime 20

  • Expresión con 1 solo parámetro:

let sum = num1 => {
    //do something
    return num1*num1;
}
console.log(sum(2)); //imprime 4


Y por supuesto que ponemos unir estas expresiones con los valores por defecto en parámetros:


let sum = (num1 = 0, num2 = 0) => {
    //do something
    return num1 + num2;
}
console.log(sum(10,10)); //imprime 20
console.log(sum()); //imprime 0

Y por el momento es todo, en el siguiente post vamos a vecr otras de las novedades.

Y no te olvides de compartir el post!