ES7: exponentiation operator y array includes

Includes, pero en objetos

🔗 En objetos también existen formas para saber si existe una propiedad. Estos son:

• La palabra reservada in
• El método de objetos hasOwnProperty
• El método Object.hasOwn, que recibe el objeto y la propiedad a evaluar.

const letras = { a: 1, b: 2, c: 3 }

"a" in letras // true
letras.hasOwnProperty("a") // true
Object.hasOwn(letras, "a") // true

.
Se diferencian en que in evalúa todas las propiedades del objeto y del prototipo.
.
El método hasOwnProperty evalúa solamente las propiedades del objeto. Sin embargo puede que colisione con alguna otra propiedad en el prototipo, por lo que la última versión de ECMAScript lanzó Object.hasOwn y se recomienda utilizar este si el navegador en el que trabajas lo soporta: Can I use?.

const letras = { a: 1, b: 2, c: 3 }

"toString" in letras // true
letras.hasOwnProperty("toString") // false
Object.hasOwn(letras, "toString") // false

Retomando el ejemplo que puse en la clase de spread operators, cual crees que sea el resultado de esto:

let familyEmoji = [..."👨‍👩‍👦‍👦"]
console.log(
	familyEmoji.includes("👨"),
	familyEmoji.includes("👩"),
	familyEmoji.includes("👦")
);

Respondelo y luego compruebalo en tu consola! 🤯

Hola Chic@s 😃

**ES7: **

• Exponentiation operator

const data = 3 ** 4;
console.log(data);

• Array includes

let numbers = [1, 3, 4, 6, 7, 8];
console.log(numbers.includes(9))

const list = ["oscar", "David", "Ana"]
console.log(list.includes("Oscar"))

Por si a alguno le quedo la duda hice el ejercicio para pasar a lowercase el array usando .map 😃 (No se si .map salio en una nueva version mas adelante de la es7, pero pueden ver el curso de arrays de platzi de la ruta de JS! Ahi los explican muy bien!)

const list = ["Oscar", "Pedro", "Jose"];
const newList = list.map(item => item.toLowerCase());
console.log(newList);
console.log(newList.includes('oscar'));

Asignación de potencia

🎈 También puedes utilizar el operador de potencia para volver a asignar un valor a una variable.

let a = 3

a = a ** 2 // 9
// lo mismo que
a **= 2 // 9

“no hay tanto inconveniente, imaginemos que esto es algo que de alguna manera estamos teniendo, y ahora queremos hacer algo, en este caso queremos preguntar si está ahí.” Esto es tan ambiguo, sería mejor si llamas a cada cosa por su nombre específicamente, así sabremos de qué estas hablando.

18/35 ES7: exponentiation operator y array includes

En ECMAScript 2016 o ES7 se imprementaron dos característica como lo son:

• el opertador de potenciación
• el metodo includes para arrays y strings

El operador de potenciación se utiliza para elevar una base a un exponente utilizando el doble asterísco (**), mientras que el método includes se utiliza para determinar si un array o string incluye un elemento específico, devolviendo true o false según sea el caso.

En este método recibe dos argumentos: el elemento a comparar y el índice inicial desde donde comparar hasta el último elemento. Los índices positivos comienzan desde 0 hasta la longitud total menos uno, de izquierda a derecha del array, mientras que los índices negativos comienzan desde -1 hasta el negativo de la longitud total del array, de derecha a izquierda.

// Operador de potenciación
const cubo = 2**3; // 8
const raizCuadrada = 16**(1/2); // 4

// Método includes con arrays
const frutas = ['manzana', 'pera', 'uva'];
const tieneManzana = frutas.includes('manzana'); // true
const tieneSandia = frutas.includes('sandia'); // false
const desdeIndice1 = frutas.includes('pera', 1); // true
const desdeIndice2 = frutas.includes('manzana', 2); // false

// Método includes con strings
const saludo = 'Hola mundo';
const tieneHola = saludo.includes('Hola'); // true
const tieneMundo = saludo.includes('Mundo'); // false
const desdeIndice1 = saludo.includes('Hola', 1); // false
const desdeIndiceNegativo = saludo.includes('mundo', -5); // true

ES7: Operador de Exponenciación y Array Includes

Vamos a ver estas implementaciones en ES7, que son más faciles de leer en nuestro código.

Operador de Exponenciación (**)

El operador de exponenciación (**), introducido en ES7, te permite elevar un número a una potencia de una manera más concisa y legible. Antes de la introducción de este operador, se solía realizar el cálculo de la potencia utilizando la función Math.pow(). Veamos un ejemplo comparativo:

// Antes de ES7
const resultadoAntes = Math.pow(2, 3); // 2 elevado a la 3, es decir, 8

// Con el operador de exponenciación en ES7
const resultadoAhora = 2 ** 3; // También es 8

Como puedes ver, el operador de exponenciación simplifica la sintaxis y hace que el código sea más directo.

Método “includes” en Arrays

Antes de ES7

Antes de la introducción del método includes en JavaScript, la forma más común de verificar si un elemento estaba presente en un arreglo era utilizando el método indexOf. El método indexOf devuelve el índice del primer elemento encontrado en el arreglo, y si no encuentra el elemento, devuelve -1. Podías utilizar esta característica para determinar si un elemento estaba en el arreglo o no. Aquí tienes un ejemplo:

