Iterating through objects is a much-needed skill for any JavaScript developer. In this tutorial, you'll learn about the Object.keys() method, which returns an array of a given object's property names. Much like Object.values() and Object.entries() methods, it returns an array and has a similar output.

Basics of the Object.keys() method

If you've already tried object-oriented programming before, this method won't be tough. In JavaScript's OOP, an object can be defined as an unordered collection of data in the form of key-value pairs. Syntax of the Object.keys() method looks like this:

Object.keys(obj)

In this case, obj is an object and its enumerable properties are expected to be returned. To better illustrate this method and its syntax, take a look at the code example as follows:

const obj = { name: 'Bob', age: 40, profession: 'Engineer', access: 4 };
 
console.log(Object.keys(obj)); // Expected output: ["name", "age", "profession", "access"]

We provide an array with name, age, profession, and access as object properties in the key-value format. When we request the Object.keys() method, the expected output will represent these properties in the order as they were initially put within an array.

Look at one more example of a basic application of the Object.keys() method with different key-value pairs:

const obj = { 1: 'a', 2: 'b', 3: 'c' };
console.log(Object.keys(obj)); // Expected output: ['1', '2', '3']

Even when we provide various key-value pairs, the output you get with the Object.keys() method is the same.

Random ordering and return nuances

In previous examples, you've seen the key-value pairs ordered. It means that the output you've got was quite straightforward and logical. What if the initial input would contain pairs in a more chaotic order? Consider the following example:

var object = { 20: 'x', 10: 'y', 40: 'z' };
console.log(Object.keys(object)); // Expected output: [ '10', '20', '40' ]

In this instance, the Object.keys() method returns keys in a structured order, which is 10, 20, and 40. Because you've used random ordering, you've probably expected to get pairs as they are depicted in the code, which is: 20, 10, and 40.

However, the Object.keys() method returns the enumerable properties of a specified array in the ascending order of the value. Please note that such code behavior is expected, and thus you'd always get outputs in the ascending order, regardless of how random you've specified the initial key-value pairs.

While it's not directly linked to random ordering, the Object.keys() method remembers the position of values within the key-value pairs. Review the following example:

const arr = ['this', 'is', 'an', 'example'];
console.log(Object.keys(arr)); // Expected output: ['0', '1', '2', '3']

The output you get represents how each string within a specified array is located. If you've already learned the positions in JavaScript, this behavior of the Object.keys() method won't surprise you.

When the property is not enumerable

What would you do in a situation when the property within the array you're working with is not enumerable? These cases might happen with day-to-day tasks in JavaScript. Thus, you should be aware of how the Object.keys() method reacts in such situations. Review the following code snippet:

const myObj = Object.create({}, {
    getExample: {
      value: function () { return this.example; }
    }
});
myObj.example = 1;
console.log(Object.keys(myObj)); // Expected output: ['example']

As you can see, we introduce the enumerable property, which is getExample. Thus, when using the Object.keys() method, the output you get will equal 'example.' Such a situation is possible when using this method because of the specifications of how it works with enumerable properties. Don't forget that this behavior is expected and will naturally occur if you use Object.keys() with enumerable properties.

Non-objects to objects coercion

With the ES2015 (ES6) update to JavaScript, it became possible to coerce the non-objects to objects using the Object.keys() method. Review the following example with the ES2015 onwards and before that to better understand how it works.

In ES5:

const string = "example";
console.log(Object.keys(string)); // Expected output: TypeError: "example" is not an object

In ES2015+:

const string = "example";
console.log(Object.keys(string)); // [ '0', '1', '2', '3', '4', '5', '6', '7']

Even though you'll be using the ES2015+, please note that such a code output was not always the case in JavaScript. Thus, you can be confident that you can coerce the non-object, such as a string indicated earlier, into an object and work with it using the Object.keys() method.

Test yourself

  • Task 1. Using the following properties: name, profession, age, extract the numerable properties using the key-value pairs. The corresponding values for properties are Michael, lumber, 26.

Solution:

const obj = { name: 'Michael', profession: 'lumber', age: 26 };
 
console.log(Object.keys(obj)); // Expected output: ["name", "profession", "age"]

  • Task 2. Create an array with an unstructured ordering, including 70, 20, and 10. Then, assign values to these keys: x, y, z. After that, iterate through the array using the Object.keys() method.

Solution:

var object = { 70: 'x', 20: 'y', 10: 'z' };
console.log(Object.keys(object)); // Expected output: [ '10', '20', '70' ]

  • Task 3. Create an array with two strings: 'Java' and 'Script' and iterate through them using the Object.keys() method.

Solution:

const arr = ['Java', 'Script'];
console.log(Object.keys(arr)); // Expected output: ['0', '1']