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