Saltar al contenido principal

Objetos

Hasta ahora hemos trabajado con variables, arrays y funciones. Ahora vamos a conocer otra estructura fundamental de JavaScript: los objetos.

Un objeto nos permite agrupar diferentes datos que están relacionados entre sí.

Por ejemplo, si queremos guardar información sobre una persona:

let nombre = "Paula";
let edad = 25;
let ciudad = "Valencia";

Tenemos tres variables diferentes.

Un objeto nos permitirá agrupar toda esta información en una sola variable:

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

Ahora todos los datos relacionados con Paula están dentro de persona. Vamos a ver en detalle cómo funcionan los objetos.

¿Qué es un objeto?​

Primero que nada, un objeto se distingue porque al crearlo utilizamos las llaves {}. Además, todo objeto está formado obligatoriamente por propiedades.

Cada propiedad tiene siempre un nombre y un valor:

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

En este caso:

  • nombre, edad y ciudad son las propiedades.
  • "Paula", 25 y "Valencia" son sus valores.

Una propiedad se escribe siguiendo esta estructura:

propiedad: valor

Las propiedades se separan entre ellas mediante comas.

Crear objetos​

Para crear un objeto utilizamos llaves {}.

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

También podemos crear un objeto vacío:

let persona = {};

Y añadir propiedades posteriormente.

Los valores de un objeto pueden ser de diferentes tipos:

let producto = {
    nombre: "Ordenador",
    precio: 900,
    disponible: true
};

Incluso podemos guardar arrays como valores:

let persona = {
    nombre: "Paula",
    hobbies: ["leer", "viajar", "programar"]
};

Consultar propiedades​

Para consultar una propiedad podemos utilizar un punto ..

La sintaxis sería:

objeto.propiedad

Por ejemplo para el objeto persona queremos mostrar su nombre y su edad:

let persona = {
    nombre: "Paula",
    edad: 25
};

console.log(persona.nombre);
console.log(persona.edad);

Salida:

Paula
25

También podemos utilizar corchetes [], pero teniendo en cuenta que las propiedades se escribirán entre comillas dobles "":

console.log(persona["nombre"]);
console.log(persona["edad"]);

Las dos formas son válidas.

Normalmente utilizaremos la notación con punto porque es más sencilla de leer:

persona.nombre

Modificar propiedades​

Podemos cambiar el valor de una propiedad utilizando el operador =.

let persona = {
    nombre: "Paula",
    edad: 25
};

persona.edad = 26; // Aquí

console.log(persona.edad);

Salida:

26

También podemos modificar una propiedad de tipo String:

persona.nombre = "Laura";

Ahora el objeto sería:

{
    nombre: "Laura",
    edad: 26
}

Añadir propiedades​

No necesitamos que todas las propiedades existan cuando creamos el objeto.

Podemos añadir nuevas propiedades posteriormente:

En el siguiente ejemplo, inicialmente tenemos el objeto persona con solamente la propiedad nombre y su valor. Y con el punto . añadimos después las propiedad que queramos junto con su valor:

let persona = {
    nombre: "Paula"
};

persona.edad = 25;
persona.ciudad = "Valencia";

Ahora tenemos:

{
    nombre: "Paula",
    edad: 25,
    ciudad: "Valencia"
}

Por tanto, la misma sintaxis sirve tanto para modificar una propiedad existente como para crear una nueva.

Eliminar propiedades​

Para eliminar una propiedad utilizamos delete.

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

delete persona.edad;

console.log(persona);

Resultado:

{
    nombre: "Paula",
    ciudad: "Valencia"
}

La propiedad edad ha desaparecido del objeto.

Objetos y if​

Podemos utilizar las propiedades de un objeto dentro de condiciones.

Por ejemplo:

let persona = {
    nombre: "Paula",
    edad: 25
};

if (persona.edad >= 18) {

    console.log(`${persona.nombre} es mayor de edad`);

}

Salida:

Paula es mayor de edad

También podemos comprobar propiedades de tipo booleano:

let producto = {
    nombre: "Ordenador",
    disponible: true
};

if (producto.disponible) {

    console.log("El producto está disponible");

}

Salida:

El producto está disponible

Los objetos resultan especialmente útiles cuando queremos que una condición dependa de diferentes características de un mismo elemento. Por ejemplo:

let trabajo = {
    area: "Informática",
    salario: 1800,
    experiencia: "Junior"
}

if (trabajo.salario > 1500 && trabajo.experiencia === "Junior"){
    console.log("Tienes un buen salario para empezar");
}

Objetos dentro de objetos​

