ECMAScript 2021

👀 Si les sale el error de .replaceAll is not a function o el de .any is not a function, la solución es actualizar la versión de Node.

👇 Si están en WSL o Linux, con que ejecuten estos comandos les actualizará a la última versión:

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

Fuente: de los deseos
Digo
Fuente: Instalando Node.js utilizando un gestor de paquetes y NodeSource Node.js Binary Distributions

👾 Por aquí les dejo el código que usamos en la clase:

// 🧯 Replace

const string = "JavaScript es maravilloso, con JavaScript puedo crear el futuro de la web.";
const replacedString = string.replace("JavaScript", "Python");
console.log(replacedString);

//// Output: Python es maravilloso, con JavaScript puedo crear el futuro de la web.

const replacedString2 = string.replaceAll("JavaScript", "Python");
console.log(replacedString2);

//// Output: Python es maravilloso, con Python puedo crear el futuro de la web.

// 🔒 Metodos privados
class Message {
    #show(val){ // Con el # convertimos al método en privado
        console.log(val);
    };
};

const message = new Message();
message.show('Hola!');

//  👽 Promise Any

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

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


//  🦴 WeakRef(element);

class AnyClass {
    constructor(element){
        this.ref = new WeakRef
    }
    {...}
}

// 🧪 Nuevos operadores lógicos

let isTrue = true;
let isFalse = false;
console.log(isTrue &&= isFalse);

let isTrue = true;
let isFalse = false;
console.log(isTrue ||= isFalse);

let isTrue = true;
let isFalse = false;
console.log(isTrue &&= isFalse);

En este curso la verdad algunas cosas ya las sabía porque las investigué, pero creo que si una persona que no sabe mucho y viene a este curso lo único que hará es confundirse, porque solo se explican las novedades, pero no como funciona o el porque. La verdad el curso en su inicio no estaba mal, pero la verdad ahorita esta sin duda decepcionante

Este curso solo se dedico el profesor a decir las novedades de Javascript , pero poco explica el funcionamiento real de las cosas, un poco decepcionante la verdad …

No hay mucha práctica con ejemplos en este clase como los hubo en las anteriores

Con el método raplace se pueden reemplazar todas las coincidencias haciendo uso de expresiones regulares.
Ejp:

const replacedString2 = string.replace(/Javascript/g, "Python");

Les comparto este otro hilazo🧵 que vi en Twitter con algunas de las novedades de ES2021.

Oscar va re acelerado en este curso, nose a donde quiere llegar jajjajaja

ES12

ReplaceAll

El método replaceAll() devuelve una nueva cadena con todas las coincidencias de un patrón reemplazadas. El patrón puede ser una cadena o RegExp, y el reemplazo puede ser una cadena o una función que se llamará para cada coincidencia.

const string = "JavaScript es maravilloso, con JavaScript puedo crear el futuro de la web.";

const replacedString = string.replace("JavaScript", "Python");
console.log(replacedString);
// Python es maravilloso, con JavaScript puedo crear el futuro de la web.

const replacedString2 = string.replaceAll("JavaScript", "Python");
console.log(replacedString2);
// Python es maravilloso, con Python puedo crear el futuro de la web.

Métodos privados

class Message {
    #show(val){ // Con el # convertimos al método en privado
        console.log(val);
    };
};

const message = new Message();
message.show('Hola!');

Promise Any

El método Promise.any recibe un array de promesas y se resuelve tan pronto como una de ellas haya sido resuelta. El valor del resultado va a ser esa primera promesa resuelta.

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

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

WeakRef

Un objeto WeakRef le permite mantener una referencia débil a otro objeto, sin evitar que ese objeto sea recolectado como basura.

class AnyClass {
    constructor(element){
        this.ref = new WeakRef
    }
    {...}
}

Nuevos operadores lógicos

let isTrue = true;
let isFalse = false;
console.log(isTrue &&= isFalse); // false

let isTrue = true;
let isFalse = false;
console.log(isTrue ||= isFalse);// true

