Tutorial de claves de objetos JavaScript: cómo utilizar un par clave-valor JS

Puede agrupar datos relacionados en una sola estructura de datos utilizando un objeto JavaScript, como este:

const desk = { height: "4 feet", weight: "30 pounds", color: "brown", material: "wood", }; 

Un objeto contiene propiedades o pares clave-valor. El deskobjeto de arriba tiene cuatro propiedades. Cada propiedad tiene un nombre, que también se llama clave, y un valor correspondiente.

Por ejemplo, la clave heighttiene el valor "4 feet". Juntos, la clave y el valor forman una sola propiedad.

height: "4 feet", 

El deskobjeto contiene datos sobre un escritorio. De hecho, esta es una razón por la que usaría un objeto JavaScript: para almacenar datos. También es sencillo recuperar los datos que almacena en un objeto. Estos aspectos hacen que los objetos sean muy útiles.

Este artículo lo pondrá en funcionamiento con objetos JavaScript:

  • como crear un objeto
  • cómo almacenar datos en un objeto
  • y recuperar datos de él.

Comencemos por crear un objeto.

Cómo crear un objeto en JavaScript

Crearé un objeto llamado a pizzacontinuación y le agregaré pares clave-valor.

const pizza = { topping: "cheese", sauce: "marinara", size: "small" }; 

Las claves están a la izquierda de los dos puntos :y los valores están a la derecha. Cada par clave-valor es un property. Hay tres propiedades en este ejemplo:

  • La cobertura clave tiene un valor "queso" .
  • La salsa clave tiene un valor “marinara” .
  • El tamaño de la clave tiene un valor "pequeño" .

Cada propiedad está separada por una coma. Todas las propiedades están envueltas en llaves.

Esta es la sintaxis básica del objeto. Pero hay algunas reglas a tener en cuenta al crear objetos JavaScript.

Claves de objeto en JavaScript

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

Eche un vistazo de cerca al siguiente ejemplo. Los nombres de las claves 1y en 2realidad están coaccionados en cadenas.

const shoppingCart = { 1: "apple", 2: "oranges" }; 

Es una diferencia que queda clara cuando imprime el objeto.

console.log(shoppingCart); //Result: { '1': 'apple', '2': 'oranges' } 

Hay otra regla a tener en cuenta acerca de los nombres de las claves: si el nombre de la clave contiene espacios, es necesario que entre comillas.

Eche un vistazo al programmerobjeto de abajo. Observe el nombre de la última clave,"current project name". Este nombre de clave contiene espacios, así que lo envolví entre comillas.

const programmer = { firstname: "Phil", age: 21, backendDeveloper: true, languages: ["Python", "JavaScript", "Java", "C++"], "current project name": "The Amazing App" }; 

Valores de objeto en JavaScript

Un valor, por otro lado, puede ser cualquier tipo de datos, incluida una matriz, un número o un valor booleano. Los valores del ejemplo anterior contienen estos tipos: cadena, entero, booleano y una matriz.

Incluso puede usar una función como valor, en cuyo caso se conoce como método. sounds(), en el objeto siguiente, es un ejemplo.

const animal = { type: "cat", name: "kitty", sounds() { console.log("meow meow") } }; 

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

Puede hacer estas cosas usando la notación de puntos o corchetes, que abordaremos a continuación.

Cómo funcionan la notación de puntos y la notación de corchetes en JavaScript

La notación de puntos y la notación de corchetes son dos formas de acceder y utilizar las propiedades de un objeto. Probablemente te encuentres buscando la notación de puntos con más frecuencia, así que comenzaremos con eso.

Cómo agregar un par clave-valor con notación de puntos en JavaScript

Crearé un vacío bookobjeto a continuación.

const book = {}; 

Para agregar un par clave-valor usando la notación de puntos, use la sintaxis:

objectName.keyName = value

Este es el código para agregar la clave (autor) y el valor ("Jane Smith") al bookobjeto:

book.author = "Jane Smith"; 

Aquí hay un desglose del código anterior:

  • book es el nombre del objeto
  • . (punto)
  • author es el nombre de la clave
  • = (igual)
  • "Jane Smith" es el valor

Cuando imprimo el objeto de libro, veré el par clave-valor recién agregado.

console.log(book); //Result: { author: 'Jane Smith' } 

Agregaré otro par clave-valor al bookobjeto.

book.publicationYear = 2006; 

El bookobjeto ahora tiene dos propiedades.

console.log(book); //Result: { author: 'Jane Smith', publicationYear: 2006 } 

Cómo acceder a datos en un objeto JavaScript usando notación de puntos

También puede utilizar la notación de puntos en una clave para acceder al valor relacionado.

Considera esto basketballPlayerobjeto.

const basketballPlayer = { name: "James", averagePointsPerGame: 20, height: "6 feet, 2 inches", position: "shooting guard" }; 

Supongamos que desea recuperar el valor "guardia de tiro". Esta es la sintaxis a utilizar:

objectName.keyName

Usemos esta sintaxis para obtener e imprimir el valor de "guardia de tiro".

console.log(basketballPlayer.position); //Result: shooting guard 

