Eventos importantes
Marc Andreessen: le dio vida a una gran empresa Netscape. Creo un navegador que podías acceder a internet (HTML simple, enlaces, algunas fotografías)
Debido a la popularidad de Netscape, Microsoft en 1995 lanzó Internet Explorer. Debido a esta guerra nacieron tecnologías como CSS (propuesta de Microsoft para hacer temas a nivel de interfaz), conceptos como la empresa Mozilla y JavaScript.
En el año 1995, dentro de Netscape gracias a Brendan Eich nació el lenguaje Javascript. En sus inicio fue llamado Mocha, para después cambiar su nombre por LiveScript y finalmente termino siendo JavaScript por la popularidad del lenguaje Java.
Debito a esto, Microsoft lazó su propio lenguaje para su navegador, JScript. Así es como nacé, ECMAScript (1997). ECMAScript es un consorcio Europeo que permitió generar un estándar para que los navegadores lo siguieran.
TC39: Es un grupo de hackers, académicos y personas afines a la tecnología que se encargan, junto con la comunidad, de traer nuevas funcionalidades al lenguaje, bajo el mando de ECMA.
ESNext es el nombre que se le asigna a la próxima versión de JavaScript. Cada feature o propuesta debe de pasar los siguientes stages:
Nuevas palabras reservadas para guardar variables. Antes solo existía var.
Let permite la reasignación de valores de una variable. Con const el valor no puede ser reasignado. Ambas tienen un scope de bloque.
Es una alternativa compacta para declarar una function. Su sintaxis es la siguiente:
const miFuncion = (params) => {
// code
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Con la llegada de ES6 los string recibieron una de las features más importantes, los template literals. Es una manera diferente de poder tener texto en multilinea, interpolación de variables.
Antes:
let hello = "Hello"let world = "World"let frase = hello + " " * world;
console.log(frase);
Después:
let hello = "Hello"let world = "World"let templateLiterals = `${hello}${word}!`;
console.log(templateLiterals);
Antes:
let lorem = "Esto es una linea de texto \n" + "Esta es otra línea";
console.log(lorem);
Después:
let lorem = `Esta es una línea de texto
y esta es otra línea.`;
console.log(lorem);
Template literals (Template strings) - JavaScript | MDN
Los parámetros por defecto nos ayudan a definir un valor inicial a las variables que son recibidas en la función. Esto permite que se tenga la seguridad que nuestra variable tendrá un valor.
Antes:
functioncreateNewUser(name, age, country) {
let name = name || "Zajith";
let age = age || 27;
let country = contry || "MX";
console.log(name, age, country;
}
newUser(); // "Zajith 27 MX".
newUser("Jesus", 27, "USA"); // "Jesus 27 USA"Después:
functioncreateNewUser(name = "Zajith", age = 27, country = "MX") {
console.log(name, age, country;
}
newUser(); // "Zajith 27 MX".
newUser("Jesus", 27, "USA"); // "Jesus 27 USA"Default parameters - JavaScript | MDN
La desestructuración permite obtener valores de los objetos o arreglos, sin tener que acceder directamente a su propiedad o indice, en caso de los array.
const person = {
name: 'Zajith',
age: 27,
languages: ["Spanish", "English"]
}
const { name, languages } = person;
console.log(name) // Zajithconsole.log(languages) // ["Spanish", "English"]const [primerIdioma, segundoIdioma] = languages;
console.log(primerIdioma) // Spanishconsole.log(segundoIdioma) // EnglishEn la desestructuración de los arreglos, si no se quiere acceder a un indice anterior se tiene que respetar el orden y únicamente separar por comas:
const person = {
name: 'Zajith',
age: 27,
languages: ["Spanish", "English"]
}
const { name, languages } = person;
const [, segundoIdioma] = languages;
console.log(segundoIdioma) // EnglishDestructuring assignment - JavaScript | MDN
El spred operator u operador de propagación, permite expandir un elemento iterable dentro de los parámetros de un función o dentro de otro objeto, esto con la finalidad de evitar la repetición. Tiene el mismo comportamiento en los objetos y arreglos.
let person = { name: 'Zajith', age: 27 }
let country = 'MX';
let data = {...person, country};
console.log(data); // { name: 'Zajith', age: 27, country: 'MX'}Así mismo, permite combinar o hacer un copia de un objeto
let person = { name: 'Zajith', age: 27 }
let moreData = { country: 'MX' };
let data = {...person, ...moreData};
console.log(data); // { name: 'Zajith', age: 27, country: 'MX'}const person2 = {...person}
console.log(person2) // { name: 'Zajith', age: 27 }Spread syntax (…) - JavaScript | MDN
Cuando en una función no tenemos el conocimiento de cuantos parámetros van a ser pasados a la función, se puede hacer el uso de rest parameters. De esta manera, únicamente el valor que es definido explicitamente será asignado, todos los demás serán encapsulados dentro del rest parameters.
functionsum(num, ...values){
console.log(values);
console.log(num + values[0]);
return num + values[0];
}
sum(2,3,4,5);
Permite realizar la asignación de las keys de un objeto sin repetir. Si la key de nuestro objeto, es igual a variable únicamente basta con pasar la variable.
Antes:
functioncreateNewUser(user, age, country) {
return {
user: user,
age: age,
country: country
}
}
Después:
functioncreateNewUser(user, age, country) {
return {
user,
age,
country
}
}
Las promesas es un código que será ejecutado, pero su resultado puede llegar en el futuro cercano, lejano o nunca. Todo dependerá del servicio. La función que se le pasa al objeto Promise, recibe dos valores resolve y reject. Resolve, es un callback que se ejecutará en caso de que el resultado sea el correcto, en caso de que ocurra un error o se ejecutará el callback reject.
const myPromise = () => {
returnnewPromise((resolve, reject) => {
if (false) {
resolve("hey!!");
} else {
reject ( "whooooops!");
}
})
}
myPromise()
.then(response => console.log(response))
.catch(err => console.log(err));
Las clases nos permiten dividir y encapsular cierto funcionamiento. Las clases están presentes en muchos lenguajes de programación, pero no fue hasta ES6 que javascript las incorporó.
classPerson{
constructor(name, age) {
this.name = name;
this.age = age;
}
getInfo() {
console.log(`My name is ${this.name}. I'm ${this.age} years old`);
}
}
classStudentextendsPerson{
constructor(name, age) {
super(name,age); // <-
}
}
const person = new Person('Zajith', 27);
person.getInfo(); // My name is Zajith. I'm 27 years oldLos módulos nos permiten poder dividir nuestro código en diferentes archivos, lo cual nos brinda la libertad de reutilizar el funcionamiento de ciertas piezas de código a través de todo nuestro proyecto.
Se puede realizar la exportación de funciones, variables, objetos, clases y más. Para realizar la exportación tenemos que hacer uso de la palabra reservada export. Si queremos importar tenemos que hacer uso de la palabra import.
Existen dos tipos de exportación:
La exportación nombrada nos permite realizar multiples exportaciones dentro de un mismo archivo. Debido a que se hacen multiples export en el mismo archivo, en la importación se tiene que ser muy cuidadoso con los nombres ya que tienen que ser lo mismos.
// utils.jsexportconst sayHello = () => console.log('Hello');
exportconst sayBye = () => console.log('Bye!');
// main.jsimport { sayHello, sayBye } from'./utils';
La exportación por defecto, solo nos permite hace una exportación por defecto por archivo.
// utils.jsconst sayHello = () => console.log('Hello');
exportdefault sayHello;
// main.jsimport sayHello from'./utils';
Se pueden combinar ambas exportaciones
// utils.jsconst sayHello = () => console.log('Hello');
const sayBye = () => console.log('Bye!');
export { sayBye, sayHello asdefault };
// main.jsimport sayHello, { sayBye } from'./utils';
Los generadores nos permiten crear una función iterable que recuerda su ejecución y su estado interno para próximas ejecuciones. Con la palabra reservada yield se puede pausar una función generadora y mostrar el valor que le sigue a yield, y así proporcionar una opción ligera para iterar valores.
function* iterate(array) {
for (let value of array) {
yield value;
}
}
const it = iterate(["Oscar", "Alexa", "David", "Gerlis"]);
console.log(it.next().value); // Oscarconsole.log(it.next().value); // Alexaconsole.log(it.next().value); // DavidUn Set es una lista desordenada que no permite tener valores repetidos dentro.
const set = newSet();
set.add('item 1'); // Set ['item 1']
set.add('item 2').add('item 3'); // Set ['item 1','item 2','item 3']
set.has('item 2'); // true
set.delete('item 1'); // Set ['item 2','item 3', 1]
set.size(); // 2Tiene los métodos:
Se introdujo una alternativa a Math.pow para poder realizar operaciones más claras:
const square = 4 ** 2// 16Exponentiation (**) - JavaScript | MDN
Nos permite determinar si un elemento se encuentra dentro un array.
let numbers = [1, 3, 4, 6, 7, 8];
console.log(numbers.includes(9)) // falseconsole.log(numbers.includes(1)) // trueconst list = ["oscar", "David", "Ana"]
console.log(list.includes("oscar")) // trueconsole.log(list.includes("Pedro")) // falseArray.prototype.includes() - JavaScript | MDN
<h1>✨ ¿Qué se implementó en ES8?</h1>Es un función que no permite transformar un objeto en un array con cada una de las propiedades en un array de la forma [key, value]
const countries = { MX: "Mexico", CO: "Colombia", CL: "Chile", PE: "Peru"}
console.log(Object.entries(countries));
/*[
['MX', 'Mexico'],
['CO', 'Colombia'],
['CL', 'Chile'],
['PE', 'Peru']
]*/Object.entries() - JavaScript | MDN
Es una función que nos permite transformar un objeto en un array de los valores de cada una de las propiedades de nuestro objeto
const countries = { MX: "Mexico", CO: "Colombia", CL: "Chile", PE: "Peru"}
console.log(Object.values(countries)); // ['Mexico', 'Colombia', 'Chile', 'Peu']Object.values() - JavaScript | MDN
Es un método que permite rellenar la cadena actual con una cadena dada. El relleno es aplicado desde el inicio de la cadena actual.
str.padStart(targetLength [, padString])
targetLength → Es la longitud de la cadena resultante una vez que haya sido rellenada. Si este parámetro es más pequeño que la longitud de la cadena actual, la cadena se mantendrá igual.
padString → Valor opcional. La cadena para rellenar la cadena actual. Si esta cadena es muy larga, será recortada y la parte más a la izquierda será aplicada
'abc'.padStart(10); // " abc"'abc'.padStart(10, "foo"); // "foofoofabc"'abc'.padStart(6,"123465"); // "123abc"String.prototype.padStart() - JavaScript | MDN
Es la capacidad de agregar nuevos elementos a un objeto o array. Se puede agregar una nueva propiedad o elemento sin modificar el anterior.
const arr = [1, 2, 3,,,];
arr.length; // 5const object = {
foo: "bar",
baz: "qwerty",
age: 42,
};
Trailing commas - JavaScript | MDN
Las funciones asíncronas permitieron al lenguaje ejecutar código el cual es necesario obtener el resultado previo. Además, viene a solucionar el callback hell
const fnAsync = () => {
returnnewPromise( (resolve, reject ) => {
(true)
? setTimeout(() => resolve ("Async!!"), 2000)
: reject(newError("Error"));
});
}
const anotherFn = async () => {
const somethig = await fnAsync();
console.log(somethig);
console.log("Hello");
}
console.log("before");
anotherFn();
console.log("After");
async function - JavaScript | MDN
<h1>✨ ¿Qué se implementó en ES9?</h1>En esta versión de ECMA se incorporó la posibilidad de usar grupos nombrados usando una expresión regular. Un match de una expresión regular retorna un objeto. Si un fragmento de la expresión regular esta dentro de los paréntesis, es capturado por el grupo y es almacenado en el grupo en el cual hizo el match.
const eventDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const matchedObject = eventDate.exec('2019-04-03');
console.log(matchedObject[1]); // 2019console.log(matchedObject[2]); // 04console.log(matchedObject[3]); // 23Después de esta nueva versión, podemos nombrar grupos usando la sintaxis <groupname>, que almacena dentro de la key groups
const eventDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;
const matchedObject = eventDate.exec('2019-04-03');
console.log(matchedObject.groups.year); // Prints 2019console.log(matchedObject.groups.month); // Prints 04console.log(matchedObject.groups.day); // Prints 03El spread operator llega para los objetos, permitiendo hacer uso de el.
const foo = {
empanadas: 6,
milanesas: 2,
yerba: "1 Kg",
};
const bar = { ...foo, water: "1 L" };
console.log(bar); // Prints /**
* {
* empanadas: 6,
* milanesas: 2,
* yerba: "1 Kg",
* water: "1 L",
**/Si tenemos una key con el mismo nombre, el valor será el último agregado. Esto servirá para sustituir valores por default.
const foo = {
empanadas: 6,
milanesas: 2,
yerba: "1 Kg",
};
const bar = { ...foo, empanadas: 12 };console.log(bar); // Prints/**
* {
* empanadas: 12,
* milanesas: 2,
* yerba: "1 Kg",
**/El operador de propagación sirve para crear una copia en un solo nivel de profundidad, esto quiere decir que si existen objetos o arrays dentro de un objeto a copiar. Entonces los sub-elementos en cada nivel, tendrán la misma referencia en la copia y en el original.
const original = { datos: [1, [2, 3], 4, 5] }
const copia = { ...original }
original === copia // false
original["datos"] === copia["datos"] // trueES9 introduce un nuevo callback que siempre es ejecutado en las promesas. No importando el resultado, si fue resolved o rejected.
fetch(url)
.then()
.catch()
.finally(() => console.log(`I'm always called!`));
Es útil cuando quieres hacer un borrado o limpieza de operaciones sin importar si el resultado fue éxitoso o no.
Promise.prototype.finally() - JavaScript | MDN
En esta nueva versión se incluye la posibilidad de usar ciclos de forma asíncrona, esto permitiendo ejecutar código que no bloque el hilo principal de nuestra aplicación.
asyncfunctionarrayOfNames(array) {
forawait (let value of array) {
console.log(value);
}
}
const names =arrayOfNames(["Alexa", "Oscar", "David"]);
console.log("After");
// Afer// Alexa// Oscar// DavidEl método flat de los array permite aplanar los elementos internos de un array permitiendo eliminar array internos.
const numbers = [1, 2, 3, 4, [5, 6, [7, 8, 9]]];
numbers.flat(1) // [ 1, 2, 3, 4, 5, 6, [ 7, 8, 9 ] ]
numbers.flat(2) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]Si se quiere aplanar todo el arreglo sin pasar una profundidad exacta, se puede hacer uso de Infinity.
const numbers = [1, 2, 3, 4, [5, 6, [7, 8, 9]]];
numbers.flat(Infinity) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]Array.prototype.flat() - JavaScript | MDN
Permite aplanar los elementos de un array en un nivel, pasando un función que mapeara cada elemento del nuevo array.
const numbers2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers2.flatMap(num => num * 2). // [ 2, 4, 6, 8, 10, 12, 14, 16, 18 ]Este método no se podría utilizar para array que tengan más de un nivel de profundidad. Sin embargo, se pueden combinar los métodos flat y map para tener un mismo resultado.
const numbers = [1, 2, 3, 4, [5, 6, [7, 8, 9]]];
numbers2.flat(Infinity).map(num => num * 2) // [ 2, 4, 6, 8, 10, 12, 14, 16, 18 ]Array.prototype.flatMap() - JavaScript | MDN
Permiten eliminar los espacios en blanco, ya sea de el inicio o del final respectivamente.
trimStart() → Elimina los espacio al iniciotrimEnd() → Elimina los espacios al finalconst hello = ' Hello! ';
console.log(hello.trimStart()); // 'Hello! ';console.log(hello.trimEnd()); // ' Hello!';String.prototype.trimStart() - JavaScript | MDN
String.prototype.trimEnd() - JavaScript | MDN
Nos permite realizar el manejo de errores de una forma diferente.
try {
// Lógica
} catch (error) {
// Manejo de errores
}
Permite hacer la transformación de un array a un objeto:
const entries = [
["name", "Zajith"],
["age", 27],
];
console.log(entries); // [ [ 'name', 'Zajith' ], [ 'age', 27 ] ]console.log(Object.fromEntries(entries)); // { name: 'Zajith', age: 27 }Object.fromEntries() - JavaScript | MDN
<h1>✨ ¿Qué se implementó en ES11?</h1>Es una forma de evitar errores solicitando propiedades de forma opcional utilizando el símbolo ? , sirve cuando no estamos seguros de que los valores estén completos.
Este operador es igual que . , excepto que en vez de causar un error si una referencia es nullish(null or undefined), la expresión retorna un valor undefined.
const users = {
zajith : {
country: 'MX'
},
brenda: {
country:'MX'
}
}
console.log(users?.zajith?.country);
Optional chaining (?.) - JavaScript | MDN
JavaScript tiene límites numéricos, un máximo Number.MAX_SAFE_INTEGER y un mínimo Number.MIN_SAFE_INTEGER. Fuera de estos límites, los cálculos matemáticos pueden fallar y mostrar resultados erróneos. Con BigInt esto se resuelve.
const aBigNumber = 8907245920742093847n;
const anotherBigNumber = BigInt(8907245920742093847);
console.log(aBigNumber); // 8907245920742093847nconsole.log(anotherBigNumber); // 8907245920742093847nEs un operador lógico ?? que retorna el valor que se encuentra del lado derecho, cuando el valor que se encuentra del lado izquierdo es null o undefined.
const anotherNumber = null;
const myNumber = 10;
const validate = anotherNumber ?? 5;
const validate2 = myNumber ?? 1;
console.log(validate); // 5console.log(validate2); // 10Nullish coalescing operator (??) - JavaScript | MDN
Este método retorna una promesa después de que todas las promesas dadas fueron completadas resueltas exitosamente o no, con un array de objetos que describe cada una de llamadas.
Este método es típicamente usado cuando se tienen multiples llamadas asíncronas que no son dependientes una de la otra, o te gustaría saber el resultado de cada una.
const promise1 = Promise.resolve(3);
const promise2 = newPromise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
Promise.allSettled(promises).
then((results) => results.forEach((result) => console.log(result.status)));
// expected output:// "fulfilled"// "rejected"Promise.allSettled() - JavaScript | MDN
La propiedad globalThis provee de una manera estándar de accesar al objeto global this a través de los distintos entornos. A diferencia de las propiedades window y self , esta garantizado su funcionamiento en window y no-window contextos.
El método matchAll() nos retorna un iterado con todos los resultados que hacen match de una expresión regular con un string, incluyendo los grupos de captura.
const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';
const array = [...str.matchAll(regexp)];
console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]String.prototype.matchAll() - JavaScript | MDN
Es una función que permite la carga de módulo asíncronamente cuando nosotros deseemos que sean cargados.
// module.jsexportfunctionhello() {
console.log('Hello');
}
// main.jsconst button = document.getElementById("btn");
button.addEventListener("click", asyncfunction () {
const { hello } = awaitimport("./module.js");
hello();
})
Nos permite separar los números con _ con la finalidad que la lectura del número sea más fácil y clara.
const number = 1_000_000_000
console.log(number) // 1000000000Retorna un nuevo string con todas las coincidencias de una patrón remplazado por la propiedad replacement
const string = "JavaScript es un maravilloso lenguaje de programacion";
const replacedString = string.replace("JavaScript", "TypeScript");
console.log(replacedString); // TypeScript es un maravillo lenguaje de programación.String.prototype.replaceAll() - JavaScript | MDN
Recibe un array de Promises y retorna un único valor de la promesa que se complete exitosamente, sin importar que una de sus predecesoras se complete con error. Si ninguna de las promesas retorna exitosamente un valor, es rechazada con un error AggregateError.
const promise1 = Promise.reject(0);
const promise2 = newPromise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = newPromise((resolve) => setTimeout(resolve, 500, 'slow'));
const promises = [promise1, promise2, promise3];
Promise.any(promises).then((value) => console.log(value));
// expected output: "quick"Promise.any() - JavaScript | MDN
Los métodos privados nos permiten tener métodos que no es necesario exponerlos al crear una instancia de nuestra clase. Esto viene a sustituir la convención de _ en los métodos.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
#getInfo() {
console.log(`My name is ${this.name}. I'm ${this.age} years old`);
}
}
const zajith = new Person('Zajith', 27);
zajith.getInfo() // TypeError: zajith.getInfo is not a function
Working with private class features - JavaScript | MDN
<h1>✨ ¿Qué se implementó en ES13?</h1>El método at() recibe un valor numérico entero y devuelve el elemento en esa posición, permitiendo valores positivos y negativos. Los valores negativos contarán desde el último elemento del array.
const array = ["one", "two", "three", "four", "five", "six"];
console.log(array[array.length - 1]);
console.log(array.at(-1));
Array.prototype.at() - JavaScript | MDN
El top level await no permite usar las ventajas de async ... await sin tener que envolver nuestra lógica dentro de una función.
// utilsconst response = await fetch("https://api.escuelajs.co/api/v1/products");
const products = await response.json();
export { products };
// mainimport { products } from"./products.js";
console.log(products);
console.log("Hey!!");
Muchas gracias por el aporte, estuve viendo el curso en tablet y no tenia donde escribir el codigo asi que me vino perfecto.
De lo mejor que he visto en mucho tiempo, gracias