ECMAScript es el estándar que define cómo debe de ser el lenguaje Javascript. Incluyó bastante novedades y actualizaciones respecto a sus versiones anteriores. En cada sección se ilustrará como se realizaba antes del ES6 y como se debe de realizar con el estandar actual.
<h3>Parámetros por defecto</h3>Los parámetros por defecto (default params) son aquellos valores que se le envian a una función en caso de que al ser invocada no se le especifique algún parámetro.
→ Antes ES6
functionnewFunction(name, age, country) {
var name = name || 'Alex';
var age = age || 26;
var country = country || 'MX'console.log(name, age, country);
}
→ ES6
functionnewFunction2(name = 'Alex', age = 26, country = 'MX') {
console.log(name, age, country);
}
Como podemos ver el código se vuelve más simple y limpio.
<h3>Template literals</h3>Los template literals fueron introducidos también dentro del ES6 y es una forma más intuitiva de concatenar valores.
→ Antes ES6
let hello = "Hello";
let world = "World";
let epicPhrase = hello + ' ' + world + '!';
→ ES6
let epicPhrase2 = `${hello}${world}!`;
La multilinea es una caracteristica introducida en el ES como parte de las facilidades que traen los template literals.
→ Antes ES6
let lorem = 'Lorem ipsum dolor sit amet. \n' + 'Praesentium, nesciunt!';
→ ES6
let lorem2 = `Lorem ipsum dolor sit amet.
Praesentium, nesciunt!`La desestructuración de objetos nos permite obtener los valores de los objetos de una forma más sencilla y sin utilizar la notación de punto.
→ Antes ES6
let person = {
'name': 'Alex',
'age': 32,
'country': 'MX'
}
console.log(person.name, person.age, person.country);
→ ES6
let { name, age, country } = person;
console.log(name, age, country);
Este operador, mejor conocido como spread fue introducido en el ES6 como nueva caracteristica. Nos permite ‘expandir’ varios elementos cuando por ejemplo tenemos elementos en arreglos y buscamos unirlos en uno solo.
→ ES6
let team1 = ['Alex', 'Oscar', 'Manuel'];
let team2 = ['Valeria', 'Mariana', 'Camila'];
// ES6let education = ['David', ...team1, ...team2];
console.log(education);
Let y const son dos formas nuevas de declarar variables y constantes, dejando de lado el uso de var. Donde let tiene un scope local y de bloque al igual que const que además actua como constate a la que no se le puede reasignar un valor.
→ ES6
{ var globalVar = "Global Var"; }
{
// ES6let globalLet = 'Global Let';
console.log(globalLet);
}
console.log(globalVar);
// Const, cannot be reassignedconst HELLO = 'Hello World!';
Una de las caracteristicas de los objetos dentro del ES6 es la manera en que se simplifico la asignación de valores.
→ Antes ES6
let name = 'Alex';
let age = 26;
obj = {
name: name,
age: age
};
→ ES6
obj2 = { name, age };
Las funciones de flecha son una forma más elegante de escribir funciones anónimas.
→ Antes ES6
const NAMES = [
{name: 'Alex', age: 26},
{name: 'Matty', age: 24}
]
let listOfNames = NAMES.map(function(item) {
console.log(item.name);
});
→ ES6
let listOfName2 = NAMES.map((item) => {
console.log(item.age);
});
Las promesas fueron introducidas en el ES6 para mejorar el asincronismo en javascript y como una solución al callback hell.
→ ES6
const helloPromise = () => {
returnnewPromise((resolve, reject) => {
if (true) {
resolve('Hey!');
} else {
reject('Ups!!');
}
});
}
helloPromise()
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
})
Las clases vinieron a mejorar la sintaxis de los prototipos y es una forma que implementó javascript para poder manejar la herencia como hacen otros lenguajes.
→ ES6
classcalculator{
constructor() {
this.valueA = 0;
this.valueB = 0;
}
add(valueA, valueB) {
this.valueA = valueA;
this.valueB = valueB;
returnthis.valueA + this.valueB;
}
}
const calc = new calculator();
console.log(calc.add(2,2));;
Los módulos nos permiten segmentar nuestro código en diferentes archivos y poderlos trabajar en conjunto, haciendo la lógica de nuestra aplicación más ordenada.
→ ES6
Archivo [module.js]
const hello = () => {
return'Hello!';
}
exportdefault hello;
Archivo [index.js]
import { hello } from'./module';
console.log(hello());
Los generadores llegaron a complementar a los iteradores ya que permiten definir un algoritmo iterativo al escribir una sola función que puede mantener su propio estado.
function* helloWorld() {
if (true) {
yield'Hello, ';
}
if (true) {
yield'World';
}
};
const generatorHello = helloWorld();
console.log(generatorHello.next().value);
console.log(generatorHello.next().value);
El método includes nos ayuda a determinar si un array incluye un elemento determinado, nos retorna true o false dependiendo si lo encontró o no.
→ ES7
let numbers = [1, 2, 3, 7, 8];
if (numbers.includes(7)) {
console.log('Found Value');
} else {
console.log('Not found');
}
→ ES7
Esta revisión de javascript incluyó un nuevo operador para realizar el cáclulo de una potencia.
let base = 4;
let exponent = 4;
let result = base ** exponent
console.log(result);
Esta caracteristica del ES8 nos permite devolver la clave y valores de un objeto en forma de matríz.
→ ES8
const data = {
frontend: 'Alex',
backend: 'Samuel',
design: 'Mariana'
}
const entries = Object.entries(data);
console.log(entries);
console.log(entries.length);
A diferencia de la anterior, esta característica nos permite los valores del objeto en forma de arreglo.
→ ES8
const data = {
frontend: 'Alex',
backend: 'Samuel',
design: 'Mariana'
}
const values = Object.values(data);
console.log(values);
El paddin en javascript nos permite añadir valores a una cadena de texto, ya sea al inicio al final de esta.
→ ES8
const string = 'Hello';
let maxLength = 8;
let addStart = 'Hi ';
let addEnd = "!!!"console.log(string.padStart(maxLength, addStart));
console.log(string.padEnd(maxLength, addEnd));
El async y await complementan el uso de las promesas.
→ ES8
const helloWorld = () => {
returnnewPromise((resolve, reject) => {
(true)
? setTimeout(() => resolve('Hello World!'), 3000)
: reject(newError('Test error'));
});
};
const helloAsync = async () => {
const hello = await helloWorld();
console.log(hello);
};
Esta característica incluye el correcto manejo de errores en las promesas, que sería haciendo uso del try-catch.
const anotherFunction = async () => {
try {
const hello = await helloWorld();
console.log(hello);
} catch (err) {
console.log(err);
}
}
El operador spread recibió mejoras en el ES9 ahora nos permite utilizarlo dentro de los objetos.
→ ES9
const obj = { name: 'Alex', age: 26, }
const obj1 = {
...obj,
country: 'MX',
}
console.log(obj1);
Se añade una nueva caracteristica a las promesas y es el .finally que se ejecuta cuando la promesa ya acabo su ejecución, sin importar si fue resuelta o no.
→ ES9
// Promise finallyconst helloWorld = () => {
returnnewPromise((resolve, reject) => {
(true)
? resolve('Hello World!')
: reject(newError('Test error'));
});
};
helloWorld()
.then(response => console.log(response))
.catch(error => console.log(error))
.finally(() => console.log('Promise end'));
Los regex nos permiten comprarar si una dato cumple con un patrón, en esta actualización del estándar se incluyó el método .match que nos permite obtener los valores de la cadena separando los elementos.
→ ES9
const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const match = regexData.exec('2020-04-20');
const year = match[1];
const month = match[2];
const day = match[3];
console.log(year, month, day);
Esta característica nos permite volver un arreglo de N dimensiones de una sola.
→ ES10
let array = [1, 2, 3, [1, 2, 3, [1, 2, 3]]];
let depth = 2;
console.log(array.flat(depth));
FlatMap nos permite manipular los datos dentro del arreglo.
→ ES10
let array = [1, 2, 3, 4, 5];
console.log(
array.flatMap( value =>
[value, value * 2]
)
);
El método .trim nos permite remover los espacios en blanco de una cadena de texto, en esta especificación del estandar se añadieron los métodos .trimStart y .trimEnd para manipular especificamente el inicio o fin de una cadena de texto.
→ ES10
// trim startlet hello = ' hello world!';
console.log(hello);
console.log(hello.trimStart());
// trim endlet hello = 'hello world! ';
console.log(hello);
console.log(hello.trimEnd());
Nos permite convertir arrays a un objeto. Es la caracteristica inversa de entries.
→ ES10
let entries = [["name", "Alex"], ["age", 26]];
console.log(Object.fromEntries(entries));
Pueden encontrar también todos los códigos ejemplos y resumen de este curso en el siguiente repositorio. GitHub
