An Overview of the JavaScript Object Methods .keys(), .values(), .entries(), and .freeze()
An object in JavaScript is a collection of key/value pairs. These values can consist of other datatypes such as strings, numbers, etc. They can also consist of functions and properties.
In other words, an object is an entity with properties and a type. If we liken objects to items in real life, you could say that a book is a type of object and its property is the number of pages it has. Similarly, breakfast is a type of meal, and it consists of cereal.
An object in JavaScript is set up like so:
Calling specific values within an object is done using this syntax:
JavaScript features many different ways to manipulate objects and I will cover a few of them in this article.
The first method I will discuss is Object.keys(). This method returns an array of a given object’s own keys.
Object.keys() will iterate through the object and return the keys in the same order that a normal loop would. It turns out this is also a handy way to figure out the length of an object as you can chain .length onto the end of this method like so:
Likewise, you can do the same thing with an object’s values using the Object.values() method. This method is similar to the method above and returns a given object’s values.
The Object.values() method can also be used in situations where a key has multiple values. Here I modified the key “foo” to have two values.
When running the Object.values() method on this new object, I get:
As you can see here, it returns an array inside of an array with the inner array being the first element of the index and the value of the key “bar” being the second element.
The next method I will discuss is the Object.entries() method. This method returns an array of a given object’s key/value pairs ordered according to when they were listed when creating the object.
As you can see below, you have three arrays nested within an outer array.
At this point, you could use another method to work with the results and further manipulate your data.
The last method I will discuss is the Object.freeze() method. This method prevents any modifications and extensions to the values of an object. That makes it useful when you specifically do not want said object to be modified.
Here I tried to update the value of elephant to be false. I tried to say that an elephant does not have four legs. Because I used the Object.freeze() however, the original value was returned and elephants continue to have four legs.
Interesting right? Keep in mind however, that using this method does allow for reassignment.
To many of those newer to JavaScript, you may be wondering how this method is any different from defining an object with const. Many might even go so far as to say that Object.freeze() and const are the same. This is not the case. As you can see below, while const prevents the reassignment of variables, it does not prevent const from updating variables.
This means that const and Object.freeze() appear to perform different actions.
In summary, const prevents the reassignment of the variable but still allows the value referenced by the const variable to change. On the other hand, Object.freeze() prevents the values referenced by the variable from changing but allows its reassignment (keep in mind that Object.freeze() doesn’t freeze nested objects without the addition of a little more code. Check https://github.com/substack/deep-freeze if you are curious to learn more).
So what happens if we combine the two?
As you can see, I wasn’t able to update this object’s values.
It would also appear that I am unable to reassign this variable. Clearly, Object.freeze() and const can be very powerful together!
In this article, I went over several object methods that can be used in JavaScript. I discussed Object.freeze(), Object.entries(), Object.values(), and Object.keys(). I hope these methods will be useful to you in the future should you choose to implement them.
