No tienes acceso a esta clase

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

ES11: optional chaining

26/35
Recursos

Cuando intentas acceder a propiedades de un objeto que no existen, JavaScript te retornar谩 undefined.

const usuario = {}
console.log(usuario.redes) // undefined

Al acceder a una propiedad m谩s profunda de un objeto, que previamente fue evaluada como undefined, el programa se detendr谩 y mostrar谩 un error de tipo.

const usuario = {}
console.log(usuario.redes.facebook) 
// TypeError: Cannot read properties of undefined (reading 'facebook')

Es como intentar ejecutar undefined.facebook, lo cual es un error de tipo, debido a que undefined es un primitivo, no es un objeto.

C贸mo utilizar el encadenamiento opcional

El encadenamiento opcional u optional chaining (?.) detiene la evaluaci贸n del objeto cuando el valor es undefined o null antes del (?.), retornando undefined sin detener el programa por un error.

const usuario = {}
console.log(usuario.redes?.facebook) 
// undefined

Pero, 驴por qu茅 usar铆a propiedades de un objeto vac铆o? Cuando realizas peticiones, el objeto no contiene la informaci贸n solicitada en seguida, por ende, necesitas que el programa no colapse hasta que lleguen los datos y puedas utilizarlos.

No abuses del encadenamiento opcional

El encadenamiento opcional se debe utilizar 煤nicamente cuando probablemente un valor no exista.

Por ejemplo, en un objeto usuario que siempre existe, pero la propiedad redes es opcional, entonces se deber铆a escribir usuario.redes?.facebook y no usuario?.redes?.facebook.

Si abusas del encadenamiento opcional y existe un error en un objeto, el programa podr铆a 鈥渙cultarlo鈥 por un undefined, provocando que el debugging sea m谩s complicado.

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

Aportes 19

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

No abuses del encadenamiento opcional

馃敆 El encadenamiento opcional se debe utilizar 煤nicamente cuando probablemente un valor no exista.
.
Por ejemplo, en un objeto usuario que siempre existe, pero la propiedad redes es opcional, entonces se deber铆a escribir usuario.redes?.facebook y no usuario?.redes?.facebook.
.
Si abusas del encadenamiento opcional y existe un error en un objeto, el programa podr铆a 鈥渙cultarlo鈥 por un undefined, provocando que el debugging sea m谩s complicado.

Hola Chic@s

**ES11: **

  • Optional chaining
const users = {
    gndx: {
        country: "MX"
    },
    ana: {
        country: "CO"
    }
}
console.log(users?.bebeloper?.country);

Si queremos incluso que no arroje undefined, y queremos personalizar el mensaje para los usiarios, podr铆amos agregar

console.log(users?.usuarioInventado?.country || 'No existe esa informaci贸n en la base de datos')

// No existe esa informaci贸n en la base de datos

Optional chaining

Es una forma de evitar errores solicitando propiedades de forma opcional utilizando el s铆mbolo => ? , sirve cuando no estamos seguros de que los valores est茅n completos.
Ejemplo

const users = {
Julianfam : {
country: 'CO'
},
Camila: {
country:'MEX'
}
}

console.log(users?.Julianfam?.country);

//respuesta: CO // 

si busco un elemento que no existe, arrojara Undefined.

console.log(users?.Felipe?.country);
//respuesta: undefined //

Hola

Solo queria decir que el tittle de la pagina esta mal escrito (Optionan), vamos a ver cuando se demoran en correguirlo XD 19/10/2022

En el minuto 3: 34 dice, si tratamos de acceder a users.gndx.age no dar谩 undefined , y si tratamos de usar una validaci贸n o l贸gica que dependa de acceder a ese elemento, puede llegar a romper nuestro programa.

Es falso, no se romer铆a porque podemos acceder a users.gndx, pero no .age, por eso recibimos undefined, se romer铆a si tratamos de acceder a una propiedad m谩s adentro de age ya que no se puede acceder a algo de undefined.