const frutas = ["manzana", "banana", "pera", "naranja"];

const contieneBanana = frutas.indexOf("banana") !== -1; // Retorna true
const contieneSandia = frutas.indexOf("sandia") !== -1; // Retorna false

Este enfoque, aunque funcional, tenía algunas limitaciones. Primero, necesitabas comparar el resultado de indexOf con -1 para determinar si el elemento estaba presente o no, lo que podía ser menos intuitivo que simplemente obtener un valor booleano. Además, si necesitabas verificar si un elemento estaba en el arreglo varias veces, tenías que repetir el código de indexOf.

El método includes aborda estas limitaciones al proporcionar una sintaxis más clara y directa para verificar la presencia de elementos en un arreglo, sin la necesidad de comparar explícitamente con -1 y con una sola llamada al método.
\

Includes en ES7

El método “includes” es una forma conveniente de verificar si un elemento existe dentro de un arreglo. Retorna un valor booleano (true o false) basado en si el elemento se encuentra en el arreglo o no. Aquí tienes otro ejemplo:

const frutas = ["manzana", "banana", "pera", "naranja"];

const contieneBanana = frutas.includes("banana"); // Retorna true
const contieneSandia = frutas.includes("sandia"); // Retorna false

Este método es útil cuando necesitas saber si un valor en particular está presente en un arreglo sin tener que recorrer manualmente cada elemento del arreglo.

En resumen, el operador de exponenciación simplifica el cálculo de potencias en JavaScript, y el método “includes” te permite verificar fácilmente si un elemento se encuentra en un arreglo, mejorando la legibilidad y la eficiencia de tu código.

Espero sea de utilidad! 👨‍💻

Apunte en Notion

Link: https://pogolo.notion.site/15-ES7-exponentiation-operator-y-array-includes-6bc87642b97d479eb429759ebe8884cd

let numbers = [1,2,3,4,5,6,7,8,9,10,11,12];

console.log(numbers.includes(4)) // true
console.log(numbers.includes(445)) // false

let names = ['mike', 'oscar', 'DAVID']
console.log(names.includes('david')) // false

En JavaScript, también puedes usar el método .includes() para ver si una cadena (string) existe dentro de otra.

Código de ejemplo para el método .includes()

En este primer ejemplo tenemos una oración: “I love freeCodeCamp”. Queremos saber si la palabra “love” está incluida en esa oración.

En el código, str sería igual a la cadena “I love freeCodeCamp” y la palabra a buscar, contenida en search-string, sería “love”.

"I love freeCodeCamp".includes("love")

Dado que la palabra “love” sí está incluida dentro de la cadena str, entonces el código retorna el valor true.

Si llegaste hasta acá, vas por la mitad del curso. 😊 ¡No te rindas! 😎

🦄✨Un uso interesante

Que le podemos dar a includes() es el de comprobar si existe un elemento duplicado en un array.
Esto debido a la opción que nos da includes() de comprobar la existencia de un elemento a partir de una determinada posición. Ejemplo:
Supongamos que tenemos el array:

 const names = ['Cris', 'Juan', 'Pedro', 'Hermenehildo', 'Sazu', 'Pedro'];

Y deseo comprobar si el nombre de “Pedro” se encuentra repetido.
Puedo usar includes() con un argumento extra que indique a partir de que posición quiero realizar la búsqueda.

 console.log(names.includes('Pedro', 3)); //True

Comprobando así que el nombre de Pedro está duplicado.

ES7

Junio 2016, nueva actualizacion. Junto al ES6 tenemos cambios constantes.

Esta update agrega:

• Operador exponencial
• includes en un array

Operador Exponencial

Permite calcular la exponencial matematico (base ** exponente).

const data = 2 ** 3;
console.log("2**3 = ",data);

Includes in arrays

Permite trabajar con un array y saber si tiene un elemento. Es duro con los tipos y las minusculas y mayusculas.

let numbers = [1, 2, 3, 4, 5];

console.log('4? ',numbers.includes(4)); // 4? true
console.log('6? ',numbers.includes(6)); // 6? false

o sea que la funcion de includes es buscar algo si esta declarado en el array

📋 Archivos del Proyecto 📋

Pasos 📌

 
• Crear la carpeta: es7.
• Dentro de la carpeta es7, crear el archivo llamado: 00-exponential.js
◦ El código queda:

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

//Ejercicio #1
const data = 3**4;
console.log(data);

/*output:
81
*/

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

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

//Ejercicio #1
let numbers = [1, 3, 4, 6, 7, 8];

console.log(numbers.includes(4));

/*output:
true
*/

console.log(numbers.includes(9));

/*output:
false
*/

//Ejercicio #2
const list = ['Oscar', 'David', 'Ana'];

console.log(list.includes('Oscar'));

/*output:
true
*/

console.log(list.includes('oscar'));

/*output:
false
*/

Ahora solo falta la raíz incluida 😛

Mi resumen:

Resumen de la clase

Resumen de la clase en una imagen.

• Operador exponenciación

const miPow   = (base,potencia) => base**potencia;

Mis apuntes de las clases hasta ahora:

Links