Mis apuntes del curso de ecmaScript 6+

//default params :
// Antes los default params de los paramatros de una función se devian colocar en las propia variables
//Con es6 los default params se colocan en los propios parametros

//es5

function newFunction(name,age,country){
    var name = name || "luis";
    var age = age || 20;
    var country = country || "ar";
    console.log(name,age,country);
}

//es6

function newFunction2(name = "luis",age = 20, country = "ARG"){
    console.log(age,name,country);
}

newFunction2();

newFunction2("andres",25,"COL");

//concatenación:
//La concatenar se hace o se hacia con un + para juntar dos tipos de valores distintos, esto a la larga era muy muy poco intuitivo
// con es6 la concatenación es un poco mas entendible ya que los distintos tipos de valores se encuentran en las mismas comillas.Se cambian las "" por ``
// A la hora de concanetar un string con otro tipo de valor se encierra el valor: `string ${otro_tipo_de_valor}`; 

const hello = "hello";
const world = "world";

//javascript
var epicPharase = hello + " " + world;
console.log(epicPharase);
//es6
let epicPharase2 = `${hello} ${world}`;
console.log(epicPharase2);



// multilinea :
//antes de es6 para hacer un salto de linea en un string se colocaba \n 
//Con es6 los saltos de linea simplemente se realizan saltando a la siguente linea


// javascript
var lorem = "mi nombre es Luis Gomez \n tengo 19 años";

// es6
let lorem2 = `mi nombre es luis gomez
tengo 19 años`;

console.log(lorem);
console.log(lorem2);

// desestructuración de elementos
// desestructuración de elementos es una expresión de es6 que permite desempacar valores de arreglos o propiedades de objetos en distintas variables.(permite unir valores de una forma mas amiglables)

let person = {
    name : "luis",
    age : 20,
    country : "ARG"
};

{
    // javascript

console.log(person.name, person.age);

// es6

let { name, age } = person;
console.log(name,age);

let team1 = ["ricardo","jualian","fernando"];
let team2 = ["luis","yesica","camila","david"];

let education = ["andres",...team1,...team2];

console.log(education);
}
// let y const:
//con let y const a diferencia var que tiene un function scope el scope de estos sera definido por el bloque en el que estos fueron declarados 
//Otra de las diferencia es con su valor por defecto.Cuando var es elevado por el hoistin su valor de undefined mientras que let y const tienen un valor de no inicializados.Esto ocurre porque cuando son elevadas por el hoistin,estas son almacenadas en la llamada "temporal dead zone" hasta que se le asigne un valor 

//javascript

{
var function_scope = "global var";
}

// es6
{
let block_scope1 = "global let";
console.log(block_scope1);
}

{
const block_scope2 = "global const";
console.log(block_scope2);
}


console.log(function_scope);

// parametros en objetos 
//Consiste en que cuando hay variables ya existentes que se quieren tomar como atributos de un objeto, es6 ofrese una manera mas amigable se asignar los atributos 

// javascript

const name = "luis";
const age = 20;

let object1 = {name : name, age:age};
console.log(object1);

// es6

let object2 = {name,age};
console.log(object2);

// arrow function =>:

const names = [
    {name:"luis" ,age:19},
    {name:"andres",age:25}
];

let list_name =names.map(item => console.log(item.name));

// arrow function con parametro
const contador = numMax =>{
    for(let i = 0; i <= numMax;i++){
        console.log(i);
    }
} 
contador(5);

// arrow function sin parametro
const saludar = () => console.log("hola mundo");


//promesas:(algo va a pasar)
// Son resultados que estara disponibles en un tiempo indeterminado
//las operaciones de las promesas son ejecutadas en el background o segundo plano 

const helloPromise = () =>{
    return new Promise((resolve,reject)=>{
        if(true){
            resolve(true);
        }else{
            reject(false);
        }
    })
}

helloPromise()
.then(responsive => console.log(responsive))
.catch(error=>consoloe.error(error))

// modulos
// E la caracteristica agregada por es6 que permite dividir el proyecto en diferentes ficheros o modulos
// Esto permite la modularidad en el proyecyo haciendo que sea mas mantenible a largo plazo

import {hello} from "./module";

hello();

