Novedades de ECMAScript 9: Regex y Spread Operator en JavaScript

Clase 22 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

La siguiente versión de ECMAScript fue publicada en 2018. Las características de ES9 o ES2018 que aprenderás son: expresiones regulares y propiedades de propagación.

Expresiones regulares

Las expresiones regulares o RegEx (regular expresions) son patrones de búsqueda y manipulación de cadenas de caracteres increíblemente potente y están presentes en todos los lenguajes de programación.

En JavaScript se crea este patrón entre barras inclinadas (/patrón/) y se utiliza métodos para hacer coincidir la búsqueda.

const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regexData.exec('2018-04-20')

Este es un tema extenso, por lo que te recomiendo seguir el curso y leer los métodos sobre expresiones regulares en JavaScript:

Propiedades de propagación

Las propiedades de propagación consisten en expandir las propiedades de un objeto utilizando el spread operator. Sirve para crear nuevos objetos a partir de otros.

const objeto = {
  nombre: "Andres",
  age: 23,
}

const usuario = {
    ...objeto,
    plataforma: "Platzi"
}

Crear copias de objetos utilizando las propiedades de propagación

Semejante a crear copias de arrays utilizando el operador de propagación, se puede realizar copias de objetos en un solo nivel mediante las propiedades de propagación.

De esta manera el segundo objeto tendrá una referencia en memoria diferente al original.

const objetoOriginal = {a: 1, b: 2}
const objetoReferencia = objetoOriginal
const objetoCopia = {...objetoOriginal}

objetoReferencia === objetoOriginal // true
objetoOriginal === objetoCopia // false

Cuidado con la copia en diferentes niveles de profundidad

El operador de propagación sirve para crear una copia en un solo nivel de profundidad, esto quiere decir que si existen objetos o arrays dentro de un objeto a copiar. Entonces los sub-elementos en cada nivel, tendrán la misma referencia en la copia y en el original.

const original = { datos: [1, [2, 3], 4, 5] }
const copia = { ...original }

original === copia // false
original["datos"] === copia["datos"] // true

La manera de solucionar esto es más compleja, tendrías que utilizar el operador de propagación para cada elemento en cada nivel de profundidad.

Sin embargo, recientemente salió una forma de crear una copia profunda con StructuredClone. Aunque es una característica muy reciente, así que revisa que navegadores tienen soporte.

const original = { datos: [1, [2, 3], 4, 5] }
const copia = structuredClone(original)

original === copia // false
original["datos"] === copia["datos"] // false

Contribución creada por Andrés Guano (Platzi Contributor).

Christopher Andrés Guano Valencia

student•

Cuidado con la copia en diferentes niveles de profundidad

const original = { datos: [1, [2, 3], 4, 5] }
const copia = { ...original }

original === copia // false
original["datos"] === copia["datos"] // true

La manera de solucionar esto es más compleja, tendrías que utilizar el operador de propagación para cada elemento en cada nivel de profundidad.

Sin embargo, recientemente salió una forma de crear una copia profunda con StructuredClone. Aunque es una característica muy reciente, así que revisa que navegadores tienen soporte.

const original = { datos: [1, [2, 3], 4, 5] }
const copia = structuredClone(original)

original === copia // false
original["datos"] === copia["datos"] // false

Irving Caamal

student•

Buena observación y buen aporte.

Woldev S.A.S

student•

A mí no me sirve el método structuredClone.

Yuli Alexandra Pulido Castañeda

student•

Hola Chic@s :) ES9

Regex

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const matchers = regex.exec("2022-01-01");
console.table(matchers);

Spread


const user = { username: "gndx", age: 34, coutry: "CO" };
const { username, ...values } = user;
console.log(username);
console.log(values);

Felix Torres Javier Antonio

student•

Lo apuntaré, tal vez venga en el examen

Fernando Yutiz

student•

Las expresiones regulares suelen ser un dolor de cabeza, pero hay que reconocer una vez dominadas, que son una herramienta super-potente para el programador.

Kevin Salazar

student•

Eso pienso!.

Oscar Solórzano Cervantes

student•

Para quien lo quiera copiar y pegar :D

const regex = /(\d{4})-(\d{2})-(\d{2})/;

Teo Zavala

student•

Se añade otro curso mas a mi lista de pendientes, Curso de Expresiones Regulares - Platzi

Tomás André Peñaloza Avilés

student•

Rest Operator