Estoy decepcionado con este curso, a pesar que puedo entender todo, debido a que tengo experiencia en el mundo de desarrollo, me da pena por las personas que no tienen un conocimiento desarrollado y tengan que aprender cosas que no son鈥

Platzi, realmente lees a tus alumnos cuando te dicen que un curso no es lo suficientemente bueno?

No le he encontrado casos de usos a mis proyectos a todo lo que he aprendido en el curso. Pero seguro mas adelante todo tendra mas utilidad 馃槂

con mi code runner no funciona, pero lo probe con la consola de chrome y va perfecto

26/35 ES11: optional chaining

Cuando se intenta acceder a propuedades de un objeto que no existen, JavaScript retorna undefined y si se intenta acceder a una propiedad m谩s profunda de un objeto que previamente fue evaluada como undefined, el programa se detiene y muestra un error de tipo.

El encadenamiento opcional ? que detiene la evaluaci贸n del objeto cuando el valor es undefined o null antes del ? retornando undefined sin detener el programa por un error. Se recomienda utilziar el encadenamiento opcional 煤ncamente cuando probablemente un valor no exista para evitar ocultar errores en el objeto.

Ejemplos:

  • Acceder a una propiedad que no existe en un objeto:
const persona = {
  nombre: 'Juan',
  edad: 30
}
console.log(persona.apellido) // undefined

  • Acceder a una propiedad m谩s profunda de un objeto que no existe:
const persona = {
  nombre: 'Juan',
  edad: 30
}
console.log(persona.direccion.calle)
// TypeError: Cannot read properties of undefined (reading 'calle')

  • Uso del encadenamiento opcional para acceder a una propiedad de un objeto que podr铆a no existir:
const persona = {
  nombre: 'Juan',
  edad: 30
}
console.log(persona.redes?.facebook) // undefined

  • Uso incorrecto del encadenamiento opcional en un objeto que siempre existe:
const persona = {
  nombre: 'Juan',
  edad: 30
}
console.log(persona?.redes?.facebook) // undefined

Yo lo he utilizado pero le doy un valor por defecto, esto quiere decir que si en algun punto de -> objeto?.item <- no lo encuentra va tomar un valor asignado por mi -> objeto?.item || 鈥榲acio鈥 <- esto lo podr铆amos usar para colocar un valor estatico como el caso o tener dos objetos si el primero falla validar el segundo -> objeto?.item || objeto?.item <- y podrias poner las n posibilidades mas que quisiera validar antes que se rompa todo mi codigo

const users = {
    ospinajuanp:{
        country:'CO'
    },ana:{
        country:'MX'
    }
}

console.log(users.ospinajuanp.country);
console.log(users?.ospinajuanp?.age);
console.log(users?.ospinajuanp?.age || 'No existe');
console.log(users?.ospinajuanp?.age || users?.ospinajuanp?.ages ||'No existe');

Optionan-Chaining馃崕

El encadenamiento opcional (?.) el operador accede a la propiedad de un objeto o llama a una funci贸n. Si el objeto al que se accede o la funci贸n llamada usando este operador es undefined o null, la expresi贸n cortocircuita y eval煤a a undefined en lugar de lanzar un error.

El signo de pregunta 鈥?鈥, sirve para que la validacion que estemos realizando en un momento dado, no salga un error y nos retorne undefined en el caso de que no se la correcta.
.


const users = {
    illescas:{
        country:"MX"
    },
    ana:{
        country:"CO"
    }
}

console.log(users.illescas.country)
console.log(users?.bebeloper?.country);

/*
ouput: 
MX 
undefined
*/

Ejemplo:

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// Expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// Expected output: undefined

documentacion:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

El encadenamiento opcional es una forma segura y concisa de realizar comprobaciones de acceso a propiedades de objetos anidados.

