No tienes acceso a esta clase

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

ES11: BigInt y Nullish

27/35
Recursos

Las siguientes caracter铆sticas de ES2020 o ES11 que aprender谩s son: nuevo tipo de dato bigint y operador Nullish Coalescing (??).

Big Int, enteros muy grandes

El nuevo dato primitivo bigint permite manejar n煤meros enteros muy grandes. Existen dos formas de crear un bigint: el n煤mero entero seguido de n o mediante la funci贸n BigInt

const number1 = 45n
const number2 = BigInt(45)

typeof 45n // 'bigint'

JavaScript tiene l铆mites num茅ricos, un m谩ximo Number.MAX_SAFE_INTEGER y un m铆nimo Number.MIN_SAFE_INTEGER.

const max = Number.MAX_SAFE_INTEGER
const min = Number.MIN_SAFE_INTEGER

console.log(max)  // 9007199254740991
console.log(min) // -9007199254740991

Despu茅s de los l铆mites, los c谩lculos muestran resultados err贸neos. Los bigint ayudan a manejar operaciones de enteros fuera de los l铆mites mencionados.

const increment = 2
const number = Number.MAX_SAFE_INTEGER + increment
const bigInt = BigInt(Number.MAX_SAFE_INTEGER) + BigInt(increment)

console.log(number) // 9007199254740992
console.log(bigInt) // 9007199254740993n

Se a帽ade la misma cantidad a ambos tipos de datos, sin embargo, el tipo num茅rico da un resultado diferente al esperado.

Operador Nullish Coalescing

El operador nullish coalescing (??) consiste en evaluar una variable si es undefined o null para asignarle un valor.

El siguiente ejemplo se lee como: 驴usuario.name es undefined o null? Si es as铆, as铆gnale un valor por defecto "Andres", caso contrario asigna el valor de usuario.name.

const usuario1 = {}
const nombre1 = usuario1.name ?? "Andres"

const usuario2 = {name: "Juan"}
const nombre2 = usuario2.name ?? "Andres"

console.log(nombre1) // 'Andres' 
console.log(nombre2) // 'Juan'

Diferencia entre el operador OR y el Nullish coalescing

El operador OR (||) eval煤a un valor falsey. Un valor falsy es aquel que es falso en un contexto booleano, estos son: 0, "" (string vac铆o), false, NaN, undefined o null.

Puede que recibas una variable con un valor falsy que necesites asignarle a otra variable, que no sea null o undefined. Si eval煤as con el operador OR, este lo cambiar谩, provocando un resultado err贸neo.

const id = 0

const orId = id || "Sin id"
const nullishId = id ?? "Sin id"

console.log( orId ) //  'Sin id'
console.log( nullishId ) // 0

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

Aportes 31

Preguntas 14

Ordenar por:

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

o inicia sesi贸n.

L铆mites num茅ricos en JavaScript

馃搹 JavaScript tiene l铆mites num茅ricos, un m谩ximo Number.MAX_SAFE_INTEGER y un m铆nimo Number.MIN_SAFE_INTEGER. Fuera de estos l铆mites, los c谩lculos matem谩ticos pueden fallar y mostrar resultados err贸neos. Con BigInt esto se resuelve.
.

Diferencia entre el operador OR y el Nullish coalescing

馃敤 El operador OR (||) eval煤a un valor falsey. Un valor falsy es aquel que es falso en un contexto booleano, estos son: 0, "" (string vac铆o), false, NaN, undefined o null.
.
Puede que recibas una variable con un valor falsy que necesites asignarle a otra variable, que no sea null o undefined. Si eval煤as con el operador OR, este lo cambiar谩, provocando un resultado err贸neo.

const id = 0

const orId = id || "Sin id"
const nullishId = id ?? "Sin id"

console.log( orId ) //  'Sin id'
console.log( nullishId )  // 0

Hola Chic@s 馃槂

ES11:

  • N煤meros grandes
const aBigNumber = 8907245920742093847n;
const anotherBigNumber = BigInt(8907245920742093847);
console.log(aBigNumber);
console.log(anotherBigNumber);
  • Valor nulo
const anotherNumber = null;
const validate = anotherNumber ?? 5;
console.log(validate);

En mi caso si me ha tocado trabajar con BigInt en proyectos reales. En el sector financiero, en especial en el caso de Colombia, se manejan cifras muy altas que al representar en n煤meros normales y realizar operaciones con ellos pueden causar errores de precisi贸n. Es importante tener en cuenta que existe este recurso.

Esta clase me hizo recordar a este genial v铆deo:
why you NEED math for programming

Diferencias entre Or operator y Nullish Coalecing

