ES11: optional chaining

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 “ocultarlo” 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 || ‘vacio’ <- 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');

ES11: optional chaining

ES11, también conocido como ECMAScript 2020, introdujo una característica importante llamada “optional chaining”, que en español se traduce como “encadenamiento 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. 👨‍💻

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.

✏️ 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

Apunte en Notion