Getting To Know JavaScript Built-In Methods — Objects
This is the fourth post in my series about JavaScript’s handy built-in methods for different data types (links to the rest of the series are at the bottom of this post). There are a ton of handy ready-made methods that can be used to manipulate data, and I’ll be explaining some of the most useful ones.
Today’s post will be dealing with JavaScript Objects. Object can be a slightly confusing term as it can refer to any complex data type in JavaScript, (if you need a refresher, this post recaps the different JavaScript primitive and complex data types), but here we are focusing on objects which are constructed with curly braces, and store data referenced by keys. For example, a person object could look like this:
const person = { firstName: "Tolani", lastName: "Benson" }The data attached to the keys can be of any data type including functions, arrays, and other nested objects. Data can be accessed, added and edited using dot notation or square bracket notation:
person.city = "London"
person["firstName"] = "Toli"person
>> { firstName: Toli, lastName: "Benson", city: "London }
Let’s look at some of the most useful built-in methods for JavaScript objects.
JavaScript Object Methods
Object.keys(obj)
Returns an array of the keys that the object contains. (A more advanced version is Object.getOwnPropertyNames(obj) which also returns non-enumerable properties, but I won’t go into this here, read the docs for more information about enumerable & non-enumerable properties.)
Object.values(obj)
Returns an array of the values of each of the elements in the object.
Object.entries(obj)
Returns an array containing nested arrays for each key-value pair. The first element in each nested array is the key, and the second is the value. Eg:
obj = { a: 1, b: "b", c: [3,4,5] }Object.entries(obj)
>> [["a",1], ["b","b"], ["c",[3,4,5]]
Object.fromEntries(arr)
Creates a new object from an array of key-value pairs passed as the argument. Returns the new object.
Object.assign(target, source)
Adds the key-value pairs from the source element to the target element. Mutates the target element. Return value is the mutated target element. If there are duplicate key names the values in the target will be overwritten with the values with the same key names from the source element.
Object.freeze(obj)
Prevents an object from being edited — makes it immutable. You may have noticed that I defined the person object at the start as a constant, but I was still able to add new properties and edit the values of existing properties. This is because objects point to a specific point in memory, and the constant refers to the location in memory of the object, not the content. Using Object.freeze you can prevent the data within the object from being changed. An attempt to do so will either fail silently, or in strict mode will throw an error. However, it is worth noting that this only applies one level deep, so be aware that it is still possible to change the values of nested objects. The return value is the object which was frozen.
Object.isFrozen(obj)
Checks whether the object passed in is frozen. Returns a boolean.
Object.seal(obj)
A less strict version of Object.freeze. Prevents properties from being added to or deleted from an object, but the values of existing properties can be changed. Returns the object which is being sealed.
Object.isSealed(obj)
Checks whether the object passed in is sealed. Returns a boolean (will also return true for objects which are frozen).
Object.preventExtensions(obj)
Prevents new properties from being added to an object, but existing ones can be edited and deleted. Returns the object passed in.
Object.isExtensible(obj)
Checks whether the object passed in is able to have new properties added. Returns a boolean.
Object.getOwnPropertyDescriptors(obj)
For more advanced users. Returns an object containing nested objects detailing the configuration of the descriptors (such as value, writable, configurable etc) for each key/property of the provided object.
This is not an exhaustive list, but the use cases for the remaining JavaScript Object Methods are limited. Have a look at the MDN Docs if you’d like to find out about some of the other more advanced Object Methods. If you want to read about JavaScript built-in methods for other data types check out the rest of the series below!
