No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES11: globalThis y matchAll

29/35
Recursos

鈿狅笍 En el c贸digo de la clase se escribe selft para acceder al 谩mbito global de un webworker, y deber铆a ser self.

Las siguientes caracter铆sticas de ES2020 que aprender谩s son: el objeto global para cualquier plataforma y el m茅todo matchAll para expresiones regulares.

Objeto global para cualquier plataforma

El motor de JavaScript, aquel que compila tu archivo y lo convierte en c贸digo que entiende el computador, al iniciar la compilaci贸n crea un objeto global.

El objeto global proporciona funciones y variables propias e integradas en el lenguaje o el entorno. Dependiendo la plataforma, este objeto global tendr谩 un nombre diferente.

En el navegador el objeto global es window, para Node.js es global, y as铆 para cada entorno. Sin embargo, en Node.js no podr谩s acceder a window, ni en el navegador podr谩s acceder a global.

Para estandarizar el objeto global se cre贸 globalThis, un objeto compatible para cualquier plataforma.

// Ejecuta el siguiente c贸digo y observa que muestra
console.log(window)
console.log(globalThis)

// En el navegador
window === globalThis // true

// En Node.js
global === globalThis // true

M茅todo matchAll para expresiones regulares

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, colocada como argumento.

string.matchAll(regex)

En el iterable, existe 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."

// Tranformaci贸n del iterable retornado a array
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
  ]
]
*/

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 30

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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贸.

Firma la petici贸n 馃

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;

Apunte en Notion

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.

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

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)
}


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.

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 鈥淎pple鈥 en el string 鈥榝ruit鈥, 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.)

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: [ 鈥榓pple鈥, 鈥榓pple鈥, 鈥榓pple鈥 ].

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.

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

self es lo correcto entonces

馃摦 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