Or operator: Retorna el valor a la derecha si la expresi贸n de la izquierda es FALSY (0, 鈥溾, false, NAN, undefined, null)

Nullish coalecing: retorna el valor a la dera si la expresi贸n es null o undefined

驴y cu谩l ser铆a un nombre correcto a las variables o funciones?

Muy importante, lo que dice el maestro Oscar, en 茅l minuto 4. Sobre los nombres de las variables y no nomas con las variables sino tambi茅n con funciones, m茅todos, clases.

saludos!!

SE PUEDE REGISTRAR CUALQUIER VALOR YA SEA STRING, VALUE O BOOLEAN PARA QUE NOS REMPLACE EL ERROR

EJEMPLO:

string:

const anotheNumber = null;
const value = anotheNumber ?? 鈥渆rror鈥;
console.log (value);

boolean:

const anotheNumber = null;
const value = anotheNumber ?? true;
console.log (value);

鉁掞笍 Archivos del Proyecto 鉁掞笍


Pasos 馃搶

  • 鈥 Dentro de la carpeta es11, crear el archivo llamado: 01-bigint.js
      • 鈼 El c贸digo queda:
//Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1
const aBigNumber = 8907245920742093847n;
const anotherBigNumber = BigInt(8907245920742093847);

console.log(aBigNumber);
console.log(anotherBigNumber);

/*output:
8907245920742093847n
8907245920742093824n
*/

  • 鈥 Dentro de la carpeta es11, crear el archivo llamado: 02-nullish.js
      • 鈼 El c贸digo queda:
          //Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1
const anotherNumber = 1;
const validate = anotherNumber ?? 5; //valida si anotherNumber tiene valor num茅rico

console.log(validate);

/*output:
1
*/

//Ejercicio #2
const anotherNumber2 = null;
const validate2 = anotherNumber2 ?? 5; //como anotherNUmber2 es null, imprime la opci贸n 5

console.log(validate2);

/*output:
5
*/

馃憖 OJO con el par谩metro que env铆es al constructor BigInt()
.
Seguramente habr谩s notado que, en el ejemplo que us贸 Oscar para el BigInt(), el n煤mero mostrado en consola era diferente del que ingres贸 inicialmente. Esto ocurre porque el par谩metro que estamos enviando es de tipo entero (Un tipo de dato con un n煤mero m谩ximo representable), por lo tanto, si enviamos un n煤mero superior o igual a 2^53, ocurrir谩 un overflow, y BigInt() convertir谩 un n煤mero truncado (Es decir, que va a recibir un n煤mero acortado, que s铆 sea representable como un n煤mero en javascript).
.
Para evitar este error, puedes enviar un par谩metro de tipo String a BigInt(), la conversi贸n de string a entero se har谩 autom谩ticamente.

const bigNumber = BigInt(12345678910111213141516171819202122232425262728);
//Va a retornar 12345678910111213097881710055583854587371585536n, cuando esperabamos que retornara un n煤mero terminado en 28

const AnotherBigNumber = BigInt("12345678910111213141516171819202122232425262728");
//Ac谩 no va a ocurrir ning煤n problema ;)

Dato importante para 鈥淣ULLISH鈥

En JavaScript, el operador 鈥渘ullish鈥 (??) es un operador de coalescencia de valores nulos que se introdujo en la versi贸n ECMAScript 2020. Este operador permite comprobar si un valor es nulo o indefinido antes de asignar un valor por defecto.

El operador 鈥渘ullish鈥 funciona de la siguiente manera: si el operando a la izquierda es null o undefined, entonces se devuelve el operando de la derecha. De lo contrario, se devuelve el operando de la izquierda.

Este operador es 煤til en situaciones en las que se quiere evitar asignar valores por defecto a una variable que ya tiene un valor, incluso si ese valor es 0,"", false u otro valor que sea considerado como 鈥渇also鈥.

Aqu铆 hay un ejemplo de c贸mo se puede usar el operador 鈥渘ullish鈥 en JavaScript:

let value = null;
let defaultValue = 'Default Value';
let result = value ?? defaultValue;
console.log(result); // Output: "Default Value"

En este ejemplo, como value es null, se devuelve defaultValue. Si value hubiera sido 0, 鈥樷, false u otro valor que sea considerado como 鈥渇also鈥, el resultado habr铆a sido value en lugar de defaultValue.

ES11: BigInt y Nullish


