ES11: globalThis y matchAll

Un aplauso para la estrella de este curso:

console.log 😂😂😂!..

Na es broma, pero lo he escrito tantas veces que anoche soñé con él

A un aporte tonto si se escribe solo la palabra log el editor te completa la sintaxis completa. 💪🏻💪🏻💪🏻

🤓 Pequeña corrección, es self, no selft. Puedes comprobarlo si colocas en la consola del navegador self, te mostrará el objeto window.

Hola Chic@s 😃

ES11:

• GlobalThis

console.log(window); // navegador
console.log(global);  // node
console.log(selft);// webworker
console.log(globalThis);

• MatchAll

const regex = /\b(Apple)+\b/g;

const fruit = "Apple, Banana, Kiwi, Apple, Orange, etc. etc. etc.";

for (const match of fruit.matchAll(regex)) {
    console.log(match);
}

Creo que no es completamente necesario usar una expresion regular, probé metiendo directamente un string dentro del matchAll() y también funcionó.

Se podria utilizar para validar que el comentario que deja un usuario no contenga ninguna palabra prohibida, en vez de filtrar por Apple, se filtraria por la(s) palabra(s) prohibida(s).

Para quien lo ocupe 😄
const regex = /\b(Apple)+\b/g;

Yo lo utilizaría si estoy haciendo un sign-up para verificar que la contraseña no sea el nombre de usuario ni el correo del usuario.

Apunte en Notion

Comparto por aquí el código de la última parte

 const regex = /\b(White)+\b/g;

 const colors = 'Red, Green, Yellow, Black, White, Grey';

 for (const match of colors.matchAll(regex)){
  console.log(match);
 }

Muy interesante el matchAll, miré que lo que retorna funciona como un Generator, se puede utilizar el método next() y todo, junto a su propiedad value, también con una propiedad done.

Siempre que vayamos a imprimir un array, les recomiendo que mejor usen console.table()

const regex = /\b(Apple)+\b/g;

const fruit = 'Apple, Banana, Tomato, Kiwi, Orange, etc, etc, etc';

for(const match of fruit.matchAll(regex)) {
        console.table(match)
}

29/35 ES11: globalThis y matchAll
El objeto global para cualquier plataforma y el método matchAll para expresiones regulares.

El objeto global es un objeto que provee funciones y variables propias e integradas en el lenguaje o entorno, y su nombre varía dependiendo de la plataforma (window para el navegador, global para Node.js). Se creó globalThis para estandarizarlo, y se puede utilizar en cualquier plataforma.

Por otro lado, el método matchAll de los strings devuelve un iterable con todas las coincidencias del string específico a partir de una expresión regular. El iterable contiene una propiedad denominada index con el índice del string donde la búsqueda coincide.

const regex = /\b(Apple)+\b/g;
const fruit = "Apple, Banana, Kiwi, Apple, Orange, etc. etc. etc.";
const array = [...fruit.matchAll(regex)];
console.log(array);
/*
[
  [
    'Apple',
    'Apple',
    index: 0,
    input: 'Apple, Banana, Kiwi, Apple, Orange, etc. etc. etc.',
    groups: undefined
  ],
  [
    'Apple',
    'Apple',
    index: 21,
    input: 'Apple, Banana, Kiwi, Apple, Orange, etc. etc. etc.',
    groups: undefined
  ]
]
*/

Este código busca todas las palabras “Apple” en el string ‘fruit’, y retorna un iterable que contiene dos arrays, cada uno con información un iterable que contiene dos arrays, cada uno con información sobre una de las coincidencias encontradas (palabra, índice, input, etc.)

self es lo correcto entonces

Creo que esto podría ser de mucha utilidad en textos, contraseñas o simplemente cualquier cadena de caracteres.

Demasiado flojo el ejemplo o casi nulo el ejemplo de globalThis.

match vs matchAll

Existe un metodo similar llamado match, que regresa un array con todos los resultados del regex, pero sin darnos mucha informacion al respecto como matchAll, por ejemplo dado el siguiente codigo:

const fruits = `A want an apple, yeah it's what i want, apple apple`;

const regexi = fruits.match(regex);

console.log(regexi);

El resultado del console.log seria: [ ‘apple’, ‘apple’, ‘apple’ ].

Ahora bien me gustaria recalcar que la diferencia entre match y matchAll no es solo la informacion extra que da matchAll, tambien son distintos en el sentido de que match regresa un array comun y matchAll un iterador (el cual incluso soporta el metodo next(), como las funciones generadoras), de ahi que se necesita de un ciclo for of para obtener todos los resultados del MatchAll.

📮 Archivos del Proyecto 📮

Pasos 📌

• • Dentro de la carpeta es11, crear el archivo llamado: 04-global-this.js
  • • ◦ El código queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
console.log(window); // del lado del navegador

/*output: no tiene acceso a window
console.log(window);
		^
ReferenceError: window is not defined
*/

console.log(global); // lado de node

//output: accede a datos de información

console.log(self); // del lado de webworker;

/*output: no tiene acceso a window
console.log(self);
		^
ReferenceError: self is not defined
*/

console.log(globalThis);
//output: accede a datos de información

• • Dentro de la carpeta es11, crear el archivo llamado: 05-matchall.js
  • • ◦ El código queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
const regex = /\b(Apple)+\b/g;

const fruit = 'Apple, Banana, Kiwi, Apple, Orange, etc., etc.';

for (const match of fruit.matchAll(regex)) {
	console.log(match);
}

/*output:
[
	'Apple',
	'Apple',
	index: 0,
	input: 'Apple, Banana, Kiwi, Apple, Orange, etc., etc.',
	groups: undefined
]
[
	'Apple',
	'Apple',
	index: 21,
	input: 'Apple, Banana, Kiwi, Apple, Orange, etc., etc.',
	groups: undefined
]
*/

//Ejercicio #2
const regex2 = /\b(Etc)+\b/g;

const fruit2 = 'Apple, Banana, Kiwi, Apple, Orange, Etc, Etc, Etc';

for (const match2 of fruit2.matchAll(regex2)) {
	console.log(match2);
}

/*output:
[
	'Etc',
	'Etc',
	index: 36,
	input: 'Apple, Banana, Kiwi, Apple, Orange, Etc, Etc, Etc',
	groups: undefined
]
[
	'Etc',
	'Etc',
	index: 41,
	input: 'Apple, Banana, Kiwi, Apple, Orange, Etc, Etc, Etc',
	groups: undefined
]
[
	'Etc',
	'Etc',
	index: 46,
	input: 'Apple, Banana, Kiwi, Apple, Orange, Etc, Etc, Etc',
	groups: undefined
]
*/

Una aplicación en la industria para el matchAll() es cuando se require buscar información en archivos tipo texto que no tienen un formato tradicional parseable por javascript vanilla. Se podría incluso construir un parser custom.

También nos podría servir de alternativa al típico split (muchas veces usado más para ubicar ciertos substrings) o el mismo includes para verificar si unos determinados caracteres están en un string

Mi resumen:

👎🏼

uff si ya casi,

Filtrado de email determinados se me ocurre…

Lo utilizó mucho para validad si un tipo de código de una pieza es válido o no. Tanto buscar ese valor que me permite identificar la pieza por ejemplo Pieza A = código “2NZ” y la cantidad de caracteres que tiene el código completo.

Me acabo de inventar un ejemplo de lo que se podría hacer con la función matchAll()

/*Reto Platzi: Cortar todo el string hasta antes de la tercera repetición de "Apple".
Si no hay coincidencias regresar false*/
function retoPlatzi() {
  const regex = /\b(Apple)+\b/g;
  const fruit = "Apple, Banana, Kiwi, Apple, Orange, etc.Apple etc. etc.";
  const array = [...fruit.matchAll(regex)];
  const indices = [];
  let indice;
  
  if(array.length === 0) {
    return false;
  }
  
  for(let match of array) {
    indices.push(match["index"]);  
  }
  indice = indices[indices.length - 1];

  return fruit.slice(0, indice);
}

console.log(retoPlatzi());

globalThis es una propiedad de objeto que representa el objeto global actual en JavaScript. Se introdujo en ECMAScript 2020 y proporciona una forma uniforme de acceder al objeto global en diferentes entornos, como navegadores, Node.js y otros.

Antes de la introducción de globalThis, acceder al objeto global dependía de la implementación del entorno y podía ser diferente en diferentes navegadores o entornos de ejecución. Por ejemplo, en navegadores, el objeto global es window, mientras que en Node.js es global.

globalThis permite una forma más uniforme de acceder al objeto global y es compatible con los estándares de ECMAScript. Aquí hay un ejemplo de cómo se puede usar globalThis en JavaScript:

console.log(globalThis);    // Output: (window or global, depending on the environment)

En este ejemplo, globalThis devuelve el objeto global actual en el entorno en el que se ejecuta el código.

Respondiendo la pregunta del final, lo primero que se me ocurrio es que el matchAll seria util para crear filtros de palabras, como por ejemplos groserias y cosas por el estilo xd

utilizaría el matchAll() para validar que en una contraseña no se estén utilizando datos personales como fecha de nacimiento o numero de identidad.

**Me imagino para el uso de matchAll:
**

Imagina que estás trabajando una plantilla de respuestas de un chat de whatsapp por API, con matchAll podrás independiente de la ubicación y orden que te envie tu cliente, extraer los datos que quieras. Por ejemplo:

Hola soy Carlos y quiero pedir una pizza de carnes para la dirección XYZ.

const regex_pizza = /\b(pizza)+\b/g;
const regex_direccion = /\b(direccion)+\b/g;

const str = 'Hola soy Carlos y quiero pedir una pizza de carnes para la dirección XYZ.'

for (const match of str.matchAll(regex_pizza)){
    console.log(match)
}

for (const match of str.matchAll(regex_direccion)){
    console.log(match)
}

(No soy experto en RegEx seguro pueden quedar mejor, pero con el mapa de indice en el texto de las palabras clave pizza y dirección, luego de estas palabras puedes traer el detella de cada una, cosa que al final, tu progama entregue:

Pizza: de carnes
Dirección: XYZ