Objetos en Javascript

¿Qué es un objeto?

Un objeto es una colección de pares clave: valor. Las claves (propiedades) son strings y los valores pueden ser cualquier tipo (números, strings, funciones, otros objetos, arrays, etc.). Los objetos modelan entidades con propiedades (o atributos) y su valor.

Es una manera de guardar información relacionada entre sí.

La estructura que sigue un objeto es la siguiente:

let nombre_objeto = { clave1: valor1, clave2: valor2, clave3: valor3};

Es decir, dentro de los corchetes ponemos separados por coma ( , ) los elementos, que están formados siempre por clave y valor asociado.

Vamos a poner un ejemplo:

let persona = { nombre: "Juan", edad: 25, ciudad: "Valencia"};

En este ejemplo hemos creado un objeto llamado persona, cuyos atributos/propiedades/claves son nombre, edad y ciudad, cada uno de ellos con su correspondiente valor asociado.

Acceder a las propiedades del objeto

La estructura de un objeto es muy útil para guardar información relacionada entre sí. Para acceder a la información del objeto lo hacemos siempre utilizando la clave como referencia.

Para al ejemplo anterior de persona, si queremos acceder a su nombre lo hacemos de la siguiente forma, nombre_del_objeto.clave.

console.log(persona.nombre) // Esto nos devolverá "Juan"

Cuando la clave o propiedad es un string que contiene espacios, no podemos utilizar el punto para acceder a su propiedad. En su lugar utilizarmos los corchetes y las comillas "".

let libro = {
  titulo: "El Señor de los anillos",
  autor: "J. R. R. Tolkien",
  "año de publicación": 1954
}

console.log(libro["año de publicación"]) // Esto nos devolverá 1954

Como se puede observar, cuando la propiedad contiene más de una palabra ("año de publicación"), debemos entrecomillarla tanto al crear el objeto como al acceder a ella en los corchetes [ ].

Añadir, actualizar y eliminar propiedades

Añadir

Cuando queremos añadir una nueva propiedad (junto con su valor asociado) a un objeto ya existente, el proceso es muy similar a acceder a una propiedad. La estructura es nombre_del_objeto.nueva_propiedad = valor_asociado.

let libro = {
  titulo: "El Señor de los anillos",
  autor: "J. R. R. Tolkien",
  "año de publicación": 1954
}

// Vamos a añadir la propiedad "páginas" y su valor asociado "576"

libro.paginas = 576;

// A partir de aquí nustro objeto se ha convertido en:
// let libro = {
//   titulo: "El Señor de los anillos",
//   autor: "J. R. R. Tolkien",
//   "año de publicación": 1954,
//    paginas: 576
// }

Al igual que para acceder, si la propiedad es un nombre compuesto con espacios, debemos utilizar las comillas y los corchetes [ ].

let libro = {
  titulo: "El Señor de los anillos",
  autor: "J. R. R. Tolkien",
  "año de publicación": 1954,
  paginas: 576
}

// Vamos a añadir la propiedad "valoración usuario" y su valor asociado "4.9"

libro["valoración usuario"] = 4.9;

Actualizar

Cuando queremos modificar o actualizar una propiedad que ya existe en mi objeto, lo hacemos de la misma manera que si la estuviésemos creando.

let libro = {
  titulo: "El Señor de los anillos",
  autor: "J. R. R. Tolkien",
  "año de publicación": 1954,
  paginas: 576
}


libro.titulo = "El Señor de los Anillos 1: La Comunidad del Anillo";

// Esto actualiza el título del libro de modo que nuestro objeto ahora es éste:

// let libro = {
//   titulo: "El Señor de los Anillos 1: La Comunidad del Anillo",
//   autor: "J. R. R. Tolkien",
//   "año de publicación": 1954,
//   paginas: 576
// }

Eliminar

Al eliminar una propiedad se elimina tanto la propiedad/clave como su valor asociado.

delete libro.paginas;

Funciones o métodos dentro de objetos

Como hemos visto al principio, los valores asociados a una propiedad pueden ser de cualquier tipo (números, strings, funciones, otros objetos, arrays, etc.).

Vamos a ver en particular como integrar funciones en objetos.

const contador = {
  numero: 0,
  incrementar: function() {
    this.valor++;
  }
};

contador.incrementar();
console.log(contador.numero); // 1

En este ejemplo hemos creado una propiedad llamada "incrementar" cuyo valor es una función que incrementa el "número" del objeto contador (gracias a this).

También podemos crear funciones que no interactuen con el propio objeto. Por ejemplo:

const persona = {
  nombre: "Maria",
  edad: 25,
  saludar: function() {console.log('Hola')}
};

persona.saludar(); // Hola

Las funciones, como cualquier propiedad, se llaman con el punto . , seguido del nombre de la función y ( ).

Bucles for en objetos

El bucle que itera sobre las propiedades de un objeto es el for...in. La estructura es muy similar el for...of de los arrays, pero esta vez la variable iteradora equivale a las propiedades del objeto.

const objeto_mascota = { tipo: "perro", nombre: "Rex", edad: 4 };

for (let propiedad in objeto_mascota) {
  console.log(propiedad, objeto_mascota[propiedad]);
}

// Resultado del bucle:
// tipo perro
// nombre Rex
// edad 4

En este caso la variable del bucle propiedad va equivaliendo a cada una de las propiedades/claves del objeto (tipo, nombre, edad), y con la instrucción objeto_mascota[propiedad] accedemos a su valor asociado (perro, Rex, 5).

Si queremos obtener a la vez acceso a la propiedad y a su valor también podemos hacer uso de la función Object.entries(objeto).

// entries: [[key, value], ...]
for (const [k, v] of Object.entries(mascota)) {
  console.log(k, v);
}

En este ejemplo la variable k apunta a las claves/propiedades, y la v directamente a su valor, sin necesidad de hacer objeto[clave].

Listas (arrays) de objetos

Es muy común encontrarse con listas cuyos elementos son objetos con la misma estructura.

const usuarios = [
  { id: 1, nombre: "Marta", activo: true },
  { id: 2, nombre: "Juan", activo: false },
  { id: 3, nombre: "Lucia", activo: true }
];

En estos casos para acceder a los objetos es necesario hacer uso del for...of de los arrays pra acceder a cada uno de ellos.

for (const usuario of usuarios) {
  // usuario equivale al objeto entero, p.e: { id: 1, nombre: "Ana", activo: true }
  console.log(usuario.nombre); // de modo que podemos tratarlo como un objeto y acceder a sus propiedades como siempre
}

// Resultado:
// Marta
// Juan
// Lucía

Objetos anidados (objetos dentro de objetos)

En un objeto, el valor asociado a una propiedad puede a su vez ser otro objeto.

const empresa = {
  nombre: "Acme",
  direccion: {
    calle: "C/ Mayor",
    ciudad: "Madrid",
    contacto: { telefono: "900123456" }
  }
};

Como se puede observar, la propiedad "direcció" tiene como valor el objeto {calle: "C/ Mayor", ciudad: "Madrid", contacto: { telefono: "900123456" }}, que a su vez, su propiedad "contacto" tiene como valor otro objeto telefono: "900123456" }.

Cuando tenemos objetos anidados, simplemente demos acceder a ellos como siempre, teniendo en cuenta la profundidad.

// Acceder al teléfono
empresa.direccion.contacto.telefono; // "900123456"