. En realidad lo que el profe Oscar explicó después de las regex no es el spread operator, sino el Rest operator. Ambos tienen la misma sintaxis de 3 puntitos < ... > pero son distintos. .

Como se diferencia el Rest Operator del Spread Operator?

La sintaxis spread "expande" un array en sus elementos, mientras que la sintaxis rest recopila varios elementos y los "condensa" en un solo elemento. .
Rest tiene dos aplicaciones, como Rest property (en asignación desestructurada) y como Rest parameters. .
El ejemplo del profesor muestra el uso de Rest Property, es decir, una asignación desestructurada aplicada en un objeto. .
Los rest parameters permiten a una función aceptar una cantidad indefinida de argumentos (aunque esto no suele ser una buena práctica).

function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

Para más info check the Documentation.

Yuliam Rivera González

student•

excelente aporte, ya mismo tomo nota sobre eso.

LESTHER XITUMUL MANUEL

student•

Tienes razón, es muy importante saber que el Speard Operator y el Rest Operator NO son lo mismo (aunque a nivel de síntaxis sí). Uno "Separa" y el otro "Une" el resto de propiedades.

Magdiel Linares

student•

Interesante, imprimir en la consola el contenido de un array de manera mas clara en una tabla

console.table(values)

Mostrara...

(index) | Value

age | 34

country | 'CO'

Andrés Palacio Vera

student•

¿En qué página web puedo encontrar ejercicios de JS para practicar todo esto?

Juan Carlos Montilla Sánchez

student•

Hola, Andrés.

Te puedo recomendar Code Signal, no es la única pero si tienes ejemplos de la vida real para entrevistas y te ayuda a poner en práctica todo lo aprendido.

Saludos.

silfredo mario

student•

Hola, Andres.

En frontendmentor

Miguel Angel Reyes Moreno

student•

Por si alguien no sabe qué hace exactamente la expresión regular: /(\d{4})-(\d{2})-(\d{2})/

\d{4} -> busca un string con exactamente 4 dígitos de longitud luego viene un guión - \d{2} -> busca un string con exactamente 2 dígitos de longitud luego viene otro guión - y se repite el \d{2}

Entonces la expresión regular hará match con strings que tengan 4 dígitos - 2 dígitos - 2 dígitos

Wil Garcia Mercado

student•

regex...

const regex = /(\d{4})-(\d{2})-(\d{2})/; 

const matchers = regex.exec("2023-04-27");

console.table(matchers);

spread, rest

const user = {
    username: "Wil",
    age: 37,
    country: "CO"
};
const {username, ...values} = user;
console.log(username);
console.log(values);

Luis Alfredo Suarez

student•

ES9: expresiones regulares

Las expresiones regulares, también conocidas como regex o regexp, son patrones de búsqueda y manipulación de cadenas de texto. Aquí hay una introducción básica a cómo funcionan:

Sintaxis: Las expresiones regulares se componen de caracteres normales y caracteres especiales que definen patrones de búsqueda. Por ejemplo, /abc/ es una expresión regular que buscará la cadena "abc" en cualquier parte de un texto.
Caracteres literales: Los caracteres normales en una expresión regular coinciden con ellos mismos en la cadena. Por ejemplo, /cat/ coincidirá con "cat" en cualquier lugar del texto.
Caracteres especiales: Los caracteres especiales tienen significados especiales en una expresión regular. Algunos ejemplos son:
- .: Coincide con cualquier carácter excepto un salto de línea.
- *: Coincide con cero o más repeticiones del elemento anterior.
- +: Coincide con una o más repeticiones del elemento anterior.
- ?: Coincide con cero o una repetición del elemento anterior.
- \: Se usa para escapar caracteres especiales y tratarlos como literales.
Clases de caracteres: Las clases de caracteres permiten especificar un conjunto de caracteres que pueden coincidir en un punto dado. Por ejemplo, [aeiou] coincide con cualquier vocal.
Cuantificadores: Los cuantificadores permiten controlar la cantidad de repeticiones de un elemento. Algunos ejemplos son:
- {n}: Coincide exactamente con n repeticiones.
- {n, m}: Coincide con al menos n repeticiones y como máximo m repeticiones.
Anclaje: Los caracteres ^ y $ se utilizan para anclar una expresión regular al principio o final de una cadena, respectivamente. Por ejemplo, /^abc/ coincidirá solo si "abc" está al comienzo de la cadena.
Grupos y Captura: Los paréntesis ( ) se utilizan para agrupar elementos y crear grupos. También permiten capturar la parte de la cadena que coincide con el grupo.
Modificadores: Los modificadores se agregan al final de una expresión regular y afectan cómo se realiza la búsqueda. Por ejemplo, el modificador i hace que la búsqueda sea insensible a mayúsculas y minúsculas.
Uso con métodos: En JavaScript, las expresiones regulares se utilizan con métodos de cadena como match, test, exec, replace, search y split para realizar operaciones de búsqueda y manipulación en cadenas.