Los objetos pueden contener otros objetos como propiedades. Esto nos permite representar información más compleja.

Por ejemplo, una persona puede tener una propiedad direccion, que a su vez guarda un objeto con las propiedades ciudad, calle y numero:

let persona = {
    nombre: "Paula",
    edad: 25,
    direccion: {
        ciudad: "Valencia",
        calle: "Colón",
        numero: 10
    }
};

Para acceder a las propiedades del objeto interior, simplemente encadenamos los puntos, empezando del más general al más específico:

console.log(persona.direccion.ciudad);

Salida:

Valencia

Observa que el primer punto es:

persona.direccion;

Ésto nos devolvería el valor asociado a direccion:

{
    ciudad: "Valencia",
    calle: "Colón",
    numero: 10
}

Por lo que si ahora queremos la ciudad, volvemos a poner otro punto:

persona.direccion.ciudad;

También podemos modificar sus propiedades:

persona.direccion.numero = 15;

Ahora numero vale 15.

Podemos pensar en la estructura de esta forma:

persona
├── nombre
├── edad
└── direccion
    ├── ciudad
    ├── calle
    └── numero

Arrays dentro de objetos​

Un objeto también puede contener un array.

let persona = {
    nombre: "Paula",
    hobbies: ["leer", "viajar", "programar"]
};

Para acceder a un elemento del array utilizamos su índice como siempre:

console.log(persona.hobbies[0]);

Salida:

leer

Aquí estamos combinando una propiedad de un objeto con un índice de un array:

persona.hobbies[0]

Al igual que antes vamos de más general a más específico. Si queremos saber el primer hobbie, primero necesitamos acceder al array de hobbies:

persona.hobbies;

Que devolvería:

["leer", "viajar", "programar"]

Y una vez accedemos al array, lo podemos tratar como tal y usar el índice del primer hobbie:

persona.hobbies[0]

Es muy habitual combinar objetos con arrays, simpelemente hemos de ir con cuidado y poner la propiedad o el índice de más "afuera" a más "adentro":

let persona = {
    nombre: "Paula",
    hobbies: {
        deporte: ["natacion", "atletismo"],
        musica: ["trompeta", "piano"]
    }
};

console.log(persona.hobbies.musica[0]); // trompeta

Arrays de objetos​

También podemos hacer lo contrario: tener un array cuyos elementos sean objetos.

Por ejemplo:

let personas = [
    {
        nombre: "Paula",
        edad: 25
    },
    {
        nombre: "Luis",
        edad: 30
    },
    {
        nombre: "Lluna",
        edad: 22
    }
];

En este caso, podemos utilizar el índice para acceder a un objeto concreto:

console.log(personas[0]);

Resultado:

{ nombre: "Paula", edad: 25 }

Y después acceder a una propiedad de ese objeto:

console.log(personas[0].nombre);

Salida:

Paula

La estructura es:

personas
│
├── [0] → { nombre: "Paula", edad: 25 }
├── [1] → { nombre: "Luis", edad: 30 }
└── [2] → { nombre: "Lluna", edad: 22 }

Por tanto:

personas[1].nombre

significa:

  1. personas → accedemos al array.
  2. [1] → seleccionamos el segundo elemento.
  3. .nombre → accedemos a la propiedad nombre del objeto.

El resultado será:

Luis

Arrays de objetos con arrays​

Podemos combinar todavía más estructuras.

Por ejemplo, cada persona puede tener varios hobbies:

let personas = [
    {
        nombre: "Paula",
        hobbies: ["leer", "viajar"]
    },
    {
        nombre: "Luis",
        hobbies: ["fútbol", "cine"]
    }
];

Podemos acceder al primer hobby de Paula (que es la primera persona):

console.log(personas[0].hobbies[0]);

Salida:

leer

Y al segundo hobby de Luis (que es la segunda persona):

console.log(personas[1].hobbies[1]);

Salida:

cine

Aquí estamos combinando índices y propiedades varias veces:

personas[1].hobbies[1]
personas
   ↓
[1]              → segundo objeto
   ↓
.hobbies         → array de hobbies
   ↓
[1]              → segundo hobby
   ↓
"cine"

Recorrer objetos con for​

Es muy común tener un array de objetos.

Por ejemplo, podemos imaginarlo como un listado que contiene la misma información de varias personas. Por tanto para varias personas quiero guardar el nombre y la edad:

let personas = [
    { nombre: "Paula", edad: 20 },
    { nombre: "Luis", edad: 17 },
    { nombre: "Lluna", edad: 30 }
];

Aquí tenemos un array ([]) que contiene tres objetos ({}), todos ellos con las mismas propiedades nombre y edad pero cada uno con valores distintos.

