Loop through Object in Reverse Order using JavaScript

# Loop through Object in Reverse Order in JavaScript

To loop through an object in reverse order:

Use the Object.keys() method to get an array of the object's keys.
Call the reverse() method to reverse the array.
Use the forEach() method to iterate over the array and access the object's keys and values in reverse order.

index.js

Copied!
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

// 👇️ ['c', 'b', 'a']
const reversedKeys = Object.keys(obj).reverse();

reversedKeys.forEach(key => {
  console.log(key, obj[key]); // 👉️ c three, b two, a one
});

loop through object in reverse order

The code for this article is available on GitHub

The first step is to get an array of the object's keys by using the Object.keys() method.

index.js

Copied!
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

const keys = Object.keys(obj);
console.log(keys); // 👉️ ['a', 'b','c']

The Object.keys() method returns the object's keys ordered in the same way as given by looping over the object's properties manually.

We used the Array.reverse() method to reverse the array of keys.

The reverse() method reverses the elements in the array in place and returns the result.

index.js

Copied!
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

const keys = Object.keys(obj);
console.log(keys); // 👉️ ['a', 'b','c']

const reversed = keys.reverse();
console.log(reversed); // 👉️ ['c', 'b', 'a']

It's irrelevant in this scenario, but note that the reverse() method changes the contents of the original array.

index.js

Copied!
const arr = ['a', 'b', 'c'];

const reversed = arr.reverse();
console.log(reversed); // 👉️ ['c', 'b', 'a']

console.log(arr); // 👉️ ['c', 'b', 'a']

To circumvent mutating the original array, you will often have to create a copy before calling the reverse() method.

index.js

Copied!
const arr = ['a', 'b', 'c'];

const reversed = [...arr].reverse();
console.log(reversed); // 👉️ ['c', 'b', 'a']

console.log(arr); // 👉️ ['a', 'b', 'c']

The last step is to use the Array.forEach() method to iterate over the reversed array of keys.

We can then use each key to access the values in the object.

index.js

Copied!
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

const reversedKeys = Object.keys(obj).reverse();

reversedKeys.forEach((key, index) => {
  console.log(key, obj[key]); // 👉️ c three, b two, a one

  console.log(index); // 👉️ 0 1 2
});

You also have access to the index of the current iteration when using the Array.forEach() method.

If you only need to access the object's values, use the Object.values() method instead.

# Loop through an Object's Values in Reverse Order in JavaScript

This is a three-step process:

Use the Object.values() method to get an array of the object's values.
Call the reverse() method to reverse the array.
Use the forEach() method to iterate over the array of values in reverse order.

index.js

Copied!
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

// 👇️ [ 'three', 'two', 'one' ]
const reversedValues = Object.values(obj).reverse();

reversedValues.forEach(value => {
  console.log(value); // 👉️ three, two, one
});

loop through object values in reverse order

The code for this article is available on GitHub

The Object.values() method returns an array of the object's values.

index.js

Copied!
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

// 👇️ [ 'one', 'two', 'three' ]
console.log(Object.values(obj));

// 👇️ [ 'three', 'two', 'one' ]
console.log(Object.values(obj).reverse());

We used the Array.reverse() method to reverse the array and used the forEach() method to iterate over the reversed array.

The function we passed to the Array.forEach method gets called with each element in the array.

The forEach() method returns undefined, so we have to perform some kind of mutation to persist the state.

index.js

Copied!
const obj = {
  a: 1,
  b: 2,
  c: 3,
};

// 👇️ [3, 2, 1]
const reversedValues = Object.values(obj).reverse();

let total = 0;

reversedValues.forEach(value => {
  console.log(value); // 👉️ 3, 2, 1

  total += value;
});

console.log(total); // 👉️ 6

On each iteration, we add the current object value to the total variable to preserve the state.

# Loop through an Object's entries in Reverse Order in JavaScript

You can also reverse the output of the Object.entries() method to iterate over an object in reverse order.

index.js

Copied!
const obj = {
  a: 1,
  b: 2,
  c: 3,
};

// 👇️ [ [ 'c', 3 ], [ 'b', 2 ], [ 'a', 1 ] ]
const reversedEntries = Object.entries(obj).reverse();

reversedEntries.forEach(([key, value]) => {
  console.log(key, value); // 👉️ c 3, b 2, a 1
});

loop through object entries in reverse order

The code for this article is available on GitHub

The Object.entries() method returns an array of the given object's key-value pairs.

index.js

Copied!
const reversedEntries = Object.entries(obj).reverse();

// 👇️ [ [ 'c', 3 ], [ 'b', 2 ], [ 'a', 1 ] ]
console.log(reversedEntries);

On each iteration, we use destructuring assignment to assign the key and value to variables and log them to the console.

index.js

Copied!
const [key, value] = ['a', 1];

console.log(key); // 👉️ a
console.log(value); // 1

The key variable gets assigned the first array element and the value variable - the second.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Loop through Object in Reverse Order using JavaScript

# Loop through Object in Reverse Order in JavaScript

# Loop through an Object's Values in Reverse Order in JavaScript

# Loop through an Object's entries in Reverse Order in JavaScript

# Additional Resources

Borislav Hadzhiev