let isTrue = undefined;
let isFalse = false;
console.log(isTrue ??= isFalse);// false

Para aquellas personas que se quedaron con dudas sobre el funcionamiento de && = les dejo el siguiente link

En palabras simples lo que va a suceder es lo siquiente:

x && (x = y);

Eso significa que primera se realiza la comparacion logica entre x e y , de ser verdadera se asigna el valor de y en x, de ser falsa no sucede la asignacion.

ahhh!!! entonces replace string es lo que usa avakin para censurar mis palabrotas!!! jajajajaja

creo que este curso puede ser funcional para alguien que ya conoce a fondo javascript… pero no veo como esto nos puede servir a los que venimos siguiendo la escuela de js… apenas vimos funciones en el curso practico de js… de que me sirve saber que fue lo que cambio si ni si quiera sabia que existía…

Este curso parece que lo realizaron a las carreras, la experiencia no era buena, mejor sería que se tomaran su tiempo en hacerlo bien y entendible para todos…

Nuevos Operadores Logicos:

El operador de asignación AND lógico (x &&= y) solo asigna si x es verdadero

let isTrue = true;
let isFalse = false;
console.log(isTrue &&= isFalse);

El operador de asignación OR lógico (x ||= y) solo asigna si x es falsa.

let isTrue = true;
let isFalse = false
console.log(isTrue ||= isFalse);

El operador de asignación lógica nula (x ??= y) solo asigna si x es nula (nula o indefinida).

let isTrue = undefined;
let isFalse = false
console.log(isTrue ??= isFalse);

Por acá otros ejemplos y métodos de ES12
https://backbencher.dev/articles/javascript-es2021-new-features

🚨🚨🚨 Si les marca error asegurense de tener NodeJS v15 en adelante. 🚨🚨🚨

Nodejs v14 usa la engine V8 (8.4) Pero, .replaceAll se agregó a V8 en la versión 8.5. Nodejs v15 usa la engine V8 versión 8.6 y, por lo tanto, esa es la primera versión de Nodejs en la que se puede usar .replaceAll ().

Aún no veo para qué usar WeakRef();

me parece una persona que no sabe enseñar a toda hora va a la carrera hablando

Tuve algunos problemas como (.replaceAll is not a function), lo que me sirvió fue lo siguiente:

Install / Uninstall NodeJs in Ubuntu 20.04 LTS version.

Install NodeJs
$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
or
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt-get install nodejs

3:09 realmente si se puede hacer si usamos expresiones regulares /Javascript/g cambiando el string de “Javascript” por la anterior expresión regular funciona, me imagino que lo agregaron para evitar usar expresiones regulares… la cosa es que aprendan sobre expresiones regulares que son muy útiles para trabajar.

Javascript en su última versión (Hasta ahora) ECMAScript 12 reune todo lo bueno de lenguajes altamente tipados para abordarlo en este poderoso lenguaje.

Pensaba que replaceAll era una función deprecada, siempre tuve, y sigo teniendo, problemas para utilizarla tanto en Node como en Browser. Prefiero usar replace con un Regex.

New Features in ECMAScript 2021 (with code examples)

Casi ni entendí explica muy rápido el profesor oscar.

Entiendo la necesidad de actualizar las novedades de ECMAScript para mantener actualizados a aquellos que ya conocen con mas detalle, pero poner este curso luego de la introduccion a JS en un error, la mayoria de conceptos son nuevos y no se explican con claridad, no veo donde puedan profundizarse mas dentro de la ruta

Que clase para mas buena, he aprendido mucho a lo largo del curso pero esta clase es la mejor de todas!

ACTUALIZAR NODE JS EN LINUX

Lo primero de todo es comprobar nuestra versión de Node.js, para ello ejecutamos en una consola lo siguiente:

sudo npm --version

Una vez sabemos que versión tenemos, vamos a comenzar el proceso de actualización. Lo primero de todo será limpiar la cache que genera npm.

sudo npm cache clean -f

