Se puede agrupar datos relacionados en una sola estructura de datos al usar un objeto de JavaScript, de la siguiente manera:

const escritorio = {
   altura: "1 metro",
   peso: "30 libras",
   color: "marrón",
   material: "madera",
 };

Un objeto contiene propiedades, o pares de clave-valor. El objeto escritorio tiene cuatro propiedades. Cada propiedad tiene un nombre, que también se le llama clave y, además, tiene su valor correspondiente.

Por ejemplo, la clave altura tiene un valor de "1 metro". Juntos, la clave y el valor conforman una propiedad.

altura: "1 metro",

El objeto escritorio contiene datos sobre un escritorio. De hecho, esta es la razón por la cual usarías un objeto de JavaScript: para guardar datos. También es simple obtener los datos que se guardan en los objetos. Estos aspectos hacen que los objetos sean bastante útiles.

Este artículo te pondrá al día con los objetos en JavaScript:

  • Cómo crear un objeto
  • Cómo guardar datos en un objeto
  • Y cómo obtener datos de dicho objeto

Empecemos por crear un objeto.

Cómo crear un objeto en JavaScript

Crearé un objeto llamado pizza  y le agregaré pares de clave-valor:

const pizza = {
   ingrediente: "queso",
   salsa: "marinara",
   tamaño: "pequeña"
};

Las claves se encuentran a la izquierda de los dos puntos : y los valores a su derecha. Cada par clave-valor es una propiedad. Hay tres propiedades en este ejemplo:

  • La clave ingrediente tiene como valor queso
  • La clave salsa tiene como valor marinara
  • La clave tamaño tiene como valor pequeña

Cada propiedad se separa con una coma. Todas las propiedades se envuelven dentro de llaves {}.

Esta es la sintaxis básica de los objetos. Pero hay unas cuantas reglas que debes tener en cuenta al crear objetos en JavaScript.

Claves de los objetos en JavaScript

Cada clave en tu objeto de JavaScript debe ser una cadena de texto, símbolo o número.

Observa con detalle el ejemplo a continuación. Las claves nombradas 1 y 2 generan coerción a cadenas de texto.

const carritoDeCompras = {
   1: "manzana",
   2: "naranjas"
};

Es una diferencia que se hace clara cuando imprimes el objeto:

console.log(carritoDeCompras);
// Resultado: { '1': 'manzana', '2': 'naranjas' }

Hay otra regla a tener en cuenta sobre los nombres de las claves: si tu clave tiene espacios, debes envolverla dentro de comillas.

Observa el objeto programador a continuación. Notarás el nombre de la última clave, "nombre del proyecto actual". Esta clave tiene espacios, por lo que la envolví en comillas.

const programador = {
   primerNombre: "Phil",
   edad: 21,
   desarrolladorBackend: true,
   lenguajes: ["Python", "JavaScript", "Java", "C++"],
   "nombre del proyecto actual": "La aplicación asombrosa"
};

Valores de objetos en JavaScript

Por otra parte, un valor puede ser cualquier tipo de dato, incluyendo un arreglo, número o un booleano. Los valores en el ejemplo anterior son de los siguientes tipos: cadena de texto, número entero, booleano y un arreglo.

Puedes incluso usar una función como valor, caso en el cuál se le conoce como un método. sonidos(), en el objeto a continuación, es un ejemplo.

const animal = {
   tipo: "gato",
   nombre: "gatito",
   sonidos() { console.log("miau miau") }
};

Ahora digamos que quieres agregar o eliminar un par clave-valor. O simplemente quieres obtener el valor de un objeto.

Puedes hacer esto al usar notación por punto o notación por corchetes, que abordaremos a continuación.

Notación por punto y notación por corchetes en JavaScript

Las notaciones por punto y por corchetes son dos maneras de acceder y usar las propiedades de un objeto. Es probable que uses la notación por punto más seguido, así que empezaremos con esta.

Cómo agregar un par clave-valor con la notación por punto en JavaScript

Crearé un objeto vacío libro a continuación:

const libro = {};

Para agregar un par clave-valor usando la notación por punto, usa la siguiente sintaxis:

nombreDelObjeto.nombreDeLaClave = valor

Este sería el código para agregar la clave autor y el valor "Jane Smith" al objeto libro:

libro.autor = "Jane Smith";