Aqu铆 tienes informaci贸n sobre las caracter铆sticas 鈥淏igInt鈥 y 鈥淣ullish coalescing鈥 introducidas en ECMAScript 2020 (ES11):

  1. BigInt:

    En ECMAScript 2020, se introdujo el tipo de dato primitivo 鈥淏igInt鈥. Un 鈥淏igInt鈥 es un tipo num茅rico que puede representar enteros con una precisi贸n arbitrariamente grande. Esto resuelve el problema de desbordamiento que puede ocurrir con el tipo de dato 鈥淣umber鈥 cuando se manejan n煤meros extremadamente grandes o precisos. Para crear un 鈥淏igInt鈥, simplemente agrega 鈥渘鈥 al final de un n煤mero literal o utiliza la funci贸n constructora 鈥淏igInt()鈥:

    const numeroNormal = 123456789012345678901234567890; // Number
    const numeroGrande = 123456789012345678901234567890n; // BigInt
    
    console.log(typeof numeroNormal); // "number"
    console.log(typeof numeroGrande);  // "bigint"
    


    El uso de 鈥淏igInt鈥 es especialmente 煤til en c谩lculos que involucran n煤meros muy grandes, como operaciones criptogr谩ficas o matem谩ticas de alta precisi贸n.


  2. Nullish Coalescing:

    La operaci贸n de 鈥渘ullish coalescing鈥 (en espa帽ol, 鈥渇usionar nulo鈥) se introdujo en ES11 como una forma de proporcionar un valor de respaldo cuando se encuentra un valor 鈥渘ull鈥 o 鈥渦ndefined鈥, pero no cuando se encuentra un valor falsy (como 0 o ''). El operador de fusi贸n nula ?? se utiliza para esto.

    const valor1 = null;
    const valor2 = undefined;
    const valor3 = 0;
    
    const valorFinal1 = valor1 ?? 'Valor de respaldo'; // 'Valor de respaldo'
    const valorFinal2 = valor2 ?? 'Valor de respaldo'; // 'Valor de respaldo'
    const valorFinal3 = valor3 ?? 'Valor de respaldo'; // 0
    


A diferencia del operador de coalescencia ||, que considera valores falsy como valores nulos y proporciona el valor de respaldo, el operador de fusi贸n nula ?? solo considera nulos y undefined como valores para activar el valor de respaldo.

Estas dos caracter铆sticas, 鈥淏igInt鈥 y 鈥淣ullish coalescing鈥, son parte de las mejoras introducidas en ECMAScript 2020 para hacer que JavaScript sea m谩s vers谩til y seguro en diferentes contextos y situaciones de programaci贸n.

Espero sea de utilidad. 馃懆鈥嶐煉

煤til saberlo 馃槃

Apuntes 馃崕

BigInt

BigInt los valores representan valores num茅ricos que son demasiado grande ser representado por el number primitivo.

const aBigNumber = 41908412948132n;
const anotherBigNumber = BigInt(41908412048132);
console.log(aBigNumber);
console.log8(anotherBigNumber);
//

Nullish

console.log(validate);
//ouput: 12

const anotherNumber2 = null;
const validate2 = anotherNumber2 ?? "no hay ningun numero";
console.log(validate2);
//ouput: "no hay ningun numero"
 

documentacion :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt

Es importante tambi茅n decir que el par谩metro que se le pasa a BigInt en este caso sigue siendo un "number" normal, por lo que antes de llamar al constructor de BigInt, si el par谩metro del constructor es mayor a `Number.MAX_SAFE_INTEGER` y no se le coloca la "n" al final, fallar谩 la presici贸n de todas formas. Por lo que se recomienda utilizar la n al final si sabes que vas a utilizar n煤meros muy grandes. Es por esto que hay dos d铆gitos distintos al final de los n煤meros que imprimi贸 Oscar

9 007 199 254 740 991 = 2^53

Hagan lo prueba con una calculadora.

Amigos, si tienen duda sobre el porque los valores del BigInt son distintos, revisen el link de stackoverflow que algui茅n puso en la secci贸n de preguntas.

JavaScript tiene l铆mites num茅ricos, un m谩ximo y un m铆nimo.
Despu茅s de los l铆mites, los c谩lculos muestran resultados err贸neos. Los bigint ayudan a manejar operaciones de enteros fuera de los l铆mites mencionados.
Se a帽ade la misma cantidad a ambos tipos de datos, sin embargo, el tipo num茅rico da un resultado diferente al esperado.

const nullValue = null;
const emptyText = 鈥溾; // falsy
const someNumber = 42;

const valA = nullValue ?? 鈥渄efault for A鈥;
const valB = emptyText ?? 鈥渄efault for B鈥;
const valC = someNumber ?? 0;

console.log(valA); // "default for A"
console.log(valB); // 鈥溾 (ya que la cadena vac铆a no es nula ni indefinida)
console.log(valC); // 42

este no se si estara bien