El siguiente paso es instalar n, una herramienta de administración de Node.js, que nos va a ayudar bastante.

sudo npm install -g n

Y ahora vamos a instalar la ultima versión estable.

sudo n stable

Si comprobamos la versión de node que tenemos ahora mismo instalada, después de la instalación, debe coincidir con la que aparece en este listado de versiones.

sudo npm --version

No me lo creo, va tan aprisa que ni siquiera ejecuto el último ejemplo para mostrar la salida de su código.

En qué clase del curso de js básico o el de js práctico que vienen antes que este explica lo de node? Nunca lo vi.

Así que ahora Oscar cambio a JavaScript por Python 😏

El sentido de este curso es que conozcamos las novedades y que nosotros busquemos mas en la documentación para saber a fondo donde usar… los que se quejan en el chat escuchen lean no sean cerrados

Concuerdo con varios comentarios, vengo del curso practico de JS donde se hicieron varios ejemplos prácticos.

En este curso el profe parece que va con afán, habla muy rápido y solo explica las novedades.

La verdad esta mucho mejor la metodología con ejemplos prácticos.

Eso de las asignaciones es muy amplio al parecer. Para ver los demás ejemplos: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators

Bueno, de que sirve solo mencionar las novedades sin ejemplos.

Para los que no entendieron lo de los nuevos operadores lógicos, investigue y básicamente son una simplificación de esto

let isTrue = true;

let isFalse = false;

console.log(isTrue &&= isFalse); //false

if(isTrue){ // si la condicion es verdadera has una nueva asignacion
	isTrue = isFalse;
}

console.log(isTrue); //false




let isTrue = true;

let isFalse = false;

console.log(isTrue ||= isFalse); //true

if(isTrue == false){ // si la condicion es falsa has una nueva asignacion
	isTrue = isFalse
}
console.log(isTrue); //true




let isTrue = undefined;

let isFalse = false;

console.log(isTrue ??= isFalse); //false

if(isTrue == null || isTrue == undefined){ // si la condicion es nula o no definida has una nueva asignacion
	isTrue = isFalse
}
console.log(isTrue); //false

Si quizás no les funciona .replaceAll o cualquier nueva característica verifiquen su versión de node. Aquí dejo un tutorial (clic aquí) para hacerlo con nvm. Una vez lo hagan no olviden utilizar el comando “nvm use #VERSION” para cambiar la versión que ejecuta tu editor de texto.

wifreff

El método .replaceAll()= busca todas las coincidencias de información en un string y remplaza todas esas coincidencias por otro valor.
nota : anteriormente con el método .replace() solo hacia cambio en la primera coincidencia del string.
Ejemplo del método replaceAll:
const string = “JavaScript es maravilloso, con JavaScript puedo crear el futuro de la web.”;
const newString = string.replaceAll(“JavaScript”, “Python”);
console.log(newString);
Python es maravilloso, con Python puedo crear el futuro de la web.
¿Cómo aplicarlo?
Se podría usar para filtrar palabras inapropiadas en comentarios de un chat -blog etc por otras como ***

Nuevos operadores lógicos

//asignacion AND logico////
// es true_ si solo si ambas variables son true_
  let isTrue = false;
  let isFalse = false;
    console.log(isTrue &&= isFalse); //false_
  let isTrue = true;
  let isFalse = false;
    console.log(isTrue &&= isFalse);//false_
  let isTrue = false;
  let isFalse = true;
    console.log(isTrue &&= isFalse);//false_
  let isTrue = true;
  let isFalse = true;
    console.log(isTrue &&= isFalse);//true_

//asignacion OR logico////
// es false_ si solo si ambas variables son false_
  let isTrue = false;
  let isFalse = false;
    console.log(isTrue ||= isFalse);//false_
  let isTrue = true;
  let isFalse = false;
    console.log(isTrue ||= isFalse);//true_
  let isTrue = false;
  let isFalse = true;
    console.log(isTrue ||= isFalse);//true_
  let isTrue = true;
  let isFalse = true;
    console.log(isTrue ||= isFalse);//true