Si queremos imprimir el nombre de todos ellos podemos recorrerlo utilizando un for normal:

for (let i = 0; i < personas.length; i++) {

    console.log(personas[i].nombre);

}

Salida:

Paula
Luis
Lluna

Analizemos el bucle for:

  1. Como estamos recorriendo un array, empezamos desde la posción 0 hasta personas.length. Lo
for (let i = 0; i < personas.length; i++)
  1. Como estamos recorriendo un array, la i significa la posición. Por lo que el elemento en sí es personas[i]. En este ejemplo el elemento del array es un objeto:
{ nombre: "Paula", edad: 20 }
{ nombre: "Luis", edad: 17 }
{ nombre: "Lluna", edad: 30 }

Por lo que personas[i] lo tratamos como si fuese un objeto, por tanto...

  1. Accedemos a las propiedades como personas[i].propiedad.
console.log(personas[i].nombre);

Podemos acceder a cualquier propiedad siempre con listado[i].propiedad:

for (let i = 0; i < personas.length; i++) {

    if (personas[i].edad >= 18) {

        console.log(`${personas[i].nombre} es mayor de edad`);

    }

}

Salida:

Paula es mayor de edad
Lluna es mayor de edad

Aquí combinamos lo que ya conocemos:

  • Un array para almacenar varias personas.
  • Un for para recorrerlas.
  • Un if para comprobar la edad.
  • Las propiedades del objeto para obtener la información.

Por otro lado, como aunque los elementos sean objetos, lo que en verdad recorremos es un simple array. Por lo que podemos usar también el for...of:

for (let objeto of personas){
    console.log(objeto.nombre);
}

Aquí, como vimos en la lección de arrays, no necesitamos ningún índice ni posición, ya que con esta estructura la variable objeto en este caso ya hace referencia al propio elemento del array (un objeto). Por lo que podemos utilizar directamente el punto para acceder a sus propiedaddes.​

for...in​

Acabamos de ver una estructura muy común de arrays de objetos y cómo se recorren:

let personas = [
    { nombre: "Paula", edad: 20 },
    { nombre: "Luis", edad: 17 },
    { nombre: "Lluna", edad: 30 }
];

Pero también existe una manera de recorrer objetos en sí. Para ello utilizaremos una nueva variación del for llamada for...in.

Por ejemplo, el objeto persona tiene las propiedades nombre, edad y ciudad:

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

Con el for...in podemos recorrer sus propiedades:

for (let propiedad in persona) {

    console.log(propiedad);

}

Salida:

nombre
edad
ciudad

La variable propiedad contiene el nombre de cada propiedad. Si te fijas tiene exactamente la misma estructura que un for...of pero con la palabra in.

Este for...in permite acceder directamente a la propiedad. Pero podemos aprovechar que tenemos acceso al nombre de la propiedad para obtener también su valor utilizando los corchetes:

for (let propiedad in persona) {

    console.log(`${propiedad}: ${persona[propiedad]}`);

}

Salida:

nombre: Paula
edad: 25
ciudad: Valencia

Es importante observar que utilizamos:

persona[propiedad]

y no:

persona.propiedad

Esto ocurre porque propiedad es una variable cuyo contenido va cambiando. Por lo que dentro de un for...in solo funciona el acceso a valores con corchetes.

for...of vs for...in​

Es importante no confundir estos dos bucles.

Para un array:

let frutas = ["manzana", "plátano", "naranja"];

for (let fruta of frutas) {

    console.log(fruta);

}

for...of recorre los elemento del array.

Para un objeto:

let persona = {
    nombre: "Ana",
    edad: 25
};

for (let propiedad in persona) {

    console.log(propiedad);

}

for...in recorre las propiedades.

Podemos recordarlo así:

  • for...of → elementos de una colección.
  • for...in → propiedades de un objeto.

Objetos y JSON​

Cuando trabajamos con aplicaciones web es muy habitual tener que enviar o recibir objetos.

Para ello se utiliza frecuentemente JSON.

JSON significa JavaScript Object Notation y es un formato de texto utilizado para representar datos estructurados.

Un objeto JavaScript puede tener este aspecto:

let persona = {
    nombre: "Paula",
    edad: 25
};

Mientras que su representación en JSON sería:

{
    "nombre": "Paula",
    "edad": 25
}

La principal diferencia que debemos observar es que en JSON los nombres de las propiedades aparecen entre comillas dobles y se escriben en fichero .json aparte.

Convertir un objeto a JSON​

Para convertir un objeto JavaScript en un String JSON utilizamos:

JSON.stringify()

Por ejemplo:

let persona = {
    nombre: "Paula",
    edad: 25
};

let json = JSON.stringify(persona);

console.log(json);

Obtenemos un String JSON que representa el objeto persona:

{"nombre":"Paula","edad":25}

Ahora json es un String con estructura JSON, no un objeto.

Podemos comprobarlo:

console.log(typeof json);

Salida:

string

Esto es muy habitual cuando necesitamos enviar información a un servidor.

Convertir JSON a objeto​

También podemos hacer el proceso contrario.

Si tenemos un String que contiene JSON, podemos convertirlo en un objeto utilizando:

JSON.parse()

Por ejemplo:

let json = '{"nombre":"Paula","edad":25}';

let persona = JSON.parse(json);

console.log(persona.nombre);

Salida:

Paula

Ahora persona vuelve a ser un objeto JavaScript.

Podemos comprobarlo:

console.log(typeof persona);

Salida:

object

Por tanto:

Objeto JavaScript
       ↓
JSON.stringify()
       ↓
String JSON

Y podemos hacer el proceso contrario:

String JSON
       ↓
JSON.parse()
       ↓
Objeto JavaScript

Resumen

Los objetos permiten agrupar información relacionada mediante propiedades.

Podemos:

  • Crear objetos utilizando {}.
  • Consultar propiedades con . o [].
  • Modificar propiedades utilizando =.
  • Añadir nuevas propiedades.
  • Eliminar propiedades utilizando delete.
  • Utilizar sus propiedades en condiciones if.
  • Recorrer arrays de objetos utilizando for.
  • Recorrer las propiedades de un objeto utilizando for...in.
  • Convertir objetos a JSON con JSON.stringify().
  • Convertir JSON a objetos con JSON.parse().

Una de las estructuras que utilizaremos constantemente será un array de objetos:

let productos = [
    { nombre: "Ratón", precio: 20 },
    { nombre: "Teclado", precio: 40 },
    { nombre: "Monitor", precio: 200 }
];

Esta estructura es especialmente importante porque aparece constantemente al trabajar con APIs, bases de datos y aplicaciones web.

Ejemplos resueltos

Ejercicio resuelto 1 - Información de un producto​

Enunciado​

Crea un objeto que represente un producto con nombre, precio y disponibilidad.

Si el producto está disponible, muestra un mensaje indicando que se puede comprar.

Solución​

let producto = {
    nombre: "Teclado",
    precio: 40,
    disponible: true
};

if (producto.disponible) {

    console.log(`${producto.nombre} disponible por ${producto.precio} €`);

}

Salida:

Teclado disponible por 40 €

Explicación​

Creamos un objeto con tres propiedades.

Después utilizamos if para comprobar el valor de disponible.

Ejercicio resuelto 2 - Recorrer una lista de productos​

Enunciado​

Tenemos varios productos. Muestra únicamente los productos que cuesten más de 50 €.

Solución​

let productos = [
    { nombre: "Ratón", precio: 20 },
    { nombre: "Teclado", precio: 60 },
    { nombre: "Monitor", precio: 200 }
];

for (let i = 0; i < productos.length; i++) {

    if (productos[i].precio > 50) {

        console.log(productos[i].nombre);

    }

}

Salida:

Teclado
Monitor

Explicación​

El for recorre el array.

En cada repetición accedemos al objeto correspondiente mediante:

productos[i]

Después consultamos su propiedad precio:

productos[i].precio

Finalmente, el if decide si debemos mostrar el producto.

Ejercicio resuelto 3 - Recorrer las propiedades de un objeto​

Enunciado​

Muestra todas las propiedades y valores de una persona utilizando for...in.

Solución​

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

for (let propiedad in persona) {

    console.log(`${propiedad}: ${persona[propiedad]}`);

}

Salida:

nombre: Ana
edad: 25
ciudad: Valencia

Explicación​

En cada repetición, propiedad contiene un nombre diferente:

nombre
edad
ciudad

Utilizamos ese nombre para acceder al valor correspondiente:

persona[propiedad]

Ejercicio resuelto 4 - Convertir un objeto a JSON​

Enunciado​

Crea un objeto que represente un usuario y conviértelo en un String JSON.

Solución​

let usuario = {
    nombre: "Carlos",
    edad: 30,
    activo: true
};

let json = JSON.stringify(usuario);

console.log(json);

Salida:

{"nombre":"Carlos","edad":30,"activo":true}

Explicación​

JSON.stringify() convierte el objeto JavaScript en un String que utiliza el formato JSON.

Esto resulta especialmente útil para enviar objetos a través de una API.