Null y Undefined

Nullish coalescing operator (??) VS logical OR operator (||)

La gran diferencia entre estos dos es que el logical OR operator (||) toma como valores falsos a 0, NaN, strings vacíos ("", '', ``), false, a demás de null y undefined, mientras que nullsh coalescing operator tomo como valores falso solamente a null y undefined.

En el caso de las funciones se ejecuta la misma, realizan todos los cálculos que tienen que hacer, pero ambos operadadores ?? y || únicamente se fijan en lo que retorna dichas funciones.
En el caso del ejemplo del profesor veo más factible utilizar nullish coalescing operator en vez de logical OR operator.

function hiV2 (name: string | null) {
        ...
        hello += name?.toLowerCase() ?? 'nobody';
        ...
}

Fuentes:

Nullish coalescing operator (??)

Logical OR operator (||)

El Optional chaining o encadenamiento opcional no solo se puede usar con null, sino también con undefined.

A su vez se puede usar también con funciones de la siguiente forma:

let result = someInterface.customMethod?.();

Fuente:

Me pareció interesante ya que no recuerdo haberlo visto hasta ésta parte de la escuela de Desarrollo.

el Optional chaining lo uso mucho cuando trabajo con apis cuya respuesta tarda. Como durante unos milisegundos no esta definido lo que traigo de la api, evito que absolutamente toda la pagina me quede en blanco y me aparezca el error por consola

también se puede utilizar para un operador ternario

var miEdad = 24;
var mayorEdad = (miEdad > 18) ? “Sí, eres mayor de edad” : “No, sigue intentando”;

Aqui esta la url del github en la rama de esta clase:
https://github.com/platzi/curso-typescript-fundamentos/tree/14-step

Les comparto mis apuntes. 😄

¿Son tipos de datos?

Si, null y undefined son tipos de datos, pero ambos son diferentes.

let variableName: null = null;
let variableName: undefined = undefined

Null y undefined como valores

No se le puede asignar como valor a estos dos a otros tipos de datos que no sean undefined y null.

let variableName: number = null // Error

En caso de usemos simplemente el tipo inferido y coloquemos como valor null o undefined la variable pasaría a ser de tipo any.

Tipo de dato null y undefined

Ambos pueden ser utilizados como tipos de datos, pero solo pueden tener como valor su mismo tipo de dato.

let variableName: null = null;
let variableName: undefined = undefined

Usar null y undefined con otros tipos

Podemos usarlos a estos, pero tenemos que aclarar su uso al momento de colocar los tipos de datos.

let variableName: number | null = null;

(()=>{
//TypeScript
let myVar =null; //Tipo any
let otherVar =undefined; //Tipo any

let myNull:null =null; // Tipo null
let myUndefined:undefined =undefined; //Tipo undefined

let myNumber: number |null =null;
myNumber = 50;

let myString: string |undefined =undefined;
myString = "Hola TypeScript";

function hi(name: string | null){
  let hello = "Hola ";
  if (name) {
    hello+=name;
  } else {
    hello+= "nobody";
  }
  console.log(hello);
}
hi('Fabio');
hi(null);
function hi2(name: string | null){
  let hello = "Hola ";
  hello+=name?.toLowerCase() || "nobody";
}
hi2('Fabio');
hi2(null);
})();

Creo que es una buena opcion usar el Optional chaining con typescript porque lo terminara copilando a un codigo de ECMAScript 6 o otro menor. Pero usarlos con JS no creo que se a buena opcion si se tiene un puclico un poco grande.

Una vez un amigo tuvo un problema con el, desarrollo una app y no funcionaba en dispositivos apple viejitos y el Optional Chanining fue el que hacia que se rompira la app.
Para evitar eso siempre es bueno usar el buen can i use

No va al caso con la clase, pero me parece más legible hacer una ternary expression (?) en vez de un optional chaining:

hello += name ? name.toLowerCase() : "nobody";

Es un poquito más larga, pero personalmente la entiendo más rápido.

Y había utilizado el optional chaining (aunque realmente no sabía que se llamaba así) en react y javascript normal como si fuera una validación, al mapear un componente, por ejemplo si recibo un array de productos y deseo mapearlo para crear componentes card, te evita que todo se rompa si por algún motivo te llegara un null o undefined en lugar de un array.

{/* Ahora debemos mapear currentPokemons */}
            <div className={styles.grid}>
              {currentPokemons?.map((pokemon) => {
                return (
                  <Card
                    name={capitalizeString(pokemon.name)}
                    img={pokemon.img}
                    types={pokemon.types}
                    key={pokemon.id}
                    id={pokemon.id}
                    create={pokemon.createInDb}
                  />
                );
              })}
            </div>

Tambien es practico hacer uso del Nullish coalescing.

• Documentacion de MDN

