No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

12 Días
20 Hrs
31 Min
3 Seg

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 32

Preguntas 14

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

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

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

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

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

¿y cuál sería un nombre correcto a las variables o funciones?

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.

ES11: BigInt y Nullish


Aquí tienes información sobre las características “BigInt” y “Nullish coalescing” introducidas en ECMAScript 2020 (ES11):

  1. BigInt:

    En ECMAScript 2020, se introdujo el tipo de dato primitivo “BigInt”. Un “BigInt” 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 “Number” cuando se manejan números extremadamente grandes o precisos. Para crear un “BigInt”, simplemente agrega “n” al final de un número literal o utiliza la función constructora “BigInt()”:

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


    El uso de “BigInt” 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 “nullish coalescing” (en español, “fusionar nulo”) se introdujo en ES11 como una forma de proporcionar un valor de respaldo cuando se encuentra un valor “null” o “undefined”, 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, “BigInt” y “Nullish 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. 👨‍💻

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 ?? “error”;
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
*/

Dato importante para “NULLISH”

En JavaScript, el operador “nullish” (??) 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 “nullish” 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 “falso”.

Aquí hay un ejemplo de cómo se puede usar el operador “nullish” 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 “falso”, el resultado habría sido value en lugar de defaultValue.

ú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

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.

```js const anotherNumber = 1; const validatedNumber = anotherNumber ?? 5; console.log(validatedNumber); output 1// Porque? porque en el proceso de validacion el cod, si muestra un valor numerico const anotherNumber = null; const validatedNumber = anotherNumber ?? 5; console.log(validatedNumber); //output 5 //En este caso el valor que nos muestra es el resultado de la variable que declaramos el proceso para validar ya que en el proceso si encuentra un type Null en la variable ```*const anotherNumber = 1*;*const validatedNumber =* anotherNumber  *?? 5*;*console*.*log*(validatedNumber);

const nullValue = null;
const emptyText = “”; // falsy
const someNumber = 42;

const valA = nullValue ?? “default for A”;
const valB = emptyText ?? “default 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 “n” 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 “n” 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 “BigInt” 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 “Number” 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 “n”. Por ejemplo:

const bigIntValue = 12345678901234567890n;

Es importante destacar que BigInt no es compatible con operaciones aritméticas comunes con números “Number”. 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);