¿Cuál es la mejor manera de aprender ES2015? Aprendiendo y Estudiando para siempre

Arthur Kay discutió recientemente cuatro maneras fáciles de comenzar a usar ES2015 en su código en un gran artículo. He resumido sus puntos principales aquí:

1. Declarar variables con let y const.

En el código tradicional de ES5, los ingenieros de JavaScript a menudo lamentaban las limitaciones (y, a veces, el comportamiento extraño) de las variables: falta de alcance de bloque y falta de constantes verdaderas. En ES2015, estos dos problemas se han resuelto con la adición de dos nuevas palabras clave: let y const .

Block Scope with let

Declarar variables con le permite limitar el uso (alcance) de esa variable al bloque, la declaración o la expresión en la que se usa.

// en ES5
var a = 1;
si es verdad) {
var b = 2;
}

console.log (a); // 1
console.log (b); // 2

// en ES2015
deja a = 1;
si es verdad) {
sea b = 2;
}

console.log (a); // 1
console.log (b); // ReferenceError: b no está definido

Crear constantes con const

ES2015 nos permite declarar variables verdaderamente constantes utilizando la nueva palabra clave const :

// en ES5
var MY_CONSTANT = true;
MY_CONSTANT = falso;
// el valor puede ser reasignado, no es realmente una “constante”

// en ES2015
const MY_CONSTANT = true;
MY_CONSTANT = falso;
// TypeError no detectado: Asignación a variable constante

2. Literales de plantillas

Con ES2015, ya no necesitamos confiar en las funciones de formato de cadenas de terceros debido a los nuevos literales de plantilla:

// en ES2015
let url = `http: //www.$ {domain} .com / $ {path}? $ {queryParams}`;

3. Nuevas primitivas: conjunto y mapa

ES2015 introdujo un puñado de nuevas primitivas para JavaScript.

Usando Set en lugar de Array

En JavaScript, necesitamos lógica condicional para agregar elementos a nuestra colección:

// en ES5
función addToCollection (colección, valor) {
if (collection.indexOf (valor) <0) {
collection.push (valor)
}
}

ES2015 proporciona un nuevo conjunto primitivo llamado para ayudarnos a manejar estas situaciones con mayor facilidad:

// en ES2015
let collection = new Set ();
collection.add (1);
collection.add (2);
collection.add (1);
console.log (colección); // Establecer {1, 2}

Como puede ver, nuestra colección no contiene una entrada duplicada para el número 1. La nueva primitiva Set también nos brinda una variedad de nuevos métodos para iterar y manipular los valores dentro de la colección.

Usando Mapa en lugar de Objeto

De manera similar, los desarrolladores de JavaScript están familiarizados con el uso de Objetos genéricos para almacenar datos arbitrarios:

// en ES5
cosa var = {};
thing.a = ‘abc’;
thing.b = ‘xyz’;

Con ES2015, tenemos acceso a una nueva primitiva: el mapa. Un Mapa es simplemente un contenedor para pares clave / valor que resuelve o elimina algunos problemas comunes para los desarrolladores.

// en ES2015
let thing = new Map ();
thing.set (‘a’, ‘abc’);
thing.set (‘b’, ‘xyz’);

No querrá usar Mapas en lugar de Objetos en todas partes, pero hacen que la iteración sobre colecciones de clave / valor sea mucho más fácil.

// en ES2015
let collection = new Map ();
//… agrega algunos pares clave / valor con collection.set ()

collection.forEach (función (valor, clave) {
// ¡ya no necesita usar la comprobación hasOwnProperty ()!
});

// ¿Cuántos elementos hay en el mapa?
console.log (collection.size); // ¡Es fácil de descubrir!

4. Parámetros de función

Con ES2015, trabajar con funciones y sus parámetros es más fácil que nunca. Específicamente, hay dos características nuevas que puede comenzar a usar con una curva de aprendizaje mínima.

Valores predeterminados

En el código ES5 tradicional, si queríamos un comportamiento predeterminado, teníamos que probar explícitamente la presencia de ese valor y, opcionalmente, asignar un valor predeterminado.

// en la función ES5 doSomething (someObject) {if (someObject === undefined) {someObject = {}; } console.log (someObject); }

Ese enfoque ciertamente no es horrible, pero hay dos problemas obvios:

Si olvidamos probar contra indefinido, existe una alta probabilidad de errores de tiempo de ejecución.
Como se muestra, este patrón agrega tres líneas de código para cada parámetro que acepta la función: un código que honestamente no agrega mucho valor y distrae el propósito real de la función.

ES2015 nos permite asignar valores predeterminados de manera declarativa con facilidad:

// en ES2015
función doSomething (someObject = {}) {
console.log (someObject);
}

Destrucción de objetos

En muchos casos, una función puede esperar un parámetro como un objeto con propiedades clave / valor específicas. Esta es generalmente una buena práctica para que la función evite la fragilidad de numerosos argumentos, pero también puede crear código excesivamente detallado y repetitivo cuando se intenta acceder a las propiedades del objeto.

// en ES5
función doSomething (someObject) {
console.log (someObject.propOne);
console.log (someObject.propTwo);
console.log (someObject.propThree);
}

Con ES2015, podemos destruir el parámetro objeto para proporcionar un acceso limpio a sus propiedades:

// en ES2015
función doSomething ({propOne, propTwo, propThree}) {
console.log (propOne);
console.log (propTwo);
console.log (propThree);
}

Conclusión

ES2015 incluye lo primero de lo que probablemente serán muchas adiciones y mejoras a JavaScript en los próximos años. Aunque algunas de estas características nuevas parecen extrañas y atemorizantes, la realidad es que son opcionales: ninguno de nuestros patrones de código probados y confiables nos son quitados. Todo su código existente seguirá funcionando, pero las cuatro características de ES2015 presentadas en este artículo son formas realmente simples en las que puede comenzar a beneficiarse de inmediato.

Artículo original: 4 maneras fáciles de comenzar a usar ES2015 desde Codementor