Novedades de Javascript ES6

Las novedades de Javascript ES6 se han diseñado para facilitar la codificación y hacerla más eficiente, con muchas funciones nuevas que los desarrolladores encontrarán útiles en sus proyectos.

Te mostraré cada una de las características que trae la última actualización de Javacript.

Declaración de variables con let y const

Para declarar variables se utiliza la palabra reservada var.

Con la llegada de ES6, las nuevas palabras reservadas let y const resuelven varios problemas con var como el scope, hoisting, variables globales, re-declaración y re-asignación de variables.

La diferencia entre cada declaración es:

• Con var puede ser re-declarada y re-asignada.
• Con let puede ser re-asignada, pero no re-declarada.
• Con const no puede ser re-declarada, ni re-asignada. Su declaración y asignación debe ser en una línea, caso contrario habrá un error.

var nameVar = "Soy una var"
let nameLet = "Soy una let"
const nameConst = "Soy una const"

console.log(nameVar); // Soy una var
console.log(nameLet); // Soy una let
console.log(nameConst); // Soy una const

Arrow Functions

Una de las novedades más notables de Javascript ES6 es la introducción de las funciones de flecha. Las arrow functions es una manera declarar una función de forma breve y compacta, lo que permite a los desarrolladores escribir código de forma más rápida y sencilla.

Se denominan función flecha por el elemento => en su sintaxis.

const pokemons = [
  { name: "Piplup", tipo: "agua" },
  { name: "Pikachu", tipo: "electrico" },
];

//Funcion tradicional
pokemons.forEach(function (pokemon) {
  console.log(pokemon.name);
});

//Arrow Function
pokemons.forEach((pokemon) => {
  console.log(pokemon.name)
});

En las arrow functions incluso puedes omitr los paréntesis.

pokemons.forEach(pokemon => console.log(pokemon.name));

A parte de omitir los paréntesis, puedes aplicar el retorno implícito.

//Funcion tradicional
const pokemonNames = pokemons.map(function(pokemon) {
	return pokemon.name
});
console.log(pokemonNames);

//Arrow Function
const pokemonNames2 = pokemons.map(pokemon => pokemon.name);
console.log(pokemonNames2);

Ojo: Si el retorno requiere más lineas o deseas utilizarlo de manera implícita, debes envolver la función en parentesis {}.

Incluso las arrow function se pueden guardar en variables.

// Forma tradicional
const sumFive = function (number) {
  return number + 5;
}
console.log(sumFive(10)) // 15

// ES6
const showMessage = () => console.log("Saludos, Pokemon Trainer");
showMessage() // Saludos, Pokemon Trainer

Esto ayuda a que el código sea limpio y legible, a diferencia del modo tradicional.

Parámetros en Objetos

Los Parámetros en Objetos (Object Literals) te ayuda a crear objetos a partir de variables sin repetir el nombre.

// Sin Parámetros en Objetos
const nombre = "Sprigatito"
const lvl = 23

const pokemon = {
  nombre: nombre, 
  lvl: lvl
}
console.log(pokemon);

//Parametros en Objetos
pokemon2 = { nombre, lvl };
console.log(pokemon2);

El resultado es el mismo, solo que no repite palabras. Puedes combinarlo con variables que tiene un nombre diferente en su propiedad.

const nombre = "Sprigatito"
const lvl = 23
const elID = 906

const pokemon = {
    nombre, 
    lvl,
    id: elID
}

console.log(pokemon);

Promesas

Es una forma de manejar el asincronismo en Javascript utilizando el objeto promise, para ser ejecutadas.

Las promesas tienen un único valor generado e indican que algo sucederá ahora, en el futuro o nunca.

En Promise(), recibe una función como valor. En esa función, recibirá dos parámetros: Resolve y Reject.

La función de la promesa es resolver una acción y lo rejecta en caso de no cumplirla.

//Promesas
const helloPromise = () => {
  return new Promise((resolve, reject) => {
    if (true) {
      resolve("Hey!");
    } else {
      reject("Ups!");
    }
  });
};

helloPromise()
  .then((response) => console.log(response))
  .then(() => console.log("Holaaa"))
  .catch((error) => console.log(error));

Ojo: Cuidado con el valor de Promise(). Si lo escribes asi: promise(), no se ejecutará.

Módulos

Con los módulos en javascript te permite manejar código en archivos de manera modular, involucrando la exportación de funciones o variables en un archivo, o importarlas en un archivo donde se necesite.

Anteriormente, para importar un módulo tenias que utilizar require y para exportarlo module.export.

// File: index.js
// Forma tradicional
const library = require('./functions.js');
library.hello();

// ES6
import { hello } from "./functions.js";
hello();

// File: functions.js
function hello() {
  console.log("Hello");
};

function bye() {
  console.log("Bye bye, baby");
};

// Forma tradicional
module.export = {
  hello,
  bye
}

// ES6
export default {
  hello,
  bye
};

Puedes profundizar más acerca de los módulos con este post.

Generadores

Los generadores son funciones especiales que pueden detener el proceso y continuar donde lo dejó, recordando, recordando su scope y seguir retornando valores.

Son útiles para guardar la totalidad de datos infinitos, a través de una función matemática a valores futuros.

Un generador crea menos espacio de memoria que un array u objeto.

Para utilizar los generadores toma en cuenta:

• La palabra reservada function* (con el asterisco al final).
• La palabra reservada yield que hace referencia al valor retornado cada vez que se invoque, recordando el valor anterior.
• Crear una variable a partir de la función generadora.
• El método next devuelve un objeto que contiene una propiedad value con cada valor de yield; y otra propiedad done con el valor true o false si el generador ha terminado.

