JavaScript

ES6

¿Qué es ES6?

1 - Introducción

ES6 es EcmaScript 6. Este, a su vez, es el estándar en el que se basa JavaScript (y otros lenguajes).
ES6 es una nueva versión de JavaScript que añade un montón de nuevas características.
EcmaScript 6 fue publicado a finales de 2015 y, en este momento, es plentamente funcional y aceptado por todos los navegadores modernos.

Constantes

Las constantes son referencias a valores constantes que se definen una única vez por contexto de ejecución.
Los valores primitivos son inmutables, pero los compuestos pueden ver sus propiedades modificadas.

const nombre = ["Juan"];
console.log(nombre);
nombre = "Andrés";

/*
"TypeError: Assignment to constant variable [...]
*/

2 - Novedades ES6

Variables de ámbito de bloque

Hasta ahora, las variables en JavaScript tenían ámbito de función (declaradas dentro de funciones).
Ahora, se pueden definir en bloques, delimitados por {}, que mantendrán su independencia.
Las variables creadas con let no son alzadas (hoist).

for (let i = 0; i <= 100; i++) {
    console.log(i);
}
console.log(i); // undefined

{
    let nombre = "Juan";
}
console.log(nombre); // undefined

2 - Novedades ES6

Funciones flecha

La nueva sintaxis arrow para definir funciones las hace más ligeras.
Las funciones flecha tienen return implícito.
Las funciones flecha no tienen su propio this, sino que lo heredan de contexto en el que se encuentran.
Además, las funciones flecha no son alzadas (hoist).

function saludar(nombre) {
    alert('Hola ' + nombre);
}

var saludar = nombre => alert('Hola ' + nombre);
saludar("Juan");

var persona = {
    nombre: "Juan",
    saludar: () => alert(this.nombre),
};
persona.saludar(); // undefined

2 - Novedades ES6

Parámetros por defecto

Ahora, las funciones pueden tener parámetros definidos por defecto que serán usados si no se definen en la invocación.
Si se quiere utilizar un valor de parámetro por defecto y además definir otros parámetros, debes usar undefined como comodín.

function comprar(precio, impuesto = .21) {
    return precio + (precio * impuesto);
}

var iphone = comprar(1000); // 1210
var iphone = comprar(1000, .50); // 1500

2 - Novedades ES6

String templating

Con ES6 es posible interpolar variables y expresiones envolviendo con el carácter ` (back-tick).
También, usando el mismo método, podemos crear strings multi línea.

function nombrar(nombre, ciudad) {
  alert(`Te llamas ${nombre} y vives en ${ciudad}`);	
}
nombrar("Juan", "Valencia");

var multiLinea = `Hola 
qué tal`;

JavaScript

ES6

1 - Introducción

2 - Novedades ES6

2 - Novedades ES6

2 - Novedades ES6

2 - Novedades ES6

2 - Novedades ES6

JavaScript ES6

JavaScript ES6

Juan Andrés Núñez

JavaScript

ES6

1 - Introducción

2 - Novedades ES6

2 - Novedades ES6

2 - Novedades ES6

2 - Novedades ES6

2 - Novedades ES6

JavaScript ES6

More from Juan Andrés Núñez