Objetos en

Acerca de Objetos

Explicación

Además de tipos de datos primitivos como number y string, en JavaScript hay otro tipo de dato 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 dato. 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 diferentes. 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 usos de los objetos se cubren en otros conceptos; consulta, por ejemplo, clases.

Crear un objeto

Creas un objeto literal usando llaves. También puedes incluir directamente algunas entradas (pares clave-valor). Para ello, escribe 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ás te preguntes por qué las claves no van entre comillas, aunque se supone que son strings. Esto es una notación abreviada. Si la clave sigue las reglas de nombres de un identificador de JavaScript, puedes omitir las comillas. Para claves con caracteres especiales en el nombre, debes usar la notación de string habitual.

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

A menudo querrás agregar variables existentes 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 en su lugar. También hay una notación abreviada para definir una función dentro de un objeto. Allí 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 se deriva de una expresión, debes 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 dada: 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 nombres de identificadores.

Si intentas obtener una clave que no existe en el objeto, JavaScript devuelve undefined. Consulta Null y undefined para 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'

Agregar o cambiar un valor

Puedes agregar 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 se devuelve undefined para claves que no existen, asignar undefined a una clave no elimina la entrada. En su lugar, usa siempre delete.

Comprobar si existe una clave

Puedes comprobar si cierta 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. Por lo general, este es el comportamiento deseado. Si quieres incluir las claves heredadas en la comprobación de existencia, puedes usar el operador in en su lugar.

Recorrer un objeto

Existe un bucle for...in especial para recorrer 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 agregaron al objeto (orden de inserción). Sin embargo, no deberías confiar en esto, porque hay casos especiales en los que el orden será distinto del orden de inserción. Escribe siempre tu código como si el orden fuera arbitrario. Si necesitas un orden confiable, usa un Map o un [array][concept-arrays] anidado en lugar de un objeto.

El bucle for…in tiene una trampa cuando el objeto tiene claves heredadas. El bucle for…in también las visitará. Por lo general, querrás evitar esto, así que debes saltarlas 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 recorrer arrays. Es importante notar que for...in y for...of no son intercambiables; consulta la documentación de MDN para más detalles.

Claves, valores y entradas

El objeto incorporado Object ofrece métodos auxiliares para obtener todas las claves, los valores o las entradas de un objeto dado 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ás 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. Por lo general, eso 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).