I'm sure many of you are familiar with the Object data type. Many of the data types that we use in everyday programming inherit from this type, like objects and arrays. But did you know about these seven methods and what they're capable of?
Let's dive right in.
Object.assign()
Ever want some properties to carry over from one object to another? This method provides that functionality!
const obj = {
a: 0,
b: 1,
c: 2
};
const ex = {
c: 3,
d: 4,
e: 5
};
Object.assign(obj, ex);
console.log(Object.entries(obj)); // [["a", 0], ["b", 1], ["c", 3], ["d", 4], ["e", 5]]
This method takes the first argument (the target) and adds the properties from the second (or more, all together are called the sources) to it, overwriting any properties from the original object that have the same name.
Let's look at an example that has more than one source.
const obj = {
a: 0,
b: 1,
c: 2
};
const arr = [
{ d: 3 },
{ e: 4, f: 5 }
]
Object.assign(obj, ...arr);
console.log(Object.entries(obj)); // [["a", 0], ["b", 1], ["c", 2], ["d", 3], ["e", 4], ["f", 5]]
Object.freeze()
When we want to keep a variable from being altered, we use a constant (defined with const as the variable declaration). However, this sometimes is ineffective - especially when we're dealing with arrays or objects where properties can still be overwritten. This is where Object.freeze() comes in.
const obj = {
a: 0,
b: 1,
c: 2
};
Object.freeze(obj);
obj.d = 3;
console.log(Object.entries(obj)); // [["a", 0], ["b", 1], ["c", 2]]
Note that this is in non-strict mode. When in strict mode, an error will be thrown if an attempt is made to modify the frozen object.
It works with arrays too.
const arr = ["a", "b", "c"];
Object.freeze(arr);
arr[3] = "d";
console.log(arr); // ["a", "b", "c"]
Hence we can create fully constant variables with the power of freezing.
Object.isFrozen()
Don't know whether or not an object is frozen? Check using this method!
const obj = {
a: 0,
b: 1,
c: 2
};
console.log(Object.isFrozen(obj)); // false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // true
You might be wondering how you unfreeze an object. Short answer - you can't.
The best workaround to reusing a frozen object is by creating a copy that isn't frozen. That's about as far as you can get.
However, there are a few fixes like Object.seal() and Object.preventExtensions(). These methods allow some mutation of the frozen object, but it will never respond quite the same way. If you're freezing an object, plan for it to stay frozen - it's a pretty big security risk otherwise.
Object.entries()
This method is pretty useful as it allows us to create a full list of keys and values. It's also useful when working with data structures like Map - it makes conversion to and from the structure easy. Let's take a look at how it works.
const obj = {
a: 0,
b: 1,
c: 2
};
console.log(Object.entries(obj)); // [["a", 0], ["b", 1], ["c", 2]]
As you can see, it's returning an array. Not just any array though, it's an array that's full of other arrays - each representing a key-value pair.
And yes, it works with arrays too.
const arr = ["a", "b", "c"];
console.log(Object.entries(arr)); // [["0", "a"], ["1", "b"], ["2", "c"]]
Why is this useful? For one, it provides a clean way to iterate through lists.
const obj = {
a: 0,
b: 1,
c: 2
};
let objList = Object.entries(obj);
for (let i = 0; i < objList.length; i++) {
console.log(`${objList[i][0]}: ${objList[i][1]}`)
}
// "a: 0"
// "b: 1"
// "c: 2"
Apart from that, it's helpful when used to convert an object to a map.
const obj = {
a: 0,
b: 1,
c: 2
};
const map = new Map(Object.entries(obj));
console.log(map.size); // 3
console.log(map.get("a")); // 0
Object.fromEntries()
This is Object.entries() working backwards. It takes an array of arrays representing key-value pairs and creates an object. Let's start with the map we just created to demonstrate the difference.
const obj = {
a: 0,
b: 1,
c: 2
};
const map = new Map(Object.entries(obj));
const newObj = Object.fromEntries(map);
console.log(Object.entries(obj)); // [["a", 0], ["b", 1], ["c", 2]]
console.log(Object.entries(newObj)); // [["a", 0], ["b", 1], ["c", 2]]
Even though we can't check for equality without working through some long-winded process, we can print out the entries and see that they are in fact the same.
You don't have to work from a map though, you can easily create a custom array and plug it in to create the same object.
const arr = [
["a", 0],
["b", 1],
["c", 2]
];
console.log(Object.fromEntries(arr)); // { a: 0, b: 1, c: 2 }
Object.keys()
This method returns an array of all keys that are defined by a given object. Consider the following object, which has three key-value pairs.
const obj = {
a: 0,
b: 1,
c: 2
};
console.log(Object.keys(obj)); // ["a", "b", "c"]
You can also pass an array as an argument with some interesting results.
const arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // ["0", "1", "2"]
This behavior is due to the fact that arrays are indexed with numbers, so in a way they're like objects that have numbers connected to values. Heck, we could make an object that behaves exactly similar to this array that produces exactly the same result.
const arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // ["0", "1", "2"]
const obj = {
"0": "a",
"1": "b",
"2": "c"
};
console.log(Object.keys(obj)); // ["0", "1", "2"]
One of the possible uses of this method is to iterate through an object - once we know how many keys an object has, we can go through each one and print out it and its respective value.
const obj = {
a: 0,
b: 1,
c: 2
};
let keys = Object.keys(obj);
console.log(keys); // ["a", "b", "c"]
for (let i = 0; i < keys.length; i++) {
console.log(`${keys[i]}: ${obj[keys[i]]}`);
}
// "a: 0"
// "b: 1"
// "c: 2"
Object.values()
This method functions in largely the same way as Object.keys() - it takes something like an object and returns an array of the values associated with each key, not the keys associated with each value.
We can take the same code that we used earlier and substitute the new method in place of the old one to see what it returns.
const obj = {
a: 0,
b: 1,
c: 2
};
console.log(Object.values(obj)); // [0, 1, 2]
We can pass an array to the method, but this functions exactly the same as simply calling the array itself because all it's doing is returning an array of the elements.
const arr = ["a", "b", "c"];
console.log(Object.values(arr)); // ["a", "b", "c"]
console.log(arr); // ["a", "b", "c"]
I'm sure you can think of more than one use case for this method as well (iterating through an object, finding the size of an object, etc.
I've thought of one that I'll write here - I want to find the size of any object with a handy method that I'm taking from the Set data structure in JS - Object.size. My problem is that this method doesn't exist - yet! Let's create it by using our newfound knowledge.
const obj = {
a: 0,
b: 1,
c: 2
};
Object.prototype.size = function() {
return Object.values(this).length;
};
console.log(obj.size()); // 3
obj.d = 3;
console.log(obj.size()); // 4
That's just fantastic, although you should keep in mind that adding methods like this to a larger class like Object is generally frowned upon. We can make our code better by just creating a function that we pass an object to.
const getObjectSize = function(obj) {
return Object.values(obj).length;
};
Don't forget ES6 syntax!
const getObjectSize = obj => Object.values(obj.length);
Fin.
Hope you enjoyed!
Don't forget to drop a like and a follow if you like my posts. Later :)