Objetos

¿Cómo guardarías en una sola variable el nombre, la edad y la dirección de una persona? Con un string o un número te quedas corto. Para eso existen los objetos: colecciones de datos donde cada valor tiene una etiqueta, su clave.

Piensa en una ficha de una persona. Tiene propiedades que la describen (nombre, edad, altura, peso…) y cosas que sabe hacer, sus métodos (caminar, correr, saltar…). Un objeto de JavaScript es justo esa ficha.

Declaración y asignación de objetos#

Un objeto se declara con llaves {}. Dentro van las propiedades y métodos separados por comas ,, y cada uno se escribe como una clave y un valor separados por dos puntos :.

Vamos a crear un objeto que represente a una persona:

const persona = {  name: 'Dani',  age: 30,  isWorking: true}

Tres claves, tres valores: un string, un número y un booleano. Y no tienes por qué quedarte ahí, porque los valores pueden ser de cualquier tipo de JavaScript, incluso arrays u otros objetos.

const persona = {  name: 'Dani',  age: 30,  isWorking: true,  family: ['Miguel', 'Maria'], // array  address: { // otro objeto    street: 'Calle de la piruleta',    number: 13,    city: 'Barcelona'  }}

¿Y las cosas que la persona sabe hacer? Eso son funciones. Cuando una función forma parte de un objeto se le llama método. Fíjate en la última propiedad:

const persona = {  name: 'Dani',  age: 30,  isWorking: true,  family: ['Miguel', 'Maria'],  address: {    street: 'Calle de la piruleta',    number: 13,    city: 'Barcelona'  },  walk: function () { // <- método    console.log('Estoy caminando')  }}

Acceder a propiedades y métodos de un objeto#

Guardar datos está muy bien, pero en algún momento querrás leerlos. Para acceder a una propiedad o método se usa el punto . seguido de su nombre.

const persona = { name: 'Dani' }console.log(persona.name) // -> Dani

¿Y si pides algo que no existe? No hay error: te devuelve undefined.

const persona = { name: 'Dani' }console.log(persona.fullName) // -> undefined

Vale, pero ¿y si el nombre de la propiedad lo tienes guardado en una variable? Con el punto no puedes, porque JavaScript buscaría una propiedad que se llamase literalmente como la variable. Para eso está la notación por corchetes [].

const persona = { name: 'Dani' }let property = 'name'console.log(persona[property]) // -> Dani

Los corchetes también son obligatorios cuando la clave tiene espacios o caracteres especiales:

const persona = { 'full name': 'Dani' }console.log(persona['full name']) // -> Dani// ❌ no puedes hacer esto// persona.full name

Con los métodos pasa exactamente lo mismo. Puedes llegar a ellos con el punto o con los corchetes, y después los ejecutas con los paréntesis:

const persona = {  name: 'Dani',  walk: function () {    console.log('Estoy caminando')  }}persona.walk() // -> Estoy caminandolet method = 'walk'persona[method]() // -> Estoy caminando

¿Te ha parecido raro persona[method]()? Léelo por partes. persona es el objeto. Con persona[method] accedes a la propiedad cuyo nombre está guardado en method, o sea, walk. Y con los paréntesis finales ejecutas la función. Es decir, es lo mismo que escribir persona.walk().

Añadir y modificar propiedades de un objeto

Un objeto no queda cerrado cuando lo creas. Igual que lees sus propiedades, puedes añadir nuevas o cambiar las que ya tiene, con la misma sintaxis:

const persona = { name: 'Dani' }persona.age = 30console.log(persona) // -> { name: 'Dani', age: 30 }

El objeto persona no tenía la propiedad age, así que se la hemos añadido con el valor 30. Si ya la tuviera, simplemente cambiaría su valor.

Eliminar propiedades de un objeto

Para borrar una propiedad se usa la palabra reservada delete delante de ella.

const persona = { name: 'Dani', age: 18 }delete persona.ageconsole.log(persona) // -> { name: 'Dani' }

La propiedad age desaparece del objeto, con clave y valor incluidos.

Resumiendo todo lo que hemos visto en esta clase: