Object Keys, Values, and Entries: JavaScript ES6 Feature Series (Pt 9)
By: Paige Niedringhaus
Tags: JavaScript, ES6, Programming, Web Development, Front End Development

Object.keys()

This may sound hard to believe, especially if you’re coming from another programming language like Java, but up until ES2015, there was no built-in method in JavaScript to easily access an object’s property names, otherwise known as its keys.

Really?

Shocking, I know. Prior to this, a library like Lodash might be employed to do something that should be a basic, standardized method.

Happily, the ECMAScript committee got their act together with the release of ES2015, and the method Object.keys() was introduced. The method returns an array of a given object's own enumerable property names, in the same order as we get with a normal for loop.

Example of Object.keys() on an object:

const resistanceFighter = {

name: "John Connor",

age: 30,

title: "Resistance Leader",

fight() {

return `${this.name} leads the resistance fight against the machines.`

}

}; console.log(Object.keys(resistanceFighter)); // [ 'name', 'age', 'title', 'fight' ]

The Object.keys() syntax is very simple: You pass an object, like resistanceFighter , into the method as its parameter, and the method returns the keys, or names, of that object’s properties and methods.

In this case, it returns the three property names: name , age , and title , plus the method attached to the object, fight .

The elements are returned as strings in an array that correspond to the enumerable properties found directly on the object . The ordering of the properties is the same as that given by manually looping over the properties of the object.

Let’s take a look at some other examples of how Object.keys() will interact with various JavaScript data structures.

Object.keys() with a simple array:

const resistanceTeam = [ "Sarah J Connor", "Terminator", "John Connor"]; console.log(Object.keys(resistanceTeam)); // [ '0', '1', '2' ]

When running the method against an actual array, the keys returned are the “stringified” indexes of each item contained in the array.

Object.keys() with an array-like object:

const movieTitles = {

0: "The Terminator",

1: "Judgment Day",

2: "Rise of the Machines",

3: "Salvation",

4: "Genesis",

5: "Dark Fate"

} console.log(Object.keys(movieTitles)); // [ '0', '1', '2', '3', '4', '5' ]

Similar to a true array, an object that’s like an array with index numbers listed as its keys will return an array of numbers as strings when it’s run through the Object.keys() method.

Object.keys() on an array-like object with random key ordering:

const movieReleaseYears = {

1991: "Judgment Day",

2015: "Genisys",

2003: "Rise of the Machines",

1984: "The Terminator",

2019: "Dark Fate",

2009: "Salvation"

} console.log(Object.keys(movieReleaseYears)); // [ '1984', '1991', '2003', '2009', '2015', '2019' ]

If you run Object.keys() on an object with randomly ordered keys, like, say, keys that happen to be the years the different Terminator movies were released, the array of keys produced will be ordered from least to greatest.

If, however, you run this same method on an object where the keys are non-numerical strings, they will not be printed out in a sorted order. To get them sorted, you’ll still need to run the .sort() method on the array. See the example below for reference.

Object.keys() on an object with keys, both unsorted and sorted:

const movieDirectorsUnordered = {

director2: "Tim Miller",

director4: "Jonathan Mostow",

director1: "James Cameron",

director3: "McG"

} console.log(Object.keys(movieDirectorsUnordered)) // [ 'director2', 'director4', 'director1', 'director3' ] console.log(Object.keys(movieDirectorsUnordered).sort()); // [ 'director1', 'director2', 'director3', 'director4' ]

One more thing you can do with Object.keys() in ES2015: You can coerce non-object things like strings to objects.

Object.keys() coercing a string to an object:

const animal = "canine"; console.log(Object.keys(animal)); // [ '0', '1', '2', '3', '4', '5' ]

If you try to call this method in ES5 or below, a TypeError will be thrown, just as an FYI.

Now, let’s move on to the other half of the object equation: The values that go with the keys.