Objetos en JavaScript: claves, acceso y optional chaining
Resumen
Los objetos en JavaScript son la base para construir aplicaciones web confiables. Aquí verás cómo definir pares clave-valor, acceder a propiedades con precisión, evitar errores como TypeError y aplicar optional chaining para que tu lógica no se rompa cuando falte información. Todo con ejemplos claros y buenas prácticas.
¿Qué es un objeto en JavaScript y cómo se define?
Un objeto es una colección de pares clave-valor que agrupa características de algo: nombre, edad, correo, etc. A diferencia de los arreglos que usan índices, los objetos usan claves legibles. Se definen con llaves {} y permiten desde valores primitivos hasta arreglos y otros objetos anidados.
Usa llaves para objetos y corchetes para arreglos.
Agrupa datos relacionados en un solo lugar.
Emplea nombres de claves claros y consistentes.
Puedes incluir fechas con Date.now().
Ejemplo base del objeto nota:
// src/quince-objects.jsconst nota ={ID:1,title:"Mi primera nota",content:"Contenido de la nota.",createAt:Date.now()};
También puede crecer con más propiedades: edad numérica, isAdmin booleana, o un arreglo dates con valores. Identifícalas bien para no confundir lo que es de un objeto y lo que pertenece a un arreglo.
¿Cómo diferenciar objetos de arreglos?
Objetos: llaves {} y acceso por clave.
Arreglos: corchetes [] y acceso por índice.
Claves descriptivas ayudan a leer y mantener el código.
¿Cómo acceder a propiedades con punto y con corchetes?
Existen dos formas. La notación de punto es directa y legible. La notación de corchetes permite usar claves dinámicas desde variables.
console.log(nota.ID);// Acceso por punto.console.log(nota.title);// Acceso por punto.const campo ="content";// Clave dinámica.console.log(nota[campo]);// Acceso por corchetes.
Atención a los typos en las claves: si escribes tile en lugar de title, no obtendrás el valor esperado. En cadenas de texto el efecto es menor; en nombres de propiedades puede romper la lógica porque la clave cambia.
¿Qué ocurre si la propiedad no existe?
Acceder a una clave inexistente devuelve undefined.
Acceder más adentro (propiedad de algo undefined) genera TypeError.
console.log(nota.autor);// undefined.console.log(nota.autor.name);// TypeError: no puede leer 'name' de undefined.
Cuando veas el trace del error, léelo: indica qué propiedad falló y en qué nivel. Entender el mensaje acelera la corrección.
¿Cómo prevenir fallos con optional chaining en datos de una API?
Al consumir datos desde un servidor por medio de una API, la estructura puede cambiar: quizá esperas autor y name, pero no llegan. Sin protección, eso detiene el flujo de la aplicación. Con optional chaining evitas el colapso si algo falta.
Coloca un signo de pregunta antes del punto en cada nivel opcional.
Si la ruta no existe, devuelve undefined en lugar de lanzar error.
Mantiene el programa funcionando aunque falten campos.
// Sin protección: puede lanzar TypeError si 'autor' falta.// console.log(nota.autor.name);// Con optional chaining: seguro ante datos ausentes.console.log(nota?.autor?.name);// undefined si 'autor' o 'name' no existen.
Buenas prácticas:
Usa optional chaining incluso si hoy controlas el objeto. Puede cambiar mañana.
Define claves claras y consistentes para minimizar typos.
Prefiere la notación de punto para lectura y usa corchetes para claves dinámicas.
Loguea con console.log solo lo necesario para depurar sin ruido.
¿Tienes un caso real con objetos, acceso dinámico o optional chaining? Cuéntalo en los comentarios y comparte tu solución.
Si quieren intentar el reto de objetos sin ver las soluciones, hice el archivo del challenge con instrucciones para que puedan resolverlos.
Código aquí:
NOTA: Copia todo el contenido y reemplázalo en el archivo principal.
Muchas gracias por tus aportaciones, a mi me han sido de mucha utilidad
Gracias!!
Adoro los mini tips que da en cada lección. Lo de poner el "?" para evitar el error estoy seguro me va a salvar de muchos dolores de cabeza en el futuro. ¡Gracias!
Comparto mi código con unas notas que añadí
/*Crea un objeto llamado usuario
Debe tener:
nombre
edad
email
Retorna ese objeto */functioncrearUsuario(){const usuario={nombre:'Ana',edad:27,email:'ana@platzi.com'};return usuario;}// Recibe un objeto usuario// Retorna solo el nombre// Usa notación con puntofunctionobtenerNombre(usuario){// tu código aquíreturn usuario.nombre;}// propiedad es un string (ej: "nombre")// Accede usando corchetes []// Retorna el valor correspondientefunctionobtenerPropiedadDinamica(objeto, propiedad){// tu código aquíreturn objeto[propiedad];}// Verifica si existe la propiedad "email"// Usa un método de objetos (pista: hasOwnProperty)//hasOwnProperty es tu filtro de seguridad para objetos.// Imagina que quieres saber si un objeto tiene una propiedad suya, // sin mirar lo que heredó del prototipo. Es como revisar qué herramientas // tienes en tu propia caja, ignorando las que te prestó el vecino.//Si usaras in o un simple if (user.toString), // JavaScript buscaría en toda la cadena de prototipos y te daría un true confuso. // hasOwnProperty corta el ruido y te da la certeza absoluta de que la llave pertenece // a ese objeto específico.functiontieneEmail(usuario){// tu código aquíreturn usuario.hasOwnProperty('email');//Las comillas son necesarias porque hasOwnProperty espera recibir el nombre de la propiedad como un texto (un string).// cuando usas métodos como hasOwnProperty, le estás enviando un parámetro. Ese parámetro debe ser el nombre exacto de la llave que buscas.// Si no usaras las comillas, JavaScript intentaría buscar una variable con ese nombre en lugar de buscar la propiedad en el objeto.//Las comillas le dicen a JavaScript: "esto es el nombre, no una variable". }Reto5:Accesoseguro(optional chaining)// Accede a:// usuario.direccion.ciudad// Pero sin romper si no existe// Usa ?.functionobtenerCiudad(usuario){// tu código aquí//pon el ? justo antes de cada punto donde sospeches que el valor anterior podría ser null o undefined.return usuario?.direccion?.ciudad;// El primero usuario? protege por si usuario ni siquiera existe (es null). // Si no existe, ahí se detiene y devuelve undefined.// El segundo direccion? protege por si el usuario existe, pero no tiene una propiedad direccion.// Básicamente, el ? le dice a JavaScript: "Oye, intenta acceder a lo siguiente, // pero si lo que está a la izquierda no existe, no explotes; simplemente ríndete y devuelve undefined".//Es mejor prevenir que depurar}//Reto 6: Objeto anidado// Crea un objeto producto// Incluye:// id, nombre, precio// un objeto interno especificaciones// Dentro de especificaciones agrega:// marca, memoria, almacenamientofunctioncrearProducto(){// tu código aquíconst producto={id:1,nombre:'nombre',precio:100,especificaciones:{marca:'marca',memoria:'memoria',almacenamiento:'almacenamiento'}};return producto;// Claves: Puedes omitir comillas (ej. id: 1).// Valores: Si es texto, siempre lleva comillas (ej. nombre: 'Juan'). Si es número o booleano, no.}// Reto 7: Acceso a objeto anidado// Accede a memoria// Está dentro de especificaciones// Usa ?. para evitar erroresfunctionobtenerMemoria(producto){// tu código aquíreturn producto?.especificaciones?.memoria;}// Reto 8: Agregar propiedad dinámica// Agrega una nueva propiedad al objeto// El nombre viene en una variable// Usa []// Retorna el objeto actualizadofunctionagregarPropiedad(objeto, nombrePropiedad, valor){// tu código aquí objeto[nombrePropiedad]=valor;// Al usar los corchetes [], le dices a JavaScript: // "No busques una propiedad que se llame literalmente 'nombrePropiedad', // busca el valor que tiene esa variable y úsalo como nombre".// los corchetes son el puente entre una variable y una propiedad del objeto.return objeto;// Si escribes objeto.nombre, le estás diciendo a JavaScript: // "Busca la propiedad que se llama literalmente 'nombre'". // Es como si tuvieras una etiqueta pegada en el objeto.// Pero si tienes una variable, como let clave = 'nombre', y haces objeto[clave], JavaScript hace esto:// Mira qué hay dentro de clave (en este caso, la palabra 'nombre').// Va al objeto y busca la propiedad que coincida con ese valor.}//Reto 9: Objeto con métodos// propiedad valor (empieza en 0)// método sumar(numero)// método restar(numero)// método obtenerValor()functioncrearCalculadora(){// tu código aquíconst calculadora={valor:0,sumar(numero){this.valor+= numero;returnthis;// simplificado},restar:function(numero){returnthis.valor-=numero;},obtenerValor:function(){returnthis.valor;}};return calculadora;}// Reto 10: Acceso profundo + fallback// Accede a:// usuario.perfil.redes.twitter// Usa ?.// Si no existe → retorna "no-disponible"functionobtenerTwitter(usuario){// tu código aquíreturn usuario?.perfil?.redes?.twitter ||'no-disponible';}// usuario?.perfil?.redes?.twitter: El ?. (optional chaining) va navegando por el objeto. // Si en algún punto —ya sea que usuario no exista, o que no tenga perfil, o que perfil no tenga redes— la cadena se rompe, // JavaScript no lanza un error. Simplemente se detiene y devuelve undefined.// || 'no-disponible': Esto es el operador OR. // Si la parte izquierda resulta ser undefined (o cualquier valor "falso"), // el código salta automáticamente a lo que está a la derecha del ||.// En JavaScript, el operador || evalúa la parte izquierda. Si esa parte es "verdadera" (tiene un valor real), // se queda con ella. Pero si es "falsa" (como undefined, null, 0, o una cadena vacía), // el operador dice: "Bueno, esto no me sirve, así que tomaré lo que está a la derecha".module.exports={ crearUsuario, obtenerNombre, obtenerPropiedadDinamica, tieneEmail, obtenerCiudad, crearProducto, obtenerMemoria, agregarPropiedad, crearCalculadora, obtenerTwitter,};