La diferencia es que en el primer ejemplo, se est谩 utilizando la sintaxis literal de BigInt, que consiste en agregar una letra 鈥渘鈥 al final del n煤mero, mientras que en el segundo ejemplo se est谩 utilizando la funci贸n BigInt() expl铆citamente. Ambos m茅todos son equivalentes y producir谩n el mismo resultado.

Los validadores de nullish son utiles para cuando nos llega un valor y queremos saber si no llega algo para entonces asignar un valor Ej: ```
let num = null; console.log(num ?? 1)

const aBigNumber = 99999999888888777777n;

const aBigNumberDos = BigInt(99999999888888777777);

console.log(aBigNumber);
console.log(aBigNumberDos);
//99999999888888777777n
//99999999888888774656n

Una desventaja del bigInt().

Mi resumen:

En ES11 se agreg贸 dos nuevas caracter铆sticas:

  • el tipo de dato bigint y el operador Nullish Coalescing
    El bigint es un tipo de dato primitivo que permite manejar n煤meros enteros muy grandes. Es 煤til para realizar operaciones matem谩ticas con n煤meros que superen los l铆mites m谩ximos y m铆nimos permittidos por JavaScript. Para crear un bigint puede utilizar un n煤meros entero seguido de la letra 鈥渘鈥 o la funci贸n BigInit.
    Por otro lado, el operador Nullish Coalescing (??) eval煤a si una variable es undefined o null y asigna un valor por edfecto si lo es. El 煤til para asignar valores predeterminados a variables que pueden estar indefinidas o nulas. Este operador difiere el operador OR, ya que solo asigna un valor predeterminado si la variable es estrictamente igual a undefined o null, y no cuando es un valor falsy.
    BigInt
const number1 = 45n;
const number2 = BigInt(45);

typeof 45n // 'bigint'

const max = Number.MAX_SAFE_INTEGER;
const min = Number.MIN_SAFE_INTEGER;

console.log(max)  // 9007199254740991
console.log(min) // -9007199254740991

const increment = 2;
const number = Number.MAX_SAFE_INTEGER + increment;
const bigInt = BigInt(Number.MAX_SAFE_INTEGER) + BigInt(increment);

console.log(number) // 9007199254740992
console.log(bigInt) // 9007199254740993n

Operador Nullish Coalescing

const usuario1 = {};
const nombre1 = usuario1.name ?? "Andres";

const usuario2 = {name: "Juan"};
const nombre2 = usuario2.name ?? "Andres";

console.log(nombre1); // 'Andres' 
console.log(nombre2); // 'Juan'

const id = 0;

const orId = id || "Sin id";
const nullishId = id ?? "Sin id";

console.log(orId); // 'Sin id'
console.log(nullishId); // 0

estos n煤meros muy grandes con BigInt podr铆an ser muy 煤tiles para generar IDs con una longitud muy grande en bases de datos NoSQL con Node.js y MongoDB

Es preciso mencionar que:

Un 鈥淏igInt鈥 es un tipo de datos que representa un n煤mero entero de tama帽o arbitrario, es decir, un n煤mero que puede ser mayor que 2^53 - 1, que es el tama帽o m谩ximo que puede representar un n煤mero 鈥淣umber鈥 en JavaScript. Esto permite manejar n煤meros de un tama帽o mucho mayor con precisi贸n, lo que es 煤til en situaciones donde se requiere trabajar con n煤meros muy grandes.

Para crear un BigInt, se debe agregar un n煤mero n a la sufijo 鈥渘鈥. Por ejemplo:

const bigIntValue = 12345678901234567890n;

Es importante destacar que BigInt no es compatible con operaciones aritm茅ticas comunes con n煤meros 鈥淣umber鈥. Para realizar operaciones aritm茅ticas con BigInt, se deben usar las funciones espec铆ficas para BigInt. Por ejemplo:

const bigIntA = 12345678901234567890n;
const bigIntB = 9876543210n;
const result = bigIntA + bigIntB;

BigInt - Venezuela ha entrado al chat.

Y si hago

const anotherNumber = 3 || 5;

驴no funcionar铆a? 驴o hasta que punto funcionar铆a?

|| Vs ??

Nullish coalecing (??): Retorna el valor a la deracha solo si la expresi贸n es null o undefined
Or operato (||): Retorna el valor a la derecha si la expresi贸n de la izquierda es FALSY: 0, ""(str vac铆o), false, NaN, undefined, null.

La particularidad de ||, OR es porque (seg煤n yo)

Esto sucede porque OR es para booleanos y en estos casos siempre es preferible aceptar un valor que sea true: 1, -1, "ola", " "(string), true.

Compru茅balo tu mismo, es baste f谩cil cambiar los valores aqu铆.

const anotherNumber = null;
const validate = anotherNumber ?? 5;
console.log(validate);