function* myGenerator(){
    yield 'Paradise';
    yield 'city';
}

const generatorHello = myGenerator();

console.log(generatorHello.next()); // {value: 'Paradise', done: false}

console.log(generatorHello.next()); // {value: 'city', done: false}

console.log(generatorHello.next()); // {value: undefined, done: true}

Default params

Los default params le permiten establecer valores predeterminados para los parámetros de una función.

// Funciones sin parámetros por defecto
function callPokemon(name, lvl, region) {
  var name = name || "Eevee";
  var lvl = lvl || 5;
  var region = country || "Jotho";
  console.log(name, lvl, region);
}
callPokemon();

// Funciones con parámetros por defecto
function callPokemon2(name = "Eevee", lvl = 5, region = "Johto") {
  console.log(name, age, region);
}
callPokemon2("Mew", 50, "Kanto");

Siempre se colocan al final si solo se va a definir el valor de un parámetro.

// ❌
function callPokemon2(name = "Eevee", lvl, region) {
  console.log(name, age, region);
}
callPokemon2("Mew", 50, "Kanto");

// ✅
function callPokemon2(lvl, region, name = "Eevee") {
  console.log(name, age, region);
}
callPokemon2("Mew", 50, "Kanto");

Plantillas Multilinea y Literales

Para concatenar el valor de las variables con los strings, debías usar el signo + para unirlo. Una de las novedades de javascript llegó para cambiar forma de unir strings: Las plantillas literales y multilinea.

Plantillas Literales

Las plantillas literales te permiten colocar variables dentro de cadena de caracteres sin necesidad de usar la concatenación. Esto ayuda a la legibilidad y mantenimiento del código.

Para utilizar las plantillas literales se utiliza la siguiente sintaxis: ${variable}. El mensaje debe ser envuelto con acento grave («`) y no confundirlo con comillas simple (‘).

const name = "Pikachu";
const type = "Electrico";
const lvl = 23;

// Con contatenación
const pokemon = "El pokemon " + name + " es de tipo " + type + ". Su nivel es: " + lvl;
console.log(pokemon);

// Plantillas literales
const pokemon2 = `El pokemon ${name} es de tipo ${type}. Su nivel es: ${lvl}`;
console.log(pokemon2);

Plantillas multilineas

Las plantillas multilineas te permite crear saltos de lineas en un string, sin el uso del caracter salto de linea (\\n).

const name = "Pikachu";
const lvl = 23;

// Concatenación con salto de linea
const pokemon = "Es un " + name + ".\\nSu nivel es " + lvl;
console.log(pokemon);

// Plantillas multilinea
const pokemon2 = `Es un ${name}.
Su nivel es ${lvl}`;
console.log(pokemon2);

Destructuración

En un post anterior escribí todo lo que puedes hacer con la destructuración en javascript. Este se encarga trata de extraer los valores de un array o las propiedades de un objeto en distintas variables.

Destructuración de objeto

//Destructuracion
const person = {
  name: "Luis",
  age: 22,
  country: "Vzl",
};
console.log(person.name, person.age, person.country);

//es6
const { name, age, country } = person;
console.log(name, age, country);

Destructuración de arrays

Puedes extraer los valores de un array en variables utilizando la misma posición del array. La sintaxis es similar a la destructuración de objetos.

const gatos = [ "Michi", "Michigun", "Michil", "Michael"];
const [michi, michigun, michil, michael] = gatos;

console.log(michi, michigun, michil, michael);

Spread operator

De todas las novedades de javascript esta es mi favorita. El Operador de propagación (spread operator) se encarga de propagar los elementos de un iterable (array o string) utilizando tres puntos (…) dentro un array.

const team1 = ["oscar", "julian", "ricardo"];
const team2 = ["valeria", "yesica", "camila"];

//Spread Operator
const eduaction = ["David", ...team1, ...team2];

console.log(eduaction);

Set-add

Finalmente, Set es una nueva estructura de datos para almacenar elementos únicos, es decir, elementos sin repetir.

Para iniciar un Set, se debe crear una instancia de su clase a partir de un iterable, comúnmente un array.

const set = new Set(iterable)

Aquí podrás ver cómo obtener un array sin elementos repetidos:

const array = [1, 1, 2, 2, 3, 4, 4, 5]

// 1. Convierte el Array a Set
const set = newSet(array) // Set(5) {1, 2, 3, 4, 5}

// 2. Transforma de Set a Array
const arraySinRep = Array.from(set) // [1, 2, 3, 4, 5]

// 3. Propaga los elementos del Array a otro Array
const sinRepetidos = [ ...arraySinRep] // [1, 2, 3, 4, 5]

O puedes hacer lo mismo de manera corta:

const array = [1, 1, 2, 2, 3, 4, 4, 5]

const uniqueElements = [ ... newSet(array)]
console.log(uniqueElements) // [ 1, 2, 3, 4, 5 ]

Conclusión

Las nuevas funciones de Javascript ES6 incluye una serie de cambios en el lenguaje que facilitan su uso. La sintaxis se ha simplificado y mejorado, lo que facilita la lectura y comprensión del código.

Quiero saber tu opinión en los comentarios y cuál de estás novedades de javascript ES6 te llamó más la atención.

No olvides compartir y seguirme en mis redes sociales para más contenido.

---

👨‍💻 Frontend Developer | 🌱 Personal Growth | 💙 Tech Lover | 🔥 Hacking your limits

Sigueme en mis redes sociales para más contenido

• Facebook
• Twitter
• Instagram
• LinkedIn
• GitHub
• Telegram

---