Cómo usar ES6 para ser un mejor desarrollador de Javascript

Juan Correa
6 min readMar 2, 2019

--

Actualmente conocer ES6 como programador te da las ventajas de escribir código más limpio y óptimo, además de estar actualizado en el mundo de Javascript 💪

Contenidos:

  • Declaración de variables.
  • Declaración de funciones.
  • Parámetros por defecto.
  • Rest parameter.
  • Spread operator.
  • Template string.
  • Propiedades de un objeto.
  • Bonus.

Declaración de variables

Normalmente declaramos las variables con la palabra clave var, pero ahora con ES6 puedes declarar constantes con la palabra clave const y variables con let.

const PI = 3.1416console.log(PI) // 3.1416// Error 
// (no puedes cambiar el valor de una constante durante ejecución)
PI = 1
// Sin embargo, sí que puedes modificar las propiedades de una
// constante cuando es un objeto o un array
const person = {}
// ok
person.name = ‘John’
person.last = Doe
// no ok
person = []
// Con arrays
const friends = []
// ok
friends[0] = 'Johana'
friends[1] = 'Kate'
// no ok
friends = {}

Ahora sobre declarar variables con let, lo que nos permite es crear variables

let value = 1
console.log(value) // 1
value = 2
console.log(value) // 2

¿Qué diferencias hay entre usar var y let? Las diferencias es en el scope. El scope es el contexto en que existe una variable.

Podemos decir que let existe dentro del bloque de código donde se declara mientras que var existe fuera del bloque de código. Un bloque de código es todo aquello que esté entre llaves: un if, un bucle, una función, etc.

✅ Usa siempre let y const para definir tus variables. Esto te ayuda a evitar bugs al sobre escribir variables que no deberían cambiar

Declaración de funciones

Esta es una de las funcionalidades que más me gustan de ES6. Ahora existen las arrow function que consiste en definir funciones de este modo

const normalHelloWorld = function () {  
console.log('normal function hello world')
}
const arrowHelloWorld = () => {
console.log('arrow function hello world')
}
// Cuando la función consiste en una sola instrucción, puedes obviar // las llaves del bloque
const arrowCleanerHelloWorld = () => console.log('cleaner hello world')
// Cuando es un sólo parámetro, puedes obviar los paréntesis
const arrowCleanerWithParamHelloWorld = str => console.log(str)
normalHelloWorld()
arrowHelloWorld()
arrowCleanerHelloWorld()
arrowCleanerWithParamHelloWorld('hello!')

Como puedes notar, tiene sus ventajas en cuanto legibilidad del código.

Hay otras diferencias con las arrow functions que es importante que sepas. Una arrow function cuando es sólo una instrucción de código como arrowCleanerHelloWorld por default hará un return. Por ejemplo considera este código:

const getFive = () => 5let number = getFive()console.log(number) // 5// Equivalente a
var getSix = function () {
return 6
}

Otra diferencia muy importante es el contexto de la variable this. Si eres desarrollador de Javascript, deberías saber de la variable this.

¿Qué es la variable this?

En un contexto global, esto es, en el scope global, la variable this hace referencia al objeto global.

En el navegador la variable this en contexto global hace referencia al objeto window.

Tiene otros valores dependiendo de dónde y cómo es llamada. Hay mucho que hablar de la variable this, pero ese no es el propósito de este post.

Si no conoces la variable this, por el momento ten en mente que hace referencia al objeto padre de acuerdo al contexto de dónde se usa.

¿Qué relación tiene la variable this con las arrow function?

El valor de this con las arrow function hace referencia al valor de this del contexto superior de donde fue llamada.

Considera este ejemplo en el contexto de un objeto:

const hello = {  
sayHelloInit: function () {
setTimeout(function () {
this.sayHello()
}, 1000)
},
sayHello: function () {
console.log(holi)
}}
// TypeError: this.sayHello is not a function
hello.sayHelloInit()

Una manera de resolverse es con arrow function para proveer de contexto a la variable this:

const hello = {
sayHelloInit: function () {
setTimeout(() => this.sayHello(), 1000)
},
sayHello: function () {
console.log('Hola lector del blog :)')
}}
hello.sayHelloInit()

Así que ten en cuenta este comportamiento cuando uses arrow functions 😜

✅ Usa arrow functions para reducir código
✅ Usa arrow functions para controlar el valor de la variable
this

Parámetros por defecto

Esta es una funcionalidad que es implementada en la mayoría de los lenguajes de programación modernos.

Consiste en asignar un valor por defecto a los parámetros de una función. Veamos un ejemplo en código, como nos gusta:

function sum (x = 1, y = 1) {  
return x + y
}
sum() // 2// Antes de esta implementación era algo comofunction mult (x, y) {
// o usar if u operadores ternarios
x = x || 1
y = y || 1
return x * y
}

Vaya característica que nos hacia falta! 💁 💁‍♂

Rest parameter

