Objetos en

Acerca de Objetos

Explicación

Además de los tipos de datos primitivos como number y string, en JavaScript hay otro tipo de datos importante llamado object. Los objetos son colecciones de pares clave-valor. Como tales, se pueden usar como lo que en otros lenguajes se suele llamar mapas o diccionarios.

En otros lenguajes, a menudo todos los valores de un mapa deben tener el mismo tipo de datos. En JavaScript, solo se restringe el tipo de la clave: tiene que ser un string. Los valores dentro de un mismo objeto pueden tener tipos distintos. Pueden ser tipos primitivos como los números, pero también arrays, otros objetos o incluso funciones. Esto hace que los objetos sean muy versátiles, de modo que también son entidades clave para la programación orientada a objetos (POO) en JavaScript.

A continuación nos centraremos en los objetos como colecciones o mapas. Otros casos de uso de los objetos se tratarán en otros conceptos, como por ejemplo Clases.

Crear un objeto

Puedes crear un objeto literal con llaves. También puedes incluir directamente algunas entradas (pares clave-valor). Para ello, indica primero la clave, seguida de dos puntos y el valor.

const emptyObject = {};

const obj = {
  favoriteNumber: 42,
  greeting: 'Hello World',
  useGreeting: true,
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
  fruits: ['melon', 'papaya'],
  addNumbers: function (a, b) {
    return a + b;
  },
};

La coma final después de la última entrada es opcional en JavaScript. Puedes leer sobre las ventajas de usarla aquí.

Quizá te preguntes por qué las claves no van entre comillas aunque en teoría son strings. Se trata de una notación abreviada. Si la clave sigue las reglas de nomenclatura de un identificador de JavaScript, puedes omitir las comillas. Para las claves con caracteres especiales en el nombre, tienes que usar la notación de string habitual.

const obj = {
  '1keyStartsWithNumber': '...',
  'key/with/slashes': '...',
  'key-with-dashes': '...',
  'key with spaces': '...',
  '#&()[]{}èä樹keyWithSpecialChars': '...',
};

A menudo querrás añadir variables que ya existen al declarar un objeto. Esto suele dar lugar a pares clave-valor como name: name. JavaScript tiene una notación abreviada que permite escribir simplemente name. También existe una notación abreviada para definir una función dentro de un objeto. En ese caso puedes omitir los dos puntos y la palabra clave function.

const x = 1;
const y = 2;

const obj = {
  x: x,
  y: y,
  calcSum: function (a, b) {
    return a + b;
  },
};

// Can be shortened to ...
const obj = {
  x,
  y,
  calcSum(a, b) {
    return a + b;
  },
};

Si quieres crear un objeto literal con un nombre de clave que está guardado en una variable o que se obtiene mediante una expresión, tienes que encerrar la variable o la expresión entre corchetes.

const key = 'greeting';

const obj = {
  [key]: 'hello world',
};
console.log(obj);
// => { greeting: 'hello world' }

Obtener un valor

Hay dos formas de obtener el valor de una clave determinada: la notación de punto y la notación de corchetes.

const obj = { greeting: 'hello world' };

obj.greeting;
// => hello world

obj['greeting'];
// => hello world

// Bracket notation also works with variables.
const key = 'greeting';
obj[key];
// => hello world

Usar la notación de punto como forma abreviada tiene la misma restricción que omitir las comillas. Solo funciona si la clave sigue las reglas de nomenclatura de los identificadores.

Si intentas obtener una clave que no existe en el objeto, JavaScript devuelve undefined. Consulta Null y undefined para obtener más detalles sobre esto.

Puedes encadenar las claves si quieres obtener un valor de un objeto anidado.

const obj = {
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
};

obj.address.city;
// => 'Batticaloa'

obj['address']['city'];
// => 'Batticaloa'

// Notations can also be mixed.
obj.address['city'];
// => 'Batticaloa'

Añadir o cambiar un valor

Puedes añadir o cambiar un valor con el operador de asignación =. De nuevo, tienes disponibles la notación de punto y la de corchetes.

const obj = { greeting: 'hello world' };

obj.greeting = 'Hi there!';
obj['greeting'] = 'Welcome.';

obj.newKey1 = 'new value 1';
obj['new key 2'] = 'new value 2';

const key = 'new key 3';
obj[key] = 'new value 3';

Eliminar una entrada

Puedes eliminar un par clave-valor de un objeto con la palabra clave delete.

const obj = {
  key1: 'value1',
  key2: 'value2',
};

delete obj.key1;
delete obj['key2'];

Ten en cuenta que, aunque para las claves que no existen se devuelve undefined, asignar undefined a una clave no elimina la entrada. En su lugar, usa siempre delete.

Comprobar si existe una clave

Puedes comprobar si una determinada clave existe en un objeto con el método hasOwnProperty.

const obj = { greeting: 'hello world' };

obj.hasOwnProperty('greeting');
// => true

obj.hasOwnProperty('age');
// => false

hasOwnProperty devuelve false para las claves heredadas. Normalmente este es el comportamiento deseado. Si quieres incluir las claves heredadas en la comprobación de existencia, puedes usar en su lugar el operador in.

Recorrer un objeto

Existe un bucle for...in especial para iterar sobre todas las claves de un objeto.

const obj = {
  name: 'Ali',
  age: 65,
};

for (let key in obj) {
  console.log(key, obj[key]);
}
// name Ali
// age 65

Puede parecer que for...in siempre recorre las claves en el orden en que aparecen o se añadieron al objeto (orden de inserción). Sin embargo, no deberías confiar en ello, porque hay casos especiales en los que el orden diferirá del orden de inserción. Escribe siempre tu código como si el orden fuera arbitrario. Si necesitas un orden fiable, usa un Map o un [array][concept-arrays] anidado en lugar de un objeto.

El bucle for…in tiene una trampa si el objeto tiene claves heredadas. El bucle for…in también las recorrerá. Normalmente querrás evitar esto, así que tienes que saltártelas como se muestra a continuación.

for (let key in obj) {
  if (!obj.hasOwnProperty(key)) {
    continue;
  }
  // ...
}

JavaScript también tiene un bucle for...of, por ejemplo para iterar sobre arrays. Es importante tener en cuenta que for...in y for...of no son intercambiables; consulta la documentación de MDN para más detalles sobre esto.

Claves, valores y entradas

El objeto integrado Object proporciona métodos auxiliares para obtener todas las claves, los valores o las entradas de un objeto determinado como arrays.

const obj = {
  name: 'Ali',
  age: 65,
};

Object.keys(obj);
// => [ 'name', 'age' ]

Object.values(obj);
// => [ 'Ali', 65 ]

Object.entries(obj);
// => [ [ 'name', 'Ali' ], [ 'age', 65 ] ]

Un objeto realmente vacío

Quizá hayas notado que un objeto vacío en JavaScript no está completamente vacío. Por ejemplo, contiene el método hasOwnProperty y otros métodos como toString. Normalmente esto no causa ningún problema, pero si alguna vez necesitas crear un objeto realmente vacío, usa un objeto nulo, que se puede crear con Object.create(null).