Profundicemos en el uso de métodos

test(): Este método verifica si una cadena coincide con una expresión regular. Devuelve true si hay coincidencia y false si no hay.

const pattern = /apple/;
const text = "I love apples";
const isMatch = pattern.test(text);
console.log(isMatch); // true

match(): Este método busca todas las coincidencias de una expresión regular en una cadena y las devuelve en un array.

const pattern = /apple/g;
const text = "I have an apple and another apple";
const matches = text.match(pattern);
console.log(matches); // ["apple", "apple"]

exec(): Este método también busca coincidencias en una cadena y devuelve detalles sobre la primera coincidencia en un array. Si no hay coincidencia, devuelve null.

const pattern = /apple/;
const text = "I have an apple";
const matchDetails = pattern.exec(text);
console.log(matchDetails[0]); // "apple"

replace(): Este método reemplaza las coincidencias de una expresión regular en una cadena con un valor especificado.

const pattern = /apple/g;
const text = "I have an apple and another apple";
const newText = text.replace(pattern, "orange");
console.log(newText); // "I have an orange and another orange"

search(): Este método busca la primera coincidencia de una expresión regular en una cadena y devuelve la posición del inicio de la coincidencia. Si no hay coincidencia, devuelve -1.

const pattern = /apple/;
const text = "I have an apple";
const position = text.search(pattern);
console.log(position); // 9

split(): Este método divide una cadena en un array de subcadenas utilizando una expresión regular como delimitador.

const pattern = /[\s,]+/;
const text = "apple,orange,banana";
const fruits = text.split(pattern);
console.log(fruits); // ["apple", "orange", "banana"]

Recuerda que en todos estos métodos, puedes utilizar las expresiones regulares para crear patrones de búsqueda más complejos y poderosos. Cada método tiene sus propias características y utilidades, así que asegúrate de leer la documentación oficial de JavaScript para obtener una comprensión completa de cómo utilizarlos correctamente.

Espero sea de utilidad. 👨‍💻

Guadalupe Gómez

student•

En JavaScript, tanto el operador de propagación (spread operator) como el operador de descanso (rest operator) utilizan la sintaxis de tres puntos (...), pero se usan en situaciones diferentes.

El operador de propagación se utiliza para descomponer un objeto iterable (como un array o una cadena) en elementos individuales. Por ejemplo, si tienes un array a y quieres crear un nuevo array b que incluya todos los elementos de a junto con algunos elementos adicionales, puedes usar el operador de propagación de la siguiente manera:

const a = [1, 2, 3];
const b = [...a, 4, 5, 6];
console.log(b); // Output: [1, 2, 3, 4, 5, 6]

El operador de descanso, por otro lado, se utiliza para combinar múltiples elementos en un array. Por ejemplo, si tienes una función que acepta un número variable de argumentos y quieres convertirlos en un array, puedes usar el operador de descanso de la siguiente manera:

function myFunction(...args) {
  console.log(args);
}

myFunction(1, 2, 3); // Output: [1, 2, 3]

En este ejemplo, el operador de descanso ...args recopila todos los argumentos pasados a myFunction() y los combina en un array args.

En resumen, el operador de propagación se utiliza para descomponer un objeto iterable en elementos individuales, mientras que el operador de descanso se utiliza para combinar múltiples elementos en un array.

Kevin Salazar

student•

Por aquí les dejo unos Apuntes.

Daniel Cárdenas

student•

alguien sabe por que cuando le doy "run code" se demora como 10 segundos en darme respuesta en la terminal?

Williams Antonio Hernandez Ardila

student•

Eso depende de la conexión y de la velocidad del computador

Cristian Acalo

student•

🦄✨Otra manera de hacer copias

Como se mencionó en otro aporte, el operador de propagación solamente es útil para realizar copias superficiales, es decir, que no funciona en atributos que contengan objetos anidados. . Así que otra forma muy sencilla de realizar una copia total de un objeto es usando la técnica llamada serialización y deserialización de JSON. Esta consiste en tomar un Objeto, transformarlo a una cadena de texto en formato Json, para luego volver a transformarlo en un Objeto.

