ES9: expresiones regulares

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

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

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.

Para quien lo quiera copiar y pegar 😄

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

Por si quieren ver una un Padled, con bastante información sobre las regular expressions. Este fue creado en base al contenido de Modulo de expresiones regulares de ManzDev

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

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.

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’

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

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

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.

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:

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

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

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

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

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

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

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

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

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

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

1. 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"]

1. 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"

1. 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"

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

1. 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. 👨‍💻

Por aquí les dejo unos Apuntes.

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

📄 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' }
*/

PEROQUEEESESTO

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

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.

Apunte en Notion

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

Para quienquiera copiar y pegar el regex

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

🦄✨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

En muchas ocasiones nos encontraremos en la situación de querer realizar una o varias acciones si se cumple un determinado caso. Pero muchas veces, esos casos no son tan simples, sino que existe un número muy alto de situaciones diferentes que no podemos cubrir de formas tradicionales. En esas situaciones es donde las expresiones regulares quizás nos puedan ser de ayuda.

¿Qué es una RegExp?

Las expresiones regulares (a menudo llamadas RegExp o RegEx) son un sistema para buscar, capturar o reemplazar texto utilizando patrones. Estos patrones permiten realizar una búsqueda de texto de una forma relativamente sencilla y abstracta, de forma que abarca una gran cantidad de posibilidades que de otra forma sería imposible o muy extensa y compleja.

Estos patrones se representan mediante una cadena de texto, donde ciertos símbolos tienen un significado especial. Antes de explicar el significado de esos símbolos especiales, vamos a convertirlo en un ejercicio para verlo mejor.

Necesitamos detectar si un nombre empieza con las letras «p» o «s» y además termina con las letras «o» o «a». Es decir, necesitamos comprobar si se cumplen dos restricciones con dos posibilidades cada una.

Esto podríamos hacerlo de varias formas, por ejemplo:

• Extraer la primera y última letra y detectar los nombres que coinciden.
• Escribir una expresión regular que detecte los nombres que coinciden.

Vamos a plantear esto con código:

const names = ["Pedro", "Sara", "Miriam", "Nestor", "Adrián", "Sandro"];

// Comprobación sin usar expresiones regulares
names.forEach(function(name) {
  const firstLetter = name.at(0).toLowerCase();
  const lastLetter = name.at(-1).toLowerCase();

  if ((firstLetter === "p" || firstLetter === "s") && (lastLetter === "o" || lastLetter === "a")) {
    console.log(`El nombre ${name} cumple las restricciones.`);
  }
});

// Comprobación usando expresiones regulares
names.forEach(function(name) {
  const regex = /^(p|s).+(o|a)$/i;

  if (regex.test(name)) {
    console.log(`El nombre ${name} cumple las restricciones.`);
  }
});

Aunque aquí se puede apreciar un poco, imagina que ahora añadimos más restricciones: que los nombres puedan empezar por «r» y «t», que el nombre sea de longitud entre 5 y 8 carácteres, etc… Si son demasiados casos, probablemente, la forma sin expresiones regulares se volverá mucho más extensa y larga, mientras que con expresiones regulares se mantendrá más o menos igual de corta.

Aquí tienes un ejemplo de expresiones regulares en un escenario de validación de formularios en una aplicación web. Supongamos que tienes un formulario de registro de usuarios y quieres verificar si el campo de contraseña cumple con ciertos requisitos.

const passwordRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{8,}$/;
const passwordInput = document.getElementById('password');

passwordInput.addEventListener('input', function() {
  const password = passwordInput.value;
  const isValid = passwordRegex.test(password);

  if (isValid) {
    passwordInput.classList.remove('invalid');
    passwordInput.classList.add('valid');
  } else {
    passwordInput.classList.remove('valid');
    passwordInput.classList.add('invalid');
  }
});

En este ejemplo, hemos definido una expresión regular llamada passwordRegex que valida la contraseña del usuario con los siguientes requisitos:

Al menos una letra mayúscula ((?=.[A-Z])).
Al menos una letra minúscula ((?=.[a-z])).
Al menos un dígito ((?=.*\d)).
Longitud mínima de 8 caracteres (.{8,}).
Luego, hemos obtenido una referencia al campo de contraseña en el formulario mediante document.getElementById(‘password’).

A continuación, hemos añadido un evento input al campo de contraseña para que cada vez que el usuario escriba o modifique el contenido, se ejecute una función. Dentro de esta función, obtenemos el valor del campo de contraseña y comprobamos si cumple con el patrón definido en la expresión regular utilizando el método test().

Si la contraseña cumple con el patrón, se añade la clase CSS ‘valid’ al campo de contraseña, lo que podría usarse para mostrar un mensaje de retroalimentación visual o un icono de verificación. Si la contraseña no cumple con el patrón, se añade la clase CSS ‘invalid’, lo que podría usarse para mostrar un mensaje de error o un icono de advertencia.

Este ejemplo ilustra cómo se puede utilizar una expresión regular en JavaScript para validar y dar retroalimentación en tiempo real sobre la fortaleza de una contraseña en un formulario de registro de usuarios.

Mi resumen:

const user = {
    "name": "John",
    "lastname": "Doe",
    "proaccount": true
}
const disabled = {"proaccount":false}

//mezcla las propiedades, si tienen una propiedad en comun, la remplaza por el valor que tenga la propiedad en el segundo objeto
const update = {...user,...disabled}
console.log(update);

22/35 ES9: expresiones regulares

Las expresiones regulares son patrones de búsqueda y manipulación de cadenas de caracteres y en JavaScript se crean entre barras inclinadas (/patron/) y se utilizan métodos para hacer coincidir la búsqueda. Por otro lado, las propiedades de un objeto utilizando el spread operator y crear nuevos objetos a partir de otros.

Un ejemplo de uso de expresiones regulares en JavaScript es buscar una fecha en un texto con un patrón específico:

const objeto = { nombre: "Andres", age: 23, }; 
const usuario = { ...objeto, plataforma: "Platzi" }.

Sin embargo , es importante tener en cuenta que el operador de propagación solo crea copias en un solo nivel de profundidad y si hay objetos o arrays dentro de un objeto a copiar, los sub-elementos en cada nivel tendrán la misma referencia e la copia y en el original. En este caso, se tendría que utilziar el operador de propagación para cada elemento en cada nivel de profundidad o utilizar StructuredClone para crear una copia profunda.

Una mejor explicación del Rest Operator aquí

Notas de Regex!

// más detalle en : https://platzi.com/cursos/expresiones-regulares/
// para capturar en grupo, valores que se encuetran en una expresión regular

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

// es un manejo de fechas de año (4), mes(2), día(2)

// para validar el grupo de elementos, si cumple con estandar de regex

const matchers = regex.exec('2023-01-03');

//En lugar de utilziar console.log, utilizamos console.table para mostrar la información en formato de tabla

console.table(matchers);

// conesto podemos pasar por un valor o una validación que queramos hacer sobre el string
// para obtener un elemento y seguir avanzando

Para quien desee copiar y pegar la expresión regular: 😁

const regex = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const match = regex.exec('2022-12-23');

Pagina para generar y probar tus regex:

Regex101

Qué son las expresiones regulares o regExp - regEx?

En resumen, son una forma mas corta de escribir condiciones de un problema por medio de patrones que son representados por cadenas de texto donde algunos simbolos utilizados tienen un significado especial; de otra manera, el código sería mucho más extenso.

En el siguiente enlace puedes ampliar éste concepto. https://lenguajejs.com/javascript/regexp/expresiones-regulares/