5 cosas de Javascript ES6 que todo desarrollador web debe saber

ES6 (ECMA Script 6) o ECMA 2015 es la última versión de Javascript, la cual tiene funcionalidades muy interesantes que te pueden convertir en un mejor Desarrollador Web.
Los frameworks de JS más populares como ReactJS, Angular 2 o el nuevo VueJS ya están utilizando muchas de las nuevas funcionalidades así que te recomiendo que empieces a aprender (o sigas aprendiendo) ES6 lo más posible para mejorar en tu carrera como desarrollador web.
Actualmente no todos los navegadores soportan ES6 de forma nativa, por lo tanto lo que necesitas es un «transpiler» que compile tu código ES6 a código javascript ES5 para que pueda ser interpretado por todos los navegadores. Al día de hoy, el transpiler más popular se llama Babel.
Ahora si, las funcionalidades que debes saber del nuevo Javascript:
1. Las funciones arrow (flecha)
Las funciones arrow nos facilitarán el trabajo a la hora de utilizar funciones anónimas.
Por si no lo sabes las funciones anónimas son aquellas que pasamos por parámetro a otras funciones, por ejemplo forEach, map o el callback cuando escuchamos un evento.
Este nuevo tipo de funciones nos dan una sintaxis mucho más limpia que en ES5, ve los ejemplos de aquí abajo para ver una comparación entre ES5 y ES6:
1 2 3 4 5 6 7 | var arreglo = [1, 2, 3, 4]; // un simple 'map' con ES5 var duplicados = arr.map(function (a) { return 2 * a }); // ahora un map con ES6 var duplicados = arr.map(a => 2 * a); |
Como puedes ver el código es mucho más limpio, ya que no tenemos que escribir las palabras function y return, sino que tan solo introducimos una flecha ‘=>’ después de los parámetros.
Un concepto que debemos tener presente al utilizar estas funciones es que la palabra this no recibe un valor automáticamente como cuando usamos function, sino que this se referirá al contexto (o scope) actual.
2. Variables locales a un bloque con let
ES6 nos presenta la nueva palabra reservada let, la cual nos permite declarar variables locales a un bloque, como puede ser un if o una expresión, por ejemplo:
1 2 3 4 5 6 7 8 | var x = 2, y = 3; if (x > 1 && y > 1) { let resultado = x * y // la variable 'resultado' es local a este bloque 'if' console.log(resultado) // mostrará 6 } console.log(resultado) // mostrará error: 'is not defined' |
La gran diferencia con var, es que var es local solo a la función en la que fue declarada, mientras que let puede ser local no solo a una función, pero también a un bloque como el que vimos en el ejemplo anterior.
3. Constantes con const
Si, ahora javascript pasa a soportar constantes o variables inmutables, o sea que no podremos re-asignarle nuevo contenido. Como convención universal, las constantes las declaramos con mayúsculas y separando palabras con guión bajo como en el siguiente código JS:
1 2 3 4 5 | const MI_CONSTANTE = 1 console.log(MI_CONSTANTE) // 1 // recuerda que no podemos reasignarle un valor MI_CONSTANTE = 2 // esto nos dará un error en consola |
Algo importante a tener en cuenta, es que si le asignamos un objeto a una constante, éste no será totalmente inmutable ya que le podremos cambiar los valores de sus propiedades y métodos. Lo mismo sucederá con un array, al que le podremos ‘mutar’ el valor de cada uno de sus elementos.
4. Parámetros por defecto para nuestras funciones
Si, si vienes de otro lenguaje posiblemente extrañes tener valores por defecto para los parámetros de una función. Esto es que si no pasamos ningún parámetro al ejecutar una función, ésta tomará los valores por defecto… ¿interesante no?
Las buenas noticias es que ya puedes usar de esta característica en ES6, definir valores por defecto es muy fácil, mira el siguiente ejemplo:
1 2 3 4 5 6 7 8 9 | function multiplica(x = 2, y = 3) { return x * y; } // Ejecución sin pasar parámetros console.log( multiplica() ); // 6 // Ejecución con parámetros console.log( multiplica(4, 5) ); // 20 |
5. El operador spread
Una funcionalidad nueva de ECMA Script 6 es el operador spread, según mucha gente es «de lo mejor de ES6». Su sintáxis es muy simple y te puede llegar a ahorrar mucho código. Con solo tres puntos «…» puedes hacer cosas como las siguientes:
Convertir arreglos en parámetros
En ES5, para convertir un arreglo en los parámetros de una función debíamos usar la función apply, ahora en ES6 simplemente usas el operador spread.
1 2 3 4 5 6 7 8 9 | // Por ejemplo para pasarle un array entero al método 'max' de Math // Con ES5 var max = Math.max.apply(Math, [1, 4, 29, 7]) console.log(max) // 29 // Con el nuevo js var max = Math.max(...[1, 4, 29, 7]) console.log(max) // 29 |
Concatenar arreglos
El operador se convierte en una alternativa muy fácil al método concat.
1 2 3 4 | const arreglo1 = [1, 2]; const arreglo2 = [3, 4, 5]; console.log([ ...arreglo1, ...arreglo2, ...[6, 7] ]); // [1, 2, 3, 4, 5, 6, 7] |
ES6 en tu carrera como Desarrollador Frontend
Esta nueva versión de Javascript simplifica muchísimo la forma en que escribimos nuestros sitios web y aplicaciones, por eso las empresas más importantes del mercado están utilizando ES6. Según las búsquedas de Google, el interés en ‘es6’ ha crecido continuamente a partir de 2014:
¿Quieres poder postularte a mejores ofertas laborales como Desarrollador Frontend? Que no te quepa duda que ES6 es lo que tienes que estar aprendiendo cuanto antes… incluso antes que algunos de los nuevos frameworks JS.
Normalmente me gusta recomendar algún curso que tenga videos ya que en mi opinión es la forma más fácil de aprender código, el que te puedo recomendar en un 100% se llama «ECMAScript 6: Avanza tu conocimiento de JavaScript« dictado por Fernando Herrera, probablemente uno de los mejores profesores de programación de Udemy. El curso es muy barato, con descuento queda en solo $15 (normalmente está a $40!!).
Lo mejor para aprender este tipo de cursos es que practiques lo que vayas entendiendo, por ejemplo, luego de cada video, intenta hacer con código lo que se dictó en el mismo, y prueba distintas variantes.
Por cierto, no olvides comentar tus opiniones y también suscribirte a nuestra newsletter… dentro de poco habrán novedades interesantes ;).
¿Quieres saber más?
¡La mejor información en tu correo!
(proximamente importantes novedades)
Muchas gracias, de corazón
Muy interesante, gracias por compartir!!