El operador de encadenamiento opcional聽?. toma la referencia a su izquierda y verifica si no est谩 definida o es nula.聽Si la referencia es cualquiera de estos valores nulos, las comprobaciones se detendr谩n y devolver谩n un valor indefinido.聽De lo contrario, la cadena de controles de acceso continuar谩 por el feliz camino hasta el valor final.

// Un objeto persona vac铆o al que le falta informaci贸n de ubicaci贸n opcional
const person = {}
// Lo siguiente equivaldr谩 a indefinido en lugar de un error
const currentAddress = person.location?.address

El encadenamiento opcional se introdujo en ES2020.聽Seg煤n聽TC39,聽actualmente se encuentra en la etapa 4 del proceso de propuesta y est谩 preparado para su inclusi贸n en el est谩ndar ECMAScript final.聽Esto significa que puede usarlo, pero tenga en cuenta que es posible que los navegadores m谩s antiguos a煤n requieran el uso de polyfill.

El encadenamiento opcional es una caracter铆stica 煤til que puede ayudarle a escribir c贸digo m谩s limpio.

ES11: optional chaining


ES11, tambi茅n conocido como ECMAScript 2020, introdujo una caracter铆stica importante llamada 鈥渙ptional chaining鈥, que en espa帽ol se traduce como 鈥渆ncadenamiento opcional鈥. Esta caracter铆stica proporciona una forma m谩s segura y conveniente de acceder a propiedades anidadas en objetos y evitar errores cuando esas propiedades no est谩n definidas.

Antes del optional chaining, cuando quer铆as acceder a una propiedad anidada de un objeto, ten铆as que verificar manualmente cada nivel de anidamiento para asegurarte de que las propiedades existieran antes de acceder a ellas. Esto resultaba en c贸digo m谩s largo y propenso a errores. Con el optional chaining, puedes simplificar esto.

El operador de encadenamiento opcional (?.) permite acceder a propiedades anidadas sin arrojar un error si una propiedad en alg煤n nivel de anidamiento no est谩 definida. Si alguna propiedad es null o undefined, la expresi贸n completa simplemente devuelve undefined.

Aqu铆 tienes un ejemplo:

const persona = {
    nombre: 'Ana',
    direccion: {
        ciudad: 'Madrid',
        codigoPostal: '28001'
    }
};

// Sin optional chaining
const codigoPostal = persona.direccion && persona.direccion.codigoPostal;

// Con optional chaining
const codigoPostalSeguro = persona.direccion?.codigoPostal;


En este ejemplo, si direccion no estuviera definida en el objeto persona, la expresi贸n persona.direccion?.codigoPostal simplemente devolver铆a undefined, en lugar de arrojar un error.

El optional chaining es especialmente 煤til cuando est谩s trabajando con datos provenientes de APIs u otras fuentes externas donde no puedes garantizar que todas las propiedades estar谩n presentes en cada caso.

En resumen, el encadenamiento opcional (optional chaining) es una caracter铆stica introducida en ES11 que simplifica el acceso a propiedades anidadas en objetos y ayuda a evitar errores relacionados con propiedades no definidas.

Espero sea de utilidad. 馃懆鈥嶐煉

鉁忥笍 Archivos del Proyecto 鉁忥笍


Pasos 馃搶

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

//Ejercicio #1
const users = {
	gndx: {
		country: 'MX'
	},
	ana: {
		country: 'CO'
	}
}

console.log(users.gndx.country);

/*output:
MX
*/

console.log(users.gndx.age);

/*output:
undefined
*/

console.log(users.bebeloper.country);

/*output: arroja error
console.log(users.bebeloper.country);
					^
TypeError: Cannot read properties of undefined (reading 'country')
*/

console.log(users?.bebeloper?.country);

/*output: ya no arroja error, as铆 que la app no se rompe
undefined
*/

waos

Mi resumen:

Funciona similar a las interfaces de TypeScript

excelente esta funcionalidad, me ahorra de envolver en un if el objeto o array de respuesta de una api, por ejemplo:
if(respuesta[0].valor1,valor2), ahora solo ser铆a con las ?'s