// generadores
// Los generadores son funciones que retornan una serie de valores segun el tipo de algoritmo definido 
// Tienenla particularidad de que se pausar y renuda por cada iteración, permitiendo un mayor control sobre las iteraciones de la misma

function* helloWorld(){
    if(true){
        yield "hello";
    }
    if(true){
        yield "world";
    }
};
const isworld = helloWorld();
console.log(isworld.next().value);
console.log(isworld.next().value);
console.log(isworld.next().value);


//ecmaScript  7 //


// metodo includes
// El metodo includes determina si un array contiene determinado elemento,retornando un valor boleano

const array = [,123,65,0,321,5];

const arrayIncludes = array.includes(0);


console.log(arrayIncludes);

if(array.includes(20)){
    console.log("si se encuentra el valor");
}else{
    console.log("no se encontro el valor");
}

// elevación de potencia
// Es la nueva forma de repesentar una potenciación
// con doble asterisco => base ** exponente

const base = 4;
const exponente = 3;
let result = base ** exponente;
console.log(result);

// ecmaScript 8//

// Object.entries()
// Este metodo estatico del super prototipo object nos permite devolver las llaves y valores de las propiedades de un objeto en un array =>
// [["key",value],["key",value],["key",value]]

const luis = {
    name : "luis",
    age: 19,
    country : "ARG"
};

const luisArray = Object.entries(luis);

console.log(luisArray);
// luisArray = [ [ 'name', 'luis' ], [ 'age', 19 ], [ 'country', 'ARG' ] ]


// Object.values():
// // Este metodo estatico del super prototipo object retorna un array con los valores de las propiedades del objeto que le pasemos como parametro =>
// [value,value,value];

const oscar = {
    name : "Oscar Barajas Tavares",
    age : 35,
    country: "COL"
};

const oscarValues = Object.values(oscar);

console.log(oscarValues);
//  [ 'Oscar Barajas Tavares', 35, 'COL' ]


// Padding:
//  nos permite añadir cadenas vacías a string, pudiendo modificar la cadena string como tal.
//Podría servir del lado del front , para mostrar una estructura de elementos.

const string ='hello';
console.log(string.padStart(7,'hi '));
console.log(string.padEnd(12,'hi'));

// async await
// 

const helloWorld = () =>{
    return new promise((resolve,reject)=>{
        (true)
        ? setTimeout(()=>resolve("hello world"),3000)
        : reject(new error("test error"));
    })
}


// async
// Nos sirve para marcar como asincrona y su valor de retorno es una promesa.

// await 
// Solo es aplicable a las funciones marcadas con asyc
// Pone en espera la ejecución de la función mientras la promesa se resuelve, abriendo paso a la ejecución de otras funciones.

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

helloAsyc();

// ecmaScript 9// 

// Operador de reposo:
// Consiste en extraer los valores de los atributos de un objeto que aun no se a construido

const obj = {
    nam: 'Oscar',
    age: 32,
    country: 'MX'
};

let {country,...all} = obj;
console.log(all);


// propiedades de propagación
// consiste en la posivilidad de la union de dos o mas objetos con el operador de (...)

const obj1 = {
    name : `luis`,
    age: 20,
}

const obj2 = {
    ...obj1,
    country : `ARG`,
};

console.log(obj2);



// promise.finaly
// Consite en ejecutar una logica de codigo cuando finalice de ejecutarce la promesa


const helloWorld = () =>{
    return new Promise((resolve,reject)=>{
        (true)
        ? resolve('helloWorld')
        : reject(new Error ('Test Error'))
    });
}

helloWorld()
    .then(response => console.log(response))
    .catch(error=>console.log(error))
    .finally(()=>console.log('finalizo'))


// ecmaScript 10//

// flat()
// Este metodo nos permite aplanar un array de arrays
// Se le deve pasar como parametro la cantidad de capas que tiene por dentro;

const arreglo = [456,1,2,3,5,[5,1,45,6,[465,45,[,56,56]]]];

console.log(arreglo.flat(3));
// [456,  1, 2,   3,  5,  5,1, 45, 6, 465, 45, 56,56]


// flatMap()
//Este metodo tiene el mismo efecto que usar el método map() seguido inmediatamente del método flat() con una profundidad por defecto de 1. En otras palabras, flatMap(), mapea cada valor a un nuevo valor y el resultado es aplanado a una profundidad máxima de 1.

