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;

//es6
let 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);

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

• Spread operator

//es6
let 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 scope
console.log(globalVar, globalLet);// var error
const 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);
});

//es6
let 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.js
const hello = ()=>{
	return'Holaaa';
}

exportdefault hello;
//index.js
import { 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: Hola
console.log(generatorHello.next().value); //Returns: Mundo
console.log(generatorHello.next().value); //Returns: Undefinied

• Includes

//es7
let 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 too
console.log(texto.includes('o'));//Returns: true

• Elevaciones a la potencia

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

• Entries

//es8
const 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

//es8
const string = "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 = () => {
    return new Promise((resolve, reject) => {
        true ? setTimeout(() => resolve('hello world'), 2000)
            : reject(new Error('noOooOO'));
    })
}

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

• Spread Operator

//es9
const 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})/;
const match = regexData.exec('2020-04-20');
const year = match[1];
const month = match[2];
const day = 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

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

• array to object

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

• Symbol description

//es10
let mySymbol = `my symbol`;

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