Desglosando el código anterior, tenemos que:

  • libro es el nombre del objeto
  • . (punto)
  • autor es el nombre de la clave
  • = (igual a)
  • "Jane Smith" es el valor

Al imprimir el objeto libro, veremos el par clave-valor recientemente agregado:

console.log(libro);
// Resultado: { autor: "Jane Smith" }

Agregaré otro par clave-valor al objeto libro.

libro.añoDePublicación = 2006;

El objeto libro ahora tiene 2 propiedades.

console.log(libro);
// Resultado: { autor: 'Jane Smith', añoDePublicación: 2006 }

Cómo acceder a los datos usando notación por punto en un objeto de JavaScript

También puedes usar notación por punto en una clave para acceder a su valor asociado.

Considera el objeto jugadorDeBaloncesto.

const jugadorDeBaloncesto = {
   nombre: "James",
   promedioDePuntosPorJuego: 20,
   estatura: "1 metro, 89 centímetros",
   posición: "escolta"
};

Digamos que quieres obtener el valor "escolta". La sintaxis a usar es la siguiente:

nombreDelObjeto.nombreDeLaClave

Hagamos uso de esta sintaxis para obtener e imprimir el valor "escolta".

console.log(jugadorDeBaloncesto.posición);
// Resultado: escolta

Desglosando el código anterior, tenemos que:

  • jugadorDeBaloncesto es el nombre del objeto
  • . (punto)
  • posición es el nombre de la clave

Este es otro ejemplo:

console.log(jugadorDeBaloncesto.nombre);
// Resultado: James

Cómo eliminar un par clave-valor en JavaScript

Para eliminar en par clave-valor, usa el operador delete. Esta es la sintaxis:

delete nombreDelObjeto.nombreDeLaClave

Entonces, para eliminar la clave estatura y su valor del objeto jugadorDeBaloncesto, escribe el siguiente código:

delete jugadorDeBaloncesto.estatura;

Como resultado, el objeto jugadorDeBaloncesto ahora tiene 3 pares clave-valor.

console.log(jugadorDeBaloncesto);
// Resultado: { nombre: "James", promedioDePuntosPorJuego: 20, posición: "escolta" }

Lo más probable es que uses la notación por punto frecuentemente, pero existen ciertos requisitos que debes tener en cuenta.

Cuando usas la notación por punto, los nombres de las claves no pueden tener espacios, guiones o empezar con un número.

Por ejemplo, digamos que intentaré agregar una clave que contiene espacios usando la notación por punto. Obtendré un error.

jugadorDeBaloncesto.porcentaje de tiros = "75%";
// Resulta en un error

Esto quiere decir que la notación por punto no sirve en todas las situaciones. Por eso existe otra opción: notación por corchetes.

Cómo agregar un par clave-valor usando notación por corchetes en JavaScript

Así como la notación por punto, puedes usar notación por corchetes para agregar un par clave-valor a un objeto.

La notación por corchetes ofrece más flexibilidad que la notación por punto. Esto es porque los nombres de las claves pueden incluir espacios y guiones, así como empezar con números.

Crearé un objeto empleado a continuación.

const empleado = {};

Ahora quiero agregar un par clave-valor usando notación por corchetes. Esta es la sintaxis:

nombreDelObjeto[“nombreDeLaClave”] = valor

[!] El párrafo a continuación tiene la clave y el valor invertidos en el original. Corregido:

Entonces, de esta manera agregaría la clave ocupación y el valor "ventas" al objeto empleado.

empleado["ocupación"] = "ventas";

Desglosando el código anterior, tenemos que:

  • empleado es el nombre del objeto
  • "ocupación" es el nombre de la clave
  • = (igual a)
  • "ventas" es el valor

A continuación encontramos muchos más ejemplos que usan la flexibilidad de la notación por corchetes para agregar una variedad de pares clave-valor.

//Agrega clave con múltiples palabras
empleado["viaja frecuentemente"] = true;
 
//Agrega clave que empieza con un número y contiene un guión
empleado["1er-territorio"] = "Chicago";
 
//Aagrega clave que empieza con un número
empleado["25"] = "clientes totales";

Cuando imprimo el objeto empleado, se ve de la siguiente manera:

