You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
18 Hrs
57 Min
21 Seg

ES11: BigInt y Nullish

27/35
Resources

The next features of ES2020 or ES11 that you will learn are: new bigint data type and Nullish Coalescing (??) operator.

Big Int, very large integers

The new bigint data primitive allows you to handle very large integers. There are two ways to create a bigint: the integer followed by n or by the BigInt function

const number1 = 45nconst number2 = BigInt(45)typeof 45n // 'bigint'.

JavaScript has numeric limits, a maximum Number.MAX_SAFE_INTEGER and a minimum Number.MIN_SAFE_INTEGER.

const max = Number.MAX_SAFE_INTEGERconst min = Number.MIN_SAFE_INTEGERconsole.log(max) // 9007199254740991console.log(min) // -9007199254740991

After the limits, the calculations show erroneous results. The bigint helps to handle integer operations outside the mentioned limits.

const increment = 2const number = Number.MAX_SAFE_INTEGER + incrementconst bigInt = BigInt(Number.MAX_SAFE_INTEGER) + BigInt(increment)console.log(number) // 9007199254740992console.log(bigInt) // 900719925254740993n

The same amount is added to both data types, however, the numeric type gives a different result than expected.

Nullish Coalescing Operator

The nullish coalescing (??) operator consists of evaluating a variable if it is undefined or null to assign it a value.

The following example reads as: is user.name undefined or null? If so, assign it a default value "Andres", otherwise assign the value of user.name.

const user1 = {}const name1 = user1.name ?? "Andres"const user2 = {name: "Juan"}const name2 = user2.name ?? "Andres"console.log(name1) // 'Andres' console.log(name2) // 'Juan'.

Difference between the OR operator and the Nullish coalescing operator

The OR operator(||) evaluates a falsy value. A falsy value is one that is false in a boolean context, these are: 0, "" (empty string), false, NaN, undefined or null.

You may receive a variable with a falsy value that you need to assign to another variable, other than null or undefined. If you evaluate with the OR operator, it will change it, causing an erroneous result.

const id = 0const orId = id || "No id"const nullishId = id ?? "No id"console.log( orId ) //' No id'console.log( nullishId ) // 0

Contribution created by Andrés Guano (Platzi Contributor).

Contributions 32

Questions 14

Sort by:

Want to see more contributions, questions and answers from the community?

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

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

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

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

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