htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

5 cosas de Javascript ES6 que todo desarrollador web debe saber

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 ;).

Comparte conocimiento:
Share on twitter
Twitter
Share on linkedin
Linkedin
0Share on facebook
Facebook
0Share on google
Google
Please Add coin wallet address in plugin settings panel
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

2 comentarios para “5 cosas de Javascript ES6 que todo desarrollador web debe saber”

  1. Waxlor dice:
    enero 25, 2017 a las 1:49 pm

    Muchas gracias, de corazón

  2. Dafne dice:
    enero 31, 2017 a las 9:41 pm

    Muy interesante, gracias por compartir!!

Dejar un comentario

¿Quieres saber más?

 

¡La mejor información en tu correo!

(proximamente importantes novedades)