Mis notas - ECMAScript 6+

ECMAScript es la especificación del lenguaje propuesto por ECMA Internacional, una institución encargada de los estandares.

JavaScript es el lenguaje que usa estas especificaciones para trabajar sobre esas características que son lanzadas año con año desde 2015 cuando fue lanzada la versión 6

JavaScript nació por una propuesta de Netscape en 1996

• Valores por defecto en funciones

functionnewFunction(name, age, country) {
    let name = name || 'Otoniel';
    let age = age || 21;
    let country = country || 'SV';
    console.log(name, age, country);
}

//es6
functionnewFunction2(name = 'Otoniel', age = 21, country = "SV") {
    console.log(name, age, country);
}
newFunction2(); //Otoniel 21 SV
newFunction2('Melsar', 20, 'USA');//Melsar 20 USA

• Literal Templates

let hello = "Hello";
let world = "World";
let epicPhrase = hello + ' ' + world;

//es6let epicPhrase2 = `${hello}${world}`console.log(epicPhrase2);//Hello World

• Destructuración de elementos

let person = {
    'name': 'Otoniel',
    'age': 21,
    'country': 'SV'
}
console.log(person.name, person.age);

//es6const { name, age, country } = person;
console.log(name, age, country);//Otoniel 21 SV

• Spread operator

//es6let team1 = ['Otoniel', 'Tavo', 'Roberto'];
let team2 = ['Mario', 'Orlando', 'Yeyzon'];

let education = ['David', ...team1, ...team2];
console.log(education);//['David','Otoniel','Tavo','Roberto','Mario','Orlando','Yeyzon']

• Variables

{ var globalVar = "var" } //Es accesible de manera local
{ let globalLet = "let" } //Es accesible solamente en su scopeconsole.log(globalVar, globalLet);// var errorconst a = 'b';
a = 'a';//error

• Parámetros en objetos

let name = 'Otoniel';
let age = 21;

obj = { name: name, age: age };//es6
obj2 = { name, age };

• Arrow functions

const names = [
    { name: 'Otoniel', age: 21 },
    { name: 'Melsar', age: 22 },
];
let listOfNames = names.map(function (item) {
    console.log('tradicional', item.name);
});

//es6let listOfNames2 = names.map(item => {
    console.log('arrow function', item.name);
});

const listOfNames3 = (name, age, country) => {
    //...
}
const listOfNames4 = name => {
    //...
}

const square = num => num * num;
square(2); // returns 4

• Promises

const helloPromise = () => {
    returnnewPromise((resolve, reject) => {
        if (true) {
            resolve('yeah');
        } else {
            reject('noOOooOo');
        }
    })
}

helloPromise()
    .then(response => console.log(response))
    .then(() =>console.log('jelouda'))
    .catch(error => console.log(error));

• Modules

//module.jsconst hello = ()=>{
	return'Holaaa';
}

exportdefault hello;
//index.jsimport { myHello } from'./module.js';
console.log(myHello());//returns: Holaaa

• Generators

function* helloWorld(){
	if(true){
		yield"Hola ";
	}
	if(true){
		yield"Mundo"	;
	}
}

const generatorHello = helloWorld();

console.log(generatorHello.next().value); //Returns: Holaconsole.log(generatorHello.next().value); //Returns: Mundoconsole.log(generatorHello.next().value); //Returns: Undefinied

• Includes

//es7let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
if (numbers.includes(7)) {
  console.log("yes");
} else {
  console.log("nel");
}

let texto = 'holardo';//works on text tooconsole.log(texto.includes('o'));//Returns: true

• Elevaciones a la potencia

//elevacion
//es7
let base=4;
let exponent =2;
letresult = base ** exponent;//also 4^2
console.log(result); //Returns: 16

• Entries

//es8const data = {
    frontend: "Otoniel",
    backend: "Melsar",
    design: "Andrade",
};

const entries = Object.entries(data);
console.log(entries);
console.log(entries.length); //Como el objeto se convierte en matriz podemos facilmente saber cuantos elementos tiene

• Values

const data = {
    frontend: "Otoniel",
    backend: "Melsar",
    design: "Andrade",
};
const values = Object.values(data);
console.log(values); //[ 'Otoniel', 'Melsar', 'Andrade' ]
console.log(values.length); //de esta forma tambien podemos saber cuantos elementos tiene

• PadStart - PadEnd

//es8conststring = "hello";
console.log(string.padStart(7, "hi"));//Returns: hihello
console.log(string.padEnd(12, "----"));//Returns: hello-------
console.log("food".padEnd(12, "..."));//Returns: food........

• Trailing Comma

const obj = {
    age = 12, //se puede tener una coma al final del ultimo elemento de un objeto y no habrá problema
}

• Async/await

const helloWorld = () => {
    returnnewPromise((resolve, reject) => {
        true ? setTimeout(() => resolve('hello world'), 2000)
            : reject(newError('noOooOO'));
    })
}

const helloAsync = async () => {
    const hello = await helloWorld();
    console.log(hello);
}

• Spread Operator

//es9const obj = {
    name: 'Otoniel',
    age: 21,
    country: 'SV',
}

let { country, ...all } = obj;
console.log(all);//{ name: 'Otoniel', age: 21 }const objA = {
    name: 'Otoniel',
    age: 21,
}

const objB = {
    ...objA,
    country: 'SV',
}

console.log(objB);//{ name: 'Otoniel', age: 21, country: 'SV' }

• finally

//es9
const helloWorld = () => {
    returnnewPromise((resolve, reject) => {
        true ? setTimeout(() => { resolve('hello world') }, 2000)
            : reject(newError('noOOooOo'));
    })
}

helloWorld()
    .then(res => console.log(res))
    .catch(error => console.log(error))
    .finally(() =>console.log('finalizado'));

• Match

const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
constmatch = regexData.exec('2020-04-20');
constyear = match[1];
constmonth = match[2];
constday = match[3];
console.log(year, month, day);//2020 04 20

• flat

//es10
var myArray = [1, 2, 3, [1, 2, 3, [1, 2, 3]]];
console.log(myArray.flat());//[1,2,3,1,2,3,[1,2,3]]

• flatMap

//es10
let array = [1, 2, 3, 4, 5];
console.log(array.flatMap(value => [value, value * 2]));//[1,2,3,4,5,6,7,8,9,10]

• trimStart/trimEnd

//es10
let hello = '              hello world                ';
console.log(hello);
hello = hello.trimStart();//elimina todos los espacios al inicio de la cadena
hello = hello.trimEnd();//elimina todos los espacios al final de la cadena
console.log(hello);

• new try/catch

//es10try { } catch { error }//ya no es necesario definir el error en el catch para poder usarlo

• array to object

//es10let entries = [["name", "Otoniel"], ["age", 21]];
console.log(Object.fromEntries(entries));

• Symbol description

//es10let mySymbol = `my symbol`;

let symbol = Symbol(mySymbol);
console.log(symbol.description);