Esto consiste en agregación de los parámetros restantes en un solo parámetro de una función. Whaat? 👀

A groso modo, lo anterior significa que puedes asignar a una sola variable todos los valores de los diferentes parámetros que estés pasando a una función. Mejor veamos un ejemplo 😆

function sum (a = 1, b = 1, ...x) {  
let sum = a + b
// x es un array con el resto de parámetros
console.log(x)
// recorres el array, en este caso con un for porque sí
for (let i = 0; i < x.length; i++) {
sum += x[i]
}
return sum
}
sum(1, 2, 3, 4, 5) // 15sum() // 2

✅ Es muy útil cuando cuando necesitas tratar con parámetros pero no sabes cómo se llaman o cuántos son los que recibirás.

Spread operator

Esta funcionalidad permite transmitir elementos a una colección iterable (array, objeto por ejemplo) como un solo parámetro.

Esto en castellano significa que puedes indicar que se pasen todos los valores de un array u objeto a otra variable o función.

const letters = ['a', 'b', 'c']
const otherLetters = ['d', 'e', 'f']
const finalLetters = [...letters, ...otherLetters]
// Antes con ES5
var numbers = [1, 2, 3]
var otherNumbers = [4, 5, 6]
var finalNumbers = numbers.concat(otherNumbers)

También puedes usarlo para clonar objetos o arrays:

// ES6
const person = { name: 'john', age: 20 }
const otherPerson = { ...person, name: 'Carl' }
console.log(person)
console.log(otherPerson)
// ES5
const food = { name: 'Pizza', value: 20 }
const otherFood = Object.assign({}, food, { name: 'Hamburger' })
console.log(food)
console.log(otherFood)

Esto requiere un poco más de explicación. Lo que estamos haciendo es definir un objeto person con las propiedades name y age.

Después creamos un nuevo objeto otherPerson que es igual a un objeto y como propiedades vamos a pasar todas las que posea person, es decir, name y age, y después vamos a re asignar la propiedad name por ‘Carl’

En la parte de ES5 estamos haciendo lo equivalente pero con esa sintaxis, o sea, con Object.assign. Los ejemplos de ES6 y ES5 son equivalentes.

✅ Usa spread operator para mezclar arrays u objetos.
✅ Usa spread operator para clonar arrays u objetos.

Otras notas:

🔎 En React es muy utilizado este feature al pasar props entre componentes sin necesidad de ir uno a uno o saber cuáles son.
🔎 En
Redux es muy utilizado para actualizar el store dentro de los reducers.

Template strings

Esta funcionalidad sirve para poder concatenar cadenas y variables una manera mas legible en vez de usar el operador ‘+’.

let str1 = 'Hello dev'
let str2 = 'i am happy to see you here'
let str3 = 'keep learning'
let str4 = 'thanks for read this blog'
let finalStr = `${str1}, nice to see you, ${str2}, ${str3} ${str4}, you can add more characters :D`
console.log(finalStr)// Antes
let finalStr2 = str1 + ' nice to see you, ' + str2 + ', ' + str3 + + str4 + ', you can add more characters :D'
console.log(finalStr2)

Para usarlo hay que encerrar la cadena en comillas invertidas (`) y colocar las variables entre signo de peso y llaves: ${myVar}

✅ Usa template string para concatenar variables cada que puedas.

Propiedades de un objeto

Esto se refiere a la manera de declarar propiedades de un objeto donde el nombre de la propiedad es igual al valor. Por ejemplo:

let name = 'John Doe'
let age = 18
let person = {
name,
age,
// También las propiedades que son funciones
isAdult () {
return this.age >= 18
}
}
console.log(person)
console.log(person.isAdult())
// Antes
var otherPerson = {
name: name,
age: age,
isAdult: function () {
return this.age >= 18
}
}
console.log(otherPerson)
console.log(otherPerson.isAdult())

✅ Trata de reducir tu código al definir propiedades de un objeto cuando la propiedad y el valor se llaman igual.

🔔 Bonus: ¿Te gustaría dar un paso al siguiente nivel en React JS?

He publicado este ebook en el que te ayudo a dar el siguiente paso en tu carrera con conocimientos de React JS avanzados, dale un ojo!

👉👉👉 Da click aquí para ver el ebook.

ES6 vino para facilitarnos la vida. Dentro de lo posible trata de usar estas nuevas funcionalidades en tu código para tenerlo más actualizado y limpio 🤓

Si te sirvió este post, comparte 👏!

¿Conoces otras maneras de aplicar ES6 para facilitar el código? ¿Alguna observación?👁 Compártela en los comentarios 👇

¿Te ha gustado el contenido? te invito a darle clap 👏 y compartirlo! 😃

Puedes subscribirte a mi canal de YouTube y al blog de developero para más contenidos de este tipo ⚡️🤘

--

--

Juan Correa

Full Stack JS Engineer — Developero founder — Software Development Ebooks author. https://developero.io