let array2 = [1,2,3,4,5];

console.log(array2.flatMap(value => [value, value * 2]));
// [1,2,2,4,3,6,4,8,5,10]

const arreglo2 = [1,2];
const arreglo3 = arreglo2.flatMap(value => [value*value]);
console.log(arreglo3[1]);

// trimStart()
// Este metodo nos permite eliminar los espacios en blanco al inicio de un string
const hello2 = "       hello world";
console.log(hello2.trimStart());

// trimEnd()
// Este metodo nos permite eliminar los espacios en blanco al final de un string

const hello3 = "hello world     ";
console.log(hello3.trimEnd());

// try/catch
//  ahora puedes utilizarlo sin necesidad de especificaro como catch(error) sino directamente usarlo en el scope del catch.

try {
    
} catch /*(error) ya no es necesario colocarlo*/ {
    error
}

// FromEntries()
// Este metodo estatico nos permite trasformar un array de arrays => [["key"",value"],[key,"value"],[key,"value"]] en un objeto

let array3 =[ ["name","luis"],["age",20],["country","ARG"]];
let obj3 = Object.fromEntries(array3);
console.log(obj3);


// Symbol()
// Este metodo crea una propiedad en el objeto en el que se le agrega una descripción

let andres = "mi nombre es andres";
let mySymbol = Symbol(andres);
console.log(mySymbol.description);


// ecmaScript 11//

// dynamic import
//Permite llamar a un bloque o linea de codigo de otro archivo cuando lo necesetemos
// Esto hace que la performance de la aplicación mejore
const button = document.getElementById("btn");

button.addEventListener("click", async function(){
 const module = await import("./file");
 module.hello();
});

//BigINT()
// permite trabajar con numeros mayores a 2^53
//Añadiendo una "n" al final activas el big int en el valor

const aBigNumber = 9007199254740991n;
const anotherBigNumber = bigInt(9007199254740991);

// Promise All Settled
// Promesa que se resuelve despues de que todas las promesas dadas se hayan cumplido o rechazado

const promise1 = new Promise((resolve,reject) => reject("reject"));
const promise2 = new Promise((resolve,reject) => resolve("resolve"));
const promise3 = new Promise((resolve,reject) => resolve("resolve 1"));


Promise.allSettled([promise1, promise2, promise3])
    .then(response => console.log(response));


//Global this
// Esta propiedad proporciona una manera estandar de acceder al valor global
// No solo del navegador, tambien desde las aplicaciones creadas con node


console.log(globalThis);
console.log(window);



//Operador null
// Este nuevo operador que evalua si un valor es null o undefined

const foo = null ?? "defaul string";

console.log(foo);


//opcional chaining
//Este metodo de acceso permite que la aplicación no se rompa si no encuentra un valor.
//Con (?) al final de la invocación en vez de de detener la ejecución cuando no se encuentre el valor, se colocara como underfind


const user ={};
console.log(user?.profile?.email);

//ecmaScript 12//

//replace()
//Este metodo permite remplazar el primer elemento que coincida con el primer parametro, para luego ser remplazado por el segundo parametro

const string1 = "javascript es maravilloso, con javascript puedo cambiar el futuro de la web";
console.log(string1);
// javascript es maravilloso, con javascript puedo cambiar el futuro de la web

const newString = string1.replace("javascript","python");
console.log(newString);
//python es maravilloso, con javascript puedo cambiar el futuro de la web


//replaceAll()
// Este metodo permite remplazar todos los elementos que coincidan con el elemento que se le pase como primer parametro ,para remplazarlos por el segundo parametro

const newString2 = string1.replaceAll("javascript","python");
console.log(newString2);
//python es maravilloso, con python puedo cambiar el futuro de la web

//metodos privados
// Es la capacidad de limitar el acceso hacia los metodos para
// Con # El metodo solo podra ser accedo dentro de la clase

class person1{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
        get #name(){
            console.log(this.name);
    }
        set #name(newName){
            this.name = newName;
            console.log(this.name);
    }
        get #age(){
            console.log(this.age);
    }
        set #name(newAge){
            this.name = newAge;
            console.log(luis.#age);
        }
}

const luisg = new person1("luis",20);

console.log(luis.#name);
console.log(luis.#age);