Null y Undefined

Resumen

Estos dos funcionan como dos tipos de datos, al igual que, por ejemplo, string o number.

El tipo de datonull es para indicar un valor nulo y undefined para algo indefinido. Son tipos diferentes.

Null y Undefined como tipo Any

En TypeScript, si no especificamos que va a ser null o undefined, estos son inferidos como tipo any:

//TypeScript
let myVar = null; //Tipo any
let otherVar = undefined; //Tipo any

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

Union Types como emergencia

Hay casos en la que queremos que una variable sea de tipo string o number y que al inicializarlas sean de tipo null o undefined para luego asignarles un valor del tipo de dato de los primeros mencionados. En este contexto podríamos usar los Union Types:

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

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

Contribución creada por: Martín Álvarez.

Axel Enrique Galeed Gutierrez

student•

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

Carlos Rodríguez

student•

Es decir que si mandamos un string vacío entonces el ouput sera: "Hola" y nada más, creo que es mejor usar el logical OR operator (||)

Jair Israel Avilés Eusebio

student•

La desventaja de usar el operador logico OR es que podria evaluar de forma errada si el valor de la izquiera de la condicion es comparado con strings vacios o ceros numericos. En este caso si es mejor usar el operator nullish coalescing. Ejemplos para que quede mas claro a continuacion:

Usando operador OR retorna valores errados

console.log(12 || "not found") // 12
console.log(0  || "not found") // "not found"

console.log("javascript" || "not found") // "javascript"
console.log(""     || "not found") // "not found"

console.log(true  || "not found") // true
console.log(false || "not found") // "not found"

console.log(undefined || "not found") // "not found"
console.log(null      || "not found") // "not found"

Usando operador ?? retorna valores deseados

console.log(12 ?? "not found") // 12
console.log(0  ?? "not found") // 0

console.log("javascript" ?? "not found") // "javascript"
console.log(""     ?? "not found") // ""

console.log(true  ?? "not found") // true
console.log(false ?? "not found") // false

console.log(undefined ?? "not found") // "not found"
console.log(null      ?? "not found") // "not found"

Oscar Fuentes Esteves

student•

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.

Rafael Moro

student•

Yo lo he usado al no tener la certeza si algun objeto tiene una propiedad.

console.log(persona?.ubicacion?.serie);

David Elias Gatica Morales

student•

Buen aporte, muchas gracias

Sara Ramírez Andrade

student•

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

Alex hernandez mitre

student•

también se puede utilizar para un operador ternario

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

Juan Manuel Calderón Robles

student•

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

Axel Enrique Galeed Gutierrez

student•

Les comparto mis apuntes. :D

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

Jose Fabio Ortega Estrada

student•

(()=>{
//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);
})();

Carlos Iván Ochoa Gómez

student•

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

Diego Reyes Cabrera

student•

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.

Jesús Briceño

student•

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>

Salomon Moreno

student•

Tambien es practico hacer uso del Nullish coalescing.

Documentacion de MDN

Heydi García Sánchez

student•

esta forma es mas larga pero igual es usando el Operador Condicional Ternario, se entiende tambien claramente y usa una sola linea igualmente:

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

Heydi García Sánchez

student•

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

```   &#x20;

Ayriel Noriega

student•

Diferencia entre null y undefined en JavaScript y TypeScript

Aunque tanto null como undefined son valores que indican ausencia o falta de valor, existen diferencias importantes entre ambos en cuanto a su significado y uso en JavaScript y TypeScript.

1. Definición

null: Es un valor asignado explícitamente a una variable que indica la ausencia intencional de cualquier objeto o valor. Es un tipo de dato primitivo que se utiliza para indicar que una variable está vacía o que no tiene un valor asignado.
- Uso típico: Se asigna a una variable cuando se quiere representar que el valor está vacío o no se ha definido aún, pero se ha tomado una decisión explícita de asignar un "vacío".

let persona: object | null = null;

En este caso, persona tiene un valor explícito de null, lo que significa que no contiene un objeto, aunque puede contener uno más tarde.
undefined: Es el valor predeterminado de una variable que no ha sido inicializada o que no ha recibido ningún valor. En otras palabras, significa que una variable no tiene valor asignado.
- Uso típico: Se utiliza para indicar que una variable no ha sido asignada o que una propiedad de un objeto o un parámetro de una función no ha sido especificado.

let nombre: string;

console.log(nombre); // undefined (porque no se le ha asignado un valor)

En este ejemplo, nombre está declarado pero no ha recibido un valor, por lo que su valor es undefined.

Luifer Eduardo Ortega Perez

student•

El optional chaining yo lo he usado mucho en objectos que a veces trae una propiedad especifica y a veces no, y ayuda mucho a evitar errores ya que si el objecto no trae la propiedad muestra un error como "Error: Cannot read property 'name' of undefined".

Ejemplo:

Sin el optional chaining

let obj; // obj está declarado pero no tiene valor

console.log(obj.name); // Error: Cannot read property 'name' of undefined

Con el optional chaining

let object;
console.log(object?.name); // No genera error, simplemente imprime 'undefined'

Daniel Maers

student•

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

Santiago Reynoso Dunjo

student•

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.

marcelo veron

student•

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

Cristian Fernando Villca Gutierrez

student•

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

Sebastian Pérez

student•

Es un dato curioso, pero en Kotlin para usar null se usa el elvis operator ?:, asigna un valor por defecto a una variable que puede ser nula :)

marcos martilotta

student•

En mi vs code cuando escribo letmyNull = null si que me lo toma como null cuando está inferido. Alguien sabe porque?

Null y Undefined

Introducción a TypeScript

Por qué usar TypeScript

TypeScript vs. JavaScript

Configurado nuestro proyecto

Atrapando bugs

El compilador de TypeScript

Veamos el TSConfig.json

Tipos de datos primitivos

Qué es el tipado en TypeScript

Tipos inferidos

Numbers

Booleans

Strings

Arrays

Tipos de datos especiales

Any

Union Types

Alias y tipos literales

Null y Undefined

Funciones

Retorno de funciones

Objetos en funciones

Objetos como tipos

Módulos: import y export

Usando librerías que soportan TypeScript

Usando librerías que NO soportan TypeScript

Próximos pasos

Toma el Curso de Tipos Avanzados y Funciones en TypeScript

Null y Undefined como tipo Any

Union Types como emergencia