//asignacion de anulacion logico////
  let isTrue = undefined;
  let isFalse = false;
    console.log(isTrue ??= isFalse);//false_
  let isTrue = undefined;
  let isFalse = true;
    console.log(isTrue ??= isFalse);//true_

//Dejo una pequeña implementación que me permitió un mejor entendimiento, cualquier consejo sobre mis apuntes será bienvenido.

class Pakiman { 
  
    constructor(n,v,a){ 
    //Las variables o propiedades se colocan en el "constructor()" y estas se cargan automaticamente al crear la instancia
      this.nombre=n;
      this.vida=v;
      this.ataque=a;
      this.tipo= "tierra";
      this.info=`Soy un pokemon tipo ${this.tipo}, de nombre ${this.nombre}, con un ataque de ${this.ataque}`;//heredable a pesar de que no es parte de los parametros del constructor
      this.descripcion_value = null
      this.creandoRefDebil(this.nombre) //se ejecuta un metodo en este caso solo para hacer una validacion
    }

    //Metodo privado # 
    //solo lo puede acceder otro metodo dentro de la clase, no fuera de ella
    #holamundoPrivado(valor){  
      console.log("hola... "+valor)
    }
    decirHolaMundoPublico(valor){
      this.#holamundoPrivado(valor)
    }
     get descripcion(){
      return this.descripcion_value
    }
     set descripcion(texto){
      /*Alguna validación*/
      this.descripcion_value=texto
    }
    creandoRefDebil(name){
      if(name=="Pikachu"){
        this.refdebil_OtrosNombre = new WeakRef({otherName:'Pachirisu, Emolga, Dedenne'})
        //ese objet{} puede venir de una variable global...
      }
    }
}

const pikachu = new Pakiman("Pikachu",56,70)
pikachu.descripcion = "El impactrueno es un poder de alto poder" //modificado mediante setter
console.log(pikachu.descripcion) //"El impactrueno es un poder de alto poder" //consultado mediante getter
pikachu.decirHolaMundoPublico('You!') //usa el metodo privado 'holamundoPrivado()'
//pikachu.holamundoPrivado('Alvaro')//genera ERROR //pikachu.holamundoPrivado is not a function //esta bien porque es un metodo privado!!!!!
pikachu.refdebil_OtrosNombre.deref() //{otherName: 'Pachirisu, Emolga, Dedenne'}

En esta pagina se encuentran la características de cada versión de ECMASCRIPT y las versiones de node con las que son compatibles:

Node green

ey! amigos les dejo un uso de replace con RegExp

//HTML/
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset=“UTF-8” />
</head>

<body>
<div id=“app”></div>
<h1 id=“salida”>Holaa</h1>
<p>Vamos a cambiar las a por o</p>
<button id=“replace”>Replace</button>
<script src=“src/index.js”></script>
</body>
</html>

//JS//

const text = document.getElementById(“salida”);

let string = text.innerHTML;
const replaced = () => {
const replaced = string.replace(new RegExp(“a”, “ig”), “o”);
return (text.innerText = replaced);
};
const btn = document.getElementById(“replace”);

btn.addEventListener(“click”, replaced);

const string = "JavaScript es maravilloso, con JavaScript puedo crear el futuro de la web";
const replacedString = string.replace("JavaScript", "Python");
console.log(replacedString);

const replacedString2 = string.replaceAll("JavaScript", "Python");
console.log(replacedString2);


class Message {
    #show(val) {
        console.log(val);
    };
    get #add(val) {
        ...
    }
}

const message = new Message();
message.show('Hola!');


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

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


class AnyClass {
    constructor(element) {
        this.ref = new WeakRef(element)
    }
    { ... }
}


let isTrue = true;
let isFalse = false;
console.log(isTrue &&= isFalse);

let isTrue = true;
let isFalse = false;
console.log(isTrue ||= isFalse);

let isTrue = undefined;
let isFalse = false;
console.log(isTrue ??= isFalse);