Prepárate para tu próximo empleo a precio especial

Antes:$249

Currency
$209
Suscríbete

Termina en:

07d

19h

43m

44s

1

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";

//javascriptvar epicPharase = hello + " " + world;
console.log(epicPharase);
//es6let 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// javascriptvar lorem = "mi nombre es Luis Gomez \n tengo 19 años";

// es6let 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"
};

{
    // javascriptconsole.log(person.name, person.age);

// es6let { 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 // javascriptconst name = "luis";
const age = 20;

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

// es6let 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 parametroconst contador = numMax =>{
    for(let i = 0; i <= numMax;i++){
        console.log(i);
    }
} 
contador(5);

// arrow function sin parametroconst 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 = () =>{
    returnnewPromise((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 plazoimport {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 mismafunction* 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 boleanoconst 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 ** exponenteconst 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 = () =>{
    returnnew 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 construidoconst 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 promesaconst helloWorld = () =>{
    returnnewPromise((resolve,reject)=>{
        (true)
        ? resolve('helloWorld')
        : reject(newError ('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 stringconst hello2 = "       hello world";
console.log(hello2.trimStart());

// trimEnd()// Este metodo nos permite eliminar los espacios en blanco al final de un stringconst 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 objetolet 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ónlet 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 mejoreconst button = document.getElementById("btn");

button.addEventListener("click", asyncfunction(){
 constmodule = awaitimport("./file");
 module.hello();
});

//BigINT()// permite trabajar con numeros mayores a 2^53//Añadiendo una "n" al final activas el big int en el valorconst aBigNumber = 9007199254740991n;
const anotherBigNumber = bigInt(9007199254740991);

// Promise All Settled// Promesa que se resuelve despues de que todas las promesas dadas se hayan cumplido o rechazadoconst promise1 = newPromise((resolve,reject) => reject("reject"));
const promise2 = newPromise((resolve,reject) => resolve("resolve"));
const promise3 = newPromise((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 nodeconsole.log(globalThis);
console.log(window);



//Operador null// Este nuevo operador que evalua si un valor es null o undefinedconst 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 underfindconst 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 parametroconst 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 webconst 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 parametroconst 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 claseclassperson1{
    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);



Escribe tu comentario
+ 2