Objetos en JavaScript: qué son y cómo acceder a sus propiedades
En esta página
Seguí leyendo
Enterate del próximo post
Un mail cuando publico algo nuevo. Sin spam y te podés dar de baja cuando quieras.
Un mail cuando publico algo nuevo. Sin spam y te podés dar de baja cuando quieras.
El post anterior sobre setTimeout, setInterval y requestAnimationFrame quedó del lado de la asincronía. El siguiente paso de la serie, cómo agrupar código relacionado bajo un mismo nombre con IIFE y módulos, necesita una estructura que todavía no apareció en ningún ejemplo: el objeto, una colección de valores identificados por nombre. Antes de esa técnica hace falta la sintaxis mínima para crear un objeto, leer una de sus propiedades y cambiarla.
const persona = { nombre: "Ana", edad: 30 };
console.log(persona);
// { nombre: 'Ana', edad: 30 }Un objeto se escribe entre llaves, con pares de nombre y valor separados por comas: cada par se llama propiedad. A diferencia de un array, donde cada valor se identifica por su posición (0, 1, 2...), en un objeto cada valor se identifica por un nombre elegido, la clave.
const ciudad = { nombre: "Rosario", pais: "Argentina", poblacion: 950000 };
console.log(ciudad);
// { nombre: 'Rosario', pais: 'Argentina', poblacion: 950000 }Los valores pueden ser de cualquier tipo ya conocido (números, strings), igual que en un array, y no hace falta que todas las claves guarden el mismo tipo de valor: ciudad mezcla strings con un número sin ningún problema.
const persona = { nombre: "Ana", edad: 30 };
console.log(persona.nombre);
// Ana
console.log(persona.edad);
// 30El punto después del nombre del objeto, seguido de una clave, lee el valor asociado a esa clave. Es la misma notación que ya apareció al leer .length en un array: ahí también se leía una propiedad con un nombre, solo que length es una propiedad que el array trae de fábrica, y acá las claves las define quien escribe el objeto.
const persona = { nombre: "Ana", edad: 30 };
const clave = "nombre";
console.log(persona[clave]);
// AnaLos corchetes leen una propiedad igual que el punto, pero el nombre de la clave puede venir de una variable en vez de escribirse fijo en el código: persona[clave] busca el valor de la clave que esté guardada en clave en ese momento, no una clave literal llamada clave.
const producto = { "nombre completo": "Mouse inalámbrico", precio: 4500 };
console.log(producto["nombre completo"]);
// Mouse inalámbricoEl punto solo acepta nombres que podrían ser un identificador válido: sin espacios, sin empezar con un número. Una clave como "nombre completo" necesita comillas en el literal, y por lo tanto necesita corchetes para leerse: producto.nombre completo es un error de sintaxis, producto["nombre completo"] no.
const persona = { nombre: "Ana", edad: 30 };
persona.edad = 31;
console.log(persona);
// { nombre: 'Ana', edad: 31 }
persona = { nombre: "Otra" };
// TypeError: Assignment to constant variable.El mismo operador = que asigna un valor a una propiedad de un array sirve para asignar un valor a una propiedad de un objeto: persona.edad = 31 cambia solo esa clave, deja nombre intacta. Y la misma regla de const ya vista con arrays aplica acá: const fija el nombre persona a ese objeto puntual, no congela sus propiedades. Reasignar persona a un objeto distinto sigue estando prohibido.
const persona = { nombre: "Ana", edad: 30 };
persona.ciudad = "Rosario";
console.log(persona);
// { nombre: 'Ana', edad: 30, ciudad: 'Rosario' }A diferencia de un array, donde las posiciones van de 0 a length - 1 sin huecos, un objeto no tiene un límite fijo de claves. Asignar un valor a una clave que todavía no existía, como persona.ciudad, la crea en el momento: el objeto pasa de tener dos propiedades a tener tres.
const persona = { nombre: "Ana", edad: 30 };
console.log(persona.mail);
// undefinedPedir una propiedad que el objeto no tiene no genera ningún error: devuelve undefined, la misma respuesta silenciosa que ya apareció al pedir una posición fuera de rango en un array. Es una forma de decir "acá no hay nada", no una falla que detenga el programa.
Un objeto es una colección de propiedades escrita entre llaves, cada una identificada por una clave en vez de por una posición. Se lee con punto cuando la clave es fija, y con corchetes cuando la clave viene de una variable o no es un identificador válido. Declarar el objeto con
constfija el nombre a ese objeto puntual, no impide cambiar ni agregar propiedades.
El próximo post de la serie retoma el punto donde queda esta idea de agrupar valores bajo un nombre, esta vez agrupando funciones relacionadas dentro de un mismo objeto para simular un espacio de nombres, con las IIFE como la técnica que hace posible mantenerlo privado del resto del código.