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
varpuede ser re-declarada y re-asignada. - Con
letpuede ser re-asignada, pero no re-declarada. - Con
constno 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 constArrow 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 TrainerEsto 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
yieldque 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
nextdevuelve un objeto que contiene una propiedadvaluecon cada valor deyield; y otra propiedaddonecon el valortrueofalsesi 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.
Sigueme en mis redes sociales para más contenido