{
  '25': "clientes totales",
  ocupación: "ventas",
  "viaja frecuentemente": true,
  "1er-territorio": "Chicago"
}

Con esta información en mente, podemos agregar la clave "porcentaje de tiros" al objeto jugadorDeBaloncesto del ejemplo anterior.

const jugadorDeBaloncesto = {
   nombre: "James",
   promedioDePuntosPorJuego: 20,
   estatura: "1 metro, 89 centímetros",
   posición: "escolta"
};

Si lo recuerdas, la notación por punto nos arrojaba un error cuando intentamos agregar una clave que incluye espacios.

jugadorDeBaloncesto.porcentaje de tiros = "75%";
// Resulta en un error

Pero la notación por corchetes nos libera de errores, como puedes ver aquí:

jugadorDeBaloncesto["porcentaje de tiros"] = "75%";

Este es el resultado que obtengo cuando imprimo el objeto:

{
  nombre: "James",
  promedioDePuntosPorJuego: 20,
  estatura: "1 metro, 89 centímetros",
  posición: "escolta"
  "porcentaje de tiros": "75%"
}

Como acceder a los datos en un objeto de JavaScript usando notación por corchetes

También puedes usar notación por corchetes en una llave para acceder al valor asociado.

Recuerda el objeto animal al comienzo del artículo.

const animal = {
   tipo: "gato",
   nombre: "gatito",
   sonidos() { console.log("miau miau") }
};

Obtengamos el valor asociado con la clave nombre. Para hacer esto, envuelve dentro de corchetes la clave entre comillas. Esta es la sintaxis:

nombreDelObjeto[“nombreDeLaClave”]

Y este es el código que escribirías con notación por corchetes: animal["nombre"];.

Desglosando el código de arriba, tenemos que:

  • animal es el nombre del objeto
  • ["nombre"] es la clave entre comillas dentro de los corchetes

A continuación otro ejemplo.

console.log(animal["sonidos"]());

// Resultado: 
miau miau
undefined

Ten en cuenta que sonidos() es un método, razón por la cual agregué los paréntesis al final para invocarlo.

Para invocar un método usando la notación por punto sería:

console.log(animal.sonidos());

// Resultado: 
miau miau
undefined

Métodos de objetos en JavaScript

Sabes como acceder propiedades específicas. Pero ¿qué pasaría si quieres todas las claves o todos los valores de un objeto?

Existen dos métodos que te darán la información que necesitas.

const corredora = {
   nombre: "Jessica",
   edad: 20,
   kilómetrosPorSemana: 64,
   carrera: "maratón"
};

Usa el método Object.keys() para obtener todos los nombres de las claves en un objeto.

Esta es la sintaxis:

Object.keys(nombreDelObjeto)

Podemos usar este método sobre el objeto corredora.

Object.keys(corredora);

Si imprimes el resultado, obtendrás un arreglo con las claves del objeto.

console.log(Object.keys(corredora));
// Resultado: [ 'nombre', 'edad', 'kilometrosPorSemana', 'carrera' ]

De la misma forma, puedes usar el método Object.values() para obtener todos los valores de un objeto. Esta es la sintaxis:

Object.values(nombreDelObjeto)

Ahora obtendremos todos los valores del objeto corredora.

console.log(Object.values(corredora));
// Resultado: [ 'Jessica', 20, 64, 'maratón' ]

Hemos cubierto bastante terreno. He aquí un resumen de las ideas clave:

Objetos:

  • Usa objetos para almacenar datos como propiedades (pares clave-valor).
  • Los nombres de las claves deben ser cadenas de texto, símbolos o números.
  • Los valores pueden ser de cualquier tipo.

Acceder a las propiedades de los objetos:

  • Notación por punto: objectName.nombreDeLaClave
  • Notación por corchetes: objectName[“nombreDeLaClave”]

Eliminar una propiedad:

  • delete objectName.nombreDeLaClave

Es mucho lo que puedes hacer con los objetos. Ahora que tienes algunas bases, puedes sacar ventaja de este poderoso tipo de dato de JavaScript.

Escribo sobre aprender a programar y las mejores maneras de hacerlo en amymhaddad.com. También escribo en Twitter sobre programación, aprendizaje y productividad: @amymhaddad.

Traducido del artículo de Amy Haddad - JavaScript Object Keys Tutorial – How to Use a JS Key-Value Pair