Table of Contents
JavaScript provides some nice utility functions that we can use to work with Objects more easily. These functions are found on JavaScript’s Built-in Object, which can be accessed from anywhere inside the JavaScript programs.
Object.keys()
The Object.keys() method returns an array of all the Object’s keys or property names.
It is a really useful function since it allows us to examine Objects when we’re not sure exactly what properties they’re supposed to contain. Read more about Object.keys() method
let myCar = {
color: "red",
yearModel: 1990,
brand : "Ford",
model: "Focus",
}
console.log(Object.keys(myCar)); //['color', 'yearModel', 'brand', 'model']
Why the Object.keys() is so useful?
For example, having an array of an Object’s keys would allow us to use JavaScript’s built-in array functions to perform operations on those keys.
Such as, copy the keys to a new array using the slice(), sorting them, filtering them, or capitalizing them, etc
let myCar = {
color: "red",
yearModel: 1990,
brand : "Ford",
model: "Focus",
}
console.log(Object.keys(myCar).sort()); //['brand', 'color', 'model', 'yearModel']
Object.values()
This method is similar to Object.keys() except instead of getting all the keys of an Object, it returns all the values of the Object as an array.
let myCar = {
color: "red",
yearModel: 1990,
brand : "Ford",
model: "Focus",
}
console.log(Object.values(myCar)); //['red', 1990, 'Ford', 'Focus']
Just like at Object.keys() method we can perform array operations on those keys, such as, copy the values to a new array using the slice(), sorting them, filtering them, or capitalizing them, etc
let myCar = {
color: "red",
yearModel: 1990,
brand : "Ford",
model: "Focus",
}
let newCar = Object.values(myCar).slice();
console.log(newCar); //['red', 1990, 'Ford', 'Focus']
Object.entries()
The Object.entries() method returns an array of two-element arrays.
Each of these two-element arrays contains one of the Object’s keys as its first element and the corresponding value for that key as the second element.
let myCar = {
color: "red",
yearModel: 1990,
brand : "Ford",
model: "Focus",
}
console.log(Object.entries(myCar)); //[['color', 'red'], ['yearModel', 1990], ['brand', 'Ford'], ['model', 'Focus']]
Object.assign()
The Object.assign() method takes all the keys and values of one Object and sets them on another Object.
let myCar = {
color: "red",
yearModel: 1990,
brand : "Ford",
model: "Focus",
}
let myVehicle = {
type: "car",
}
Object.assign(myVehicle, myCar);
console.log(myVehicle) //{type: 'car', color: 'red', yearModel: 1990, brand: 'Ford', model: 'Focus'}
console.log(myCar) //{color: 'red', yearModel: 1990, brand: 'Ford', model: 'Focus'}
The first parameter is the target Object.
Object.assign() modifies the first Object that we passed to it, as a first argument.
We can pass as many Objects as we want to Object.assign().
When we pass multiple Objects as arguments, is possible that some objects have the same keys
In this case, the Object that comes later in the arguments list will override any other values for that key provided by Objects that come before it.
We can use also Object.assign to copy Objects
In JavaScript, the Objects are assigned by reference.
And because of this, when we assign an existing Object to another variable, instead of creating a copy, we’ll find two variables pointing to the same Object in memory.
How to create a copy of an Object?
If we want to create an actual copy of an Object, we can do that by calling Object.assign(), with an empty Object as the first argument, and then whatever Object we want to copy as the second argument.
let myCar = {
color: "red",
yearModel: 1990,
brand : "Ford",
model: "Focus",
}
let copyCar = Object.assign({}, myCar);
console.log(copyCar) //{color: 'red', yearModel: 1990, brand: 'Ford', model: 'Focus'}
Object.assign({}, myObject) it takes all the keys and values of the second argument myObject (the Object that we want to copy) and sets them on the empty Object that we pass as the first argument.
We can assign the new copy object to a new variable because Object.assign() it will return the target object.
The changes that we make to our new Object will no longer be reflected on the original Object that we copied.
Object.assign() will do a shallow Copy of the object
What a Shallow Copy means?
An Object can be considered as Shallow Copied when a separate copy of top-level value type properties is assigned to the new Object and the properties that represent an object are copied by reference.
What a Deep Copy means?
The object is said to be deep copied when each property to the object points to a separate copy, even if the property points to an object, reference values.
By using Object.assign(), you are actually doing Shallow Copy of the object.
For deep cloning, we need to use alternatives, because Object.assign() copies property values.
If the source value is a reference to an object, it only copies the reference value.
Read more here about Object.assign Warning for Deep Clone
Hello there!
I hope you find this post useful!I'm Mihai, a programmer and online marketing specialist, very passionate about everything that means online marketing, focused on eCommerce.
If you have a collaboration proposal or need helps with your projects feel free to contact me. I will always be glad to help you!