Aquí hay un desglose del código anterior:

  • basketballPlayer es el nombre del objeto
  • . (punto)
  • position es el nombre de la clave

Este es otro ejemplo.

console.log(basketballPlayer.name); //Result: James 

Cómo eliminar un par clave-valor en JavaScript

Para eliminar un par clave-valor, utilice el deleteoperador. Esta es la sintaxis:

delete objectName.keyName

Entonces para eliminar el heightkey and its value from the basketballPlayer object, you’d write this code:

delete basketballPlayer.height; 

As a result, the basketballPlayer object now has three key-value pairs.

console.log(basketballPlayer); //Result: { name: 'James', averagePointsPerGame: 20, position: 'shooting guard' } 

You’ll probably find yourself reaching for dot notation frequently, though there are certain requirements to be aware of.

When using dot notation, key names can’t contain spaces, hyphens, or start with a number.

For example, say I try to add a key that contains spaces using dot notation. I’ll get an error.

basketballPlayer.shooting percentage = "75%"; //Results in an error 

So dot notation won’t work in every situation. That’s why there’s another option: bracket notation.

How to Add a Key-Value Pair Using Bracket Notation in JavaScript

Just like dot notation, you can use bracket notation to add a key-value pair to an object.

Bracket notation offers more flexibility than dot notation. That’s because key names can include spaces and hyphens, and they can start with numbers.

I'll create an employeeobject below.

const employee = {}; 

Now I want to add a key-value pair using bracket notation. This is the syntax:

objectName[“keyName”] = value

So this is how I’d add the key (sales) and value (“occupation”) to the employee object:

employee["occupation"] = "sales"; 

Here's a breakdown of the above code:

  • employee is the object's name
  • "occupation" is the key name
  • = (equals)
  • "sales" is the value

Below are several more examples that use bracket notation's flexibility to add a variety of key-value pairs.

//Add multi-word key name employee["travels frequently"] = true; //Add key name that starts with a number and includes a hyphen employee["1st-territory"] = "Chicago"; //Add a key name that starts with a number employee["25"] = "total customers"; 

When I print the employee object, it looks like this:

{ '25': 'total customers', occupation: 'sales', 'travels frequently': true, '1st-territory': 'Chicago' } 

With this information in mind, we can add the “shooting percentage” key to the basketballPlayer object from above.

const basketballPlayer = { name: "James", averagePointsPerGame: 20, height: "6 feet, 2 inches", position: "shooting guard" }; 

You may remember that dot notation left us with an error when we tried to add a key that included spaces.

basketballPlayer.shooting percentage = "75%"; //Results in an error 

But bracket notation leaves us error-free, as you can see here:

basketballPlayer["shooting percentage"] = "75%"; 

This is the result when I print the object:

{ name: 'James', averagePointsPerGame: 20, height: '6 feet, 2 inches', position: 'shooting guard', 'shooting percentage': '75%' } 

How to Access Data in a JavaScript Object Using Bracket Notation

You can also use bracket notation on a key to access the related value.

Recall the animal object from the start of the article.

const animal = { type: "cat", name: "kitty", sounds() { console.log("meow meow") } }; 

Let's get the value associated with the key, name. To do this, wrap the key name quotes and put it in brackets. This is the syntax:

objectName[“keyName”]

Here's the code you'd write with bracket notation: animal["name"];.

This is a breakdown of the above code:

  • animal is the object's name
  • ["name"] is the key name enclosed in square brackets

Here’s another example.

console.log(animal["sounds"]()); //Result: meow meow undefined 

Note that sounds()is a method, which is why I added the parentheses at the end to invoke it.

This is how you’d invoke a method using dot notation.

console.log(animal.sounds()); //Result: meow meow undefined 

JavaScript Object Methods

You know how to access specific properties. But what if you want all of the keys or all of the values from an object?

There are two methods that will give you the information you need.

const runner = { name: "Jessica", age: 20, milesPerWeek: 40, race: "marathon" }; 

Use the Object.keys() method to retrieve all of the key names from an object.

This is the syntax:

Object.keys(objectName)

We can use this method on the above runner object.

Object.keys(runner); 

If you print the result, you’ll get an array of the object’s keys.

console.log(Object.keys(runner)); //Result: [ 'name', 'age', 'milesPerWeek', 'race' ] 

Likewise, you can use the Object.values() method to get all of the values from an object. This is the syntax:

Object.values(objectName)

Now we'll get all of the values from the runner object.

console.log(Object.values(runner)); //Result: [ 'Jessica', 20, 40, 'marathon' ] 

We’ve covered a lot of ground. Here’s a summary of the key ideas:

Objects:

  • Use objects to store data as properties (key-value pairs).
  • Key names must be strings, symbols, or numbers.
  • Values can be any type.

Access object properties:

  • Dot notation: objectName.keyName
  • Bracket notation: objectName[“keyName”]

Delete a property:

  • delete objectName.keyName

There’s a lot you can do with objects. And now you’ve got some of the basics so you can take advantage of this powerful JavaScript data type.

I write about learning to program, and the best ways to go about it on amymhaddad.com. I also tweet about programming, learning, and productivity: @amymhaddad.