const person = {
  name: "Cris",
  age: 21,
  address: {
    city: "Ciudad Gótica",
    calle: "Av. Siempre Viva",
  },
};

const personJSON = JSON.stringify(person); //obtenemos un string enformato JSON con una nueva dirección de memoria.
const personCopy = JSON.parse(personJSON); //Finalmente obtenemos una copia exacta del Objeto pero con otra dirección de memoria.

console.log(person); //person Object
console.log(personCopy); //mismos datos exactos de person Object
console.log(person == personCopy); // False porque no tienen la misma dirección de memoria

David Rangel

student•

Nota spread:

// operador de propagación cómo funciona con conceptos en objetos

// ahora admite el uso de rest y spread con objetos

// operador de ...y copiar lo que está en las claves en nuestros objetos

const user = { username: 'gndx', age:34, country: 'CO'};
const { username, ...values } = user;

console.log(username);
// separamos el username, como se indica en la línea 2, por eso lo podemos declarar
console.log(values);
// y con ..values asignamos el resto de valores a dicho elemento, y por eso lo llamamos

// tiene sentido para transformar objetos y arreglos y haceindo manipulaciones para obtener ciertos objetos

Maria Gabriela Rodriguez Cuevas

student•

📄 Archivos del Proyecto 📄

Pasos 📌

• Dentro de la carpeta src, se crea la carpeta es9.
- • Dentro de la carpeta es9, crear el archivo llamado: 00-regex.js ◦ El código queda:

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

//Ejercicio #1
const regex = /(\d{4})-(\d{2})-(\d{2})/; //4 caracteres del año, 2 para el mes y 2 para el día
const matchers = regex.exec('2022-01-02'); //interpreta el formato del regex y compara
console.table(matchers); //Permite capturar grupos del regex

/*output:
┌─────────┬──────────────┐
│ (index) │ Values │
├─────────┼──────────────┤
│ 0 │ '2022-01-02' │
│ 1 │ '2022' │
│ 2 │ '01' │
│ 3 │ '02' │
│ index │ 0 │
│ input │ '2022-01-02' │
│ groups │ undefined │
└─────────┴──────────────┘
*/

• Dentro de la carpeta es9, crear el archivo llamado: 01-spread.js
- - ◦ El código queda:

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

//Ejercicio #1
const user = {username: 'gndx', age: 34, country: 'CO'};
const{ username, ...values} = user; //A values se le asigna todo lo que está después de username
console.log(username);
console.log(values);

/*output:
gndx
{ age: 34, country: 'CO' }
*/

Alejandro Ramos

student•

PEROQUEEESESTO

const regex = /(\d{4})-(\d{2})-(\d{2})/;

JOSE DAVID OROZCO CASTAÑEDA

student•

Este código crea una expresión regular que busca una cadena de texto que tenga el formato de fecha AAAA-MM-DD, donde A es un dígito para el año, M es un dígito para el mes y D es un dígito para el día.

La expresión regular se define como /(\d{4})-(\d{2})-(\d{2})/, lo que significa lo siguiente:

(\d{4}) busca cuatro dígitos consecutivos que representan el año y los captura en un grupo de captura (el paréntesis).

busca un guion literal. (\d{2}) busca dos dígitos consecutivos que representan el mes y los captura en otro grupo de captura.
busca otro guion literal. (\d{2}) busca otros dos dígitos consecutivos que representan el día y los captura en un tercer grupo de captura. Luego, se llama al método exec en la expresión regular con la cadena de texto "2022-01-01" como argumento. Esto busca la cadena de texto en busca de una coincidencia con el patrón de la expresión regular y devuelve un array con la cadena de texto coincidente y los grupos de captura. En este caso, el array resultante será [ "2022-01-01", "2022", "01", "01" ], donde el primer elemento es la cadena de texto coincidente y los siguientes tres elementos son los grupos de captura correspondientes al año, mes y día.

Finalmente, se imprime la tabla de valores del array resultante utilizando console.table(matchers). Esto muestra el array como una tabla en la consola del navegador o del editor de código, lo que facilita la visualización de los valores capturados en los grupos de captura.

Porfirio González López

student•

Apunte en Notion

LINK: https://pogolo.notion.site/22-ES9-expresiones-regulares-fef1180ca16544e3a68d793d2ff6620d