uso mucho el optional chaining cuando armo componentes con react/redux. {
estado?.map(estado=> <Componente prop={estado} />)
}
(algo asi, obviando la key del componente para el ejemplo y algunas cositas mas especificas

Le pregunté a ChatGPT sobre los valores nulos en objetos

.
In TypeScript, you can use the null value to indicate that an object is intentionally empty. By default, the type Object does not allow the value null, but you can use the --strictNullChecks compiler flag to change this behavior.

For example:

let obj: object = null;  // Error without --strictNullChecks

With the --strictNullChecks flag enabled, this code will produce an error because the type object does not allow the value null.

To allow the value null for an object, you can use the union type object | null:

let obj: object | null = null;  // Ok with --strictNullChecks

This declares a variable obj that can be either an object or the value null.

You can also use the null type to explicitly allow only the value null:

let obj: null = null;  // Ok with --strictNullChecks

This declares a variable obj that can only be the value null.
.
Cabe aclarar que con el flag --strictNullChecks en false también podríamos asignarle null a cualquier tipo de variable.

Optional chaining =>
hello += name?.toLowerCase() || ‘nobody’

El ? despues de una variable es como un IF, o mas bien como un &&
si name? es un string entonces hace el toLowerCase, sino te tira undefined

También se podría hacer lo mismo con ??:

function hola(nombre: string | undefined) {
  let hi:string = "Hola ";
  hi += nombre ?? "nadie"
  console.log(hi)
}
hola("Cris")
hola()

y recordar que cuando no pasamos un parametro a una función esta lo considera como undefined

✅

Este operador es similar a lo que se nombra en otros lenguajes de desarrollo como el NullSafe, por ejemplo en dart, o Kotlin se suelen usar mucho.

No sabia del los optional strings, y ojala lo hubiese sabido en serio, hago flashback y pude haberlo usado en diferentes ocasiones jaja.
Otra increíble clase de este curso💚

Interesante el operado de Optional chaining, la verdad este curso me está enseñando muchísimas cosas nuevas. Eternamente agradecido!

yo lo he usado en dart, me parece genial que este en typescript… es muy comodo 😃

Este operador es excelente cuando hacemos llamados a APIs, a mí me ha sido de mucha utilidad en múltiples ocasiones.

se me ocurre que si es null mostrar el loader hasta que se valide el componente y se muestre el dato

Ese ? seria el equivalente mejor conocido como un ternario en otros lenguajes

Utilizó un operador ternario en vez de un if

En mi caso utilizo el optional chaining cuando hago peticiones y en llegado caso que defina una variable con algo que viene en esa peticion y no llega utilizo el optional para no hacer ifs, y ademas me ahorro errores

optional chaining funciona similar en otros lenguages incluyendo swift

Realicé una adicción al proyecto! en este caso validé si la entrada era string, el programa capitalizara la palabra, es decir; si la entrada es “paula” mostrara “hola Paula” y adicionalmente le añadí el tecto ¿cómo estas? pero que este solo se muestre siempre y cuando el valor ingresado no fuese nulo
(()=>{
// let myNumber: number;
// let myString: string;
let myNull: null = null;
let myUndefined: undefined=undefined

let myNumber: number | null = null;
myNumber = 50;

let myString: string | undefined = undefined;
myString = “Hola TypeScript”;

function hi(name: string | null){
let hello = 'Hola ';
if(name){
hello += name;
}else{
hello += ‘nobody’;
}
console.log(hello);

}
function hiV2(name: string | null){
let hello = 'Hola ';
let howu = ‘, ¿Cómo estás?’;
if(name){
name = name[0].toUpperCase() + name.slice(1);
hello += name ;
console.log(hello, howu);
}else{
hello += ‘nobody’ ;
console.log(hello);
}

// hello += name?.toLowerCase() || 'nobody';
// console.log(hello, howu);

}
hi(‘Nicolas’);
hi(null);

hiV2(‘paula’);
hiV2(null);
})();

Resultado![

PS D:\Users\User\Documents\cursoTypeScript\ts-project> node .\dist\11-undefined-null.js
Hola Nicolas
Hola nobody
Hola Paula , ¿Cómo estás?
Hola nobody

El optional chaining es una gran opción para manejar menos código

Es muy útil cuando creas funciones de consumo de API. Para las funciones asíncronas sirve para el performance de la función pues muchas veces estás esperando que los datos sean recibidos

Optional chaining en Developer Mozilla

primera vez en la vida que escucho sobre el optional chaining, solo habia visto los parametros opcionales en TS pero no que era nativo de JS

Aquivalencias en el código:

if (name) {
    hello += name.toLowerCase();
} else {
    hello += 'nobody';
}

hello += name?.toLowerCase() || 'nobody';

hello += name ? name.toLocaleLowerCase() : 'nobody'