JavaScript Object Manipulation
JavaScript never ceases to surprise me: recently I was reviewing some basics concepts of object manipulation and discovered a bunch of simple methods that I’ve never used before. However, they are really handy, so I decided to create a brief review of what I found.
Just a quick reminder: JavaScript is designed on a simple object-based paradigm. Simply put, it’s all about objects. Similar to objects in the real life, a JavaScript object is a collection of properties, and a property is a combination of a name (or key) and a value. Here is an example of a simple object:
let cat = {
name: "Mary",
age: 2,
color: "black",
mischievous: true
}We have two ways to access the properties of an object: dot notation and bracket notation.
cat.name
// "Mary"cat['name']
// "Mary"
But what if you need to return all values from an object? Here comes Object.values() method.
let cat = {
name: "Mary",
age: 2,
color: "black",
mischievous: true
}let catValues = Object.values(cat);
console.log(catValues) //["Mary", 2, "black", true]
A similar concept works for all keys! Here you can use Object.keys() method.
let cat = {
name: "Mary",
age: 2,
color: "black",
mischievous: true
}let catKeys = Object.keys(cat);
console.log(catKeys) //["name", "age", "color", "mischievous"]
Wow, that’s useful. But what if you need an array of key/value pairs of an object? For this task, you can bravely use Object.entries() method.
let cat = {
name: "Mary",
age: 2,
color: "black",
mischievous: true
}let catAll = Object.entries(cat);
console.log(catAll)
//[["name", "Mary"], ["age", 2], ["color", "black"], ["mischievous", true]]
Okay, another challenge! How do you combine two objects together? You can use a spread operator — or Object.assign() method.
let cat = {
name: "Mary",
age: 2,
color: "black",
mischievous: true
}let catBreed = {
breed: "Scottish Fold"
}let catCombo = Object.assign(cat, catBreed)console.log(catCombo)//
{name: "Mary",
age: 2,
color: "black",
mischievous: true,
breed: "Scottish Fold"}
Another fun method is Object.freeze(). It allows you to prohibit any modifications towards existing properties or adding new properties and values in the object (spoiler: const still allows you to modify an object!).
let cat = {
name: "Mary",
age: 2,
color: "black",
mischievous: true
}Object.freeze(cat);
cat.color = "white";
console.log(cat.color) //"black"
Also, if you’d like to check, whether an object is frozen or not, you can simply use Object.isFrozen(). It will return a boolean.
If you’d like to prevent new properties from being added, but you still need to change the value of the existing ones, you can use Object.seal(). To determine if an object is sealed, you can use Object.isSealed() method.
Hope you’ll find these methods useful!
Sources:
