#javascript
    #objects

Looping Through an Object's Properties

What's an Object and Why Loop Through It?

In programming, an object is a data structure that is able to hold information.

Objects are typically used to store that data in a key-value format. This means, that in order to access a specific piece of data (let's call this a value) that the object contains, you must know the key to access it with.

These key-value pairs together are known as properties of the object.

An example is this an object that stores information about a car

// This is an object representing a car
const randomCar = {
  model: 'Model S',
  manufacturer: 'Tesla',
  exteriorColor: 'Black',
  interiorColor: 'Tan',
  numberOfWheels: 4
};

Some of the keys in this object are model, manufacturer, exteriorColor, and so forth.

At times, you may want to access each property of an object but you may not necessarily know the key for each property in the object.

That's where looping through an object comes in handy and here are a few ways to do it.


The "for...in" Loop

A quick way to loop through the keys in an object like ours above is using the for...in loop.

It's simple and can easily get you the keys of an object which you then use to get the value for that key.

Here's how it looks for our randomCar object from above

// This gets each key in the object
for (let key in randomCar) {

  // A caveat is we will get inherited properties as well
  // So we should check this property really is only ours
  if (randomCar.hasOwnProperty(key)) {

    // Let's get the value for the key
    const value = randomCar[key];
		
    console.log(`The key "${key}" has a value of "${value}"`);
  } 
}

There's a little tidbit to add about using the for...in loop, and it's that we need to check that the property we've accessed belongs directly to our object and wasn't inherited.

That's what is being done in the line of code

...
if (randomCar.hasOwnProperty(key))
...

This typically only comes into play if an object inherits from some other class. A more modern and concise approach is shown below.


A Modern Approach — Object.entries()

An even faster way of looping through an object's properties is using Object.entries().

You call the Object.entries() method by passing in your object as an argument and it'll return a list of the key-value pairs available in the object.

In our usage with our randomCar example, we'd call the Object.entries like this

Object.entries(randomCar)

With Object.entries(), we can retrieve both the key and value of each property all with a single line of code.

Here's how we do that with our randomCar object

// This gets you both the key and the value for each property
for (let [key, value] of Object.entries(randomCar)) {

  // Object.entries get us our own properties
  // So no need for an additional check

  // We have the key and value
  // and can display it immediately
  console.log(`The key "${key}" has a value of "${value}"`);
}

And that's all there is to it. Hopefully these two snippets of code get you looping through objects no time.

You can read more about the for...in loop here and more about Object.entries here.


Object.keys() and Object.values()

With the above loops, you're able to work with the keys and values of an object in a sequential way at the same time.

However, sometimes you might want to work with only the keys of an object, or only the values that object has.

The Object class provides us with a couple of convenience methods to do just that!

To get a list of the keys an object has

You can use Object.keys(...) like this

const randomCarKeys = Object.keys(randomCar);

console.log(randomCarKeys);
// Outputs ["model", "manufacturer", "exteriorColor", "interiorColor", "numberOfWheels"]

To get a list of the values an object has in it's keys

You can use Object.values(...) like this

const randomCarValues = Object.values(randomCar);

console.log(randomCarValues);
// Outputs ["Model S", "Tesla", "Black", "Tan", "4"]

These two methods can be useful when you only need one part of an object and not the other. The Object class has other utility methods, so be sure to check those out too!


zerochass

practical and goal-oriented resources

learn by doing. enjoy what you do.