Uso de Optional Chaining en JavaScript ES11

Clase 26 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

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 “ocultarlo” por un undefined, provocando que el debugging sea más complicado.

Contribución creada por Andrés Guano (Platzi Contributor).

Christopher Andrés Guano Valencia

student•

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.

Marlon Hernández Salinas

student•

Gran dato

John F Chacpi Marchena

student•

un aporte muy util!!

Yuli Alexandra Pulido Castañeda

student•

Hola Chic@s

**ES11: **

Optional chaining

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

Jonathan Barzola

student•

Buen resumen

sergio perez

student•

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

Julian Felipe Andrade

student•

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 //

Diego Camino Reinoso

student•

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?

Oscar Barajas Tavares

Team Platzi•

Si Diego, entiendo tu punto, lo llevaré al equipo para que revisemos esto que mencionas y generar una mejor explicación. Gracias por tu feedback.

Hector Rodriguez

student•

Espero las correcciones @GNDX

Luis Enrique Mantilla Sarria

student•

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

Teo Zavala

student•

27/10/2022......ya esta correcto

Samuel Suárez

student•

Hoy 31/12/2022 y dice Optionan chaining

Samuel Suárez

student•

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

Camilo Taborda

student•

lo mas seguro es que si , hay muchos que se ven bien útiles... saludos !!

Jhon Alexander Lerma Becerra

student•

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

Nestor Rios Garcia

student•

A mí también me sucede lo mismo, si estoy bien es porque tenemos versiones de Node.js anteriores. Mi versión es: v10.19.0

Oscar Santiago

student•

Carlos Andrade

student•

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

Juan Pablo Ospina Restrepo

student•

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

Luis Alfredo Suarez

student•

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. 👨‍💻

Enrique Illescas Castillo

student•

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

Vicki Norma Ramírez Fraga

student•

Curiosamente a mí no me dejó usar el optional chaining.

const users = {
    vf: {
        country : 'MX'
    },
    fr : {
        country: 'CO'
    }
}


console.log(users.vf?.country);
console.log(users?.bd?.country);

Me salió el siguiente error:

console.log(users.vf?.country);
                     ^

SyntaxError: Unexpected token '.'
at Loader.moduleStrategy (internal/modules/esm/translators.js:133:18)
    at async link (internal/modules/esm/module_job.js:42:21)

José Fernando Fuentes Roa

student•

Hola Vicky, te cuento que el código que estas ingresando está bien. El error que presenta la consola es aparentemente por la versión del node.js````. Debes verificar con el comando node --version``` que la versión del node sea por lo menos la 14, si es menor a la 14 debes actualizarla. Acá en este post muetra más información del error. Saludos

Jesus Maria Gonzalez Guardo

student•

const info = { valor1: { country: 'MX' }, valor2: { country: 'CO' }} console.log(info);console.log(info?.valor1?.country);console.log(info?.valor1?.age);

Kyb3r Cipher

student•

Buena classe!

Sebastián Andrés Sanhueza Tapia

student•

// funciona con métodos
users.nonExistentMethod?.(); 
// No hace nada, no lanza error

Creative Artisan

student•

Encontre una forma alternativa para usar propiedades no definidas de forma dinamica utilizando un Proxy recursivo, garantizando el acceso a cualquier propiedad de un objeto aún asi no esté definida.

class User {
  constructor([name, lastname]) {
    this.info = {
      name,
      lastname,
      country: 'Peru',
      code: 'PE'
    };

    // Apply recursive proxy
    return this._createProxy(this);
  }

  _createProxy(target) {
    const handler = {
      get: (obj, prop) => 
        !(prop in obj) 
          ? (obj[prop] = {}, new Proxy(obj[prop], handler))
          : typeof obj[prop] === 'object' && obj[prop] !== null
            ? new Proxy(obj[prop], handler)
            : obj[prop]
    };

    return new Proxy(target, handler);
  }
}


const user = new User(['Carlos', 'Rodriguez'])

user.nickname.hash.role = 'Admin'
console.log(user.nickname.hash.role) // Admin 
console.log(user.info.email) // {}

user.info.email = 'carlos@mail.com'
console.log(user.info.email) // carlos@mail.com

console.log(user); // Object

Andrés Soret Chacin

student•

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.

Maria Gabriela Rodriguez Cuevas

student•

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

Alejandro Ramos

student•

waos