An object is the basic building block of programs in JavaScript, used in building classes and complex data, and as an integral part of object-oriented programming.
I have used JavaScript daily as a full-stack software developer for the last five-odd years. Objects of JavaScript have played a vital role.
In this article, I will share 10 tricks and tips you can use as a JavaScript developer to manipulate and work efficiently with JavaScript objects.
Combining two objects using the spread operator
There are many scenarios where you must combine two or more data sets from different sources. In such cases, there are multiple ways to do this in JavaScript.
The most commonly used method is using Object.assign(). This method takes multiple parameters. The first one is the assigned object, and the rest of the parameters are the objects we need to combine.
const name = { id: '1234', name: 'Hoa'};
const university = { id: '1234', university: 'Harvard'};
const PersonalDetails = Object.assign({}, name, university);
console.log(PersonalDetails);
// { id: '1234', name: 'Hoa', university: 'Harvard' }
However, without complicating things, you can use the spread operator to combine. You can spread any number of objects to combine them into a single object.
const PersonalDetails = { ...name, ...university };
console.log(PersonalDetails);
// { id: '1234', name: 'Hoa', university: 'Harvard' }
One important fact to note is that duplicate keys will override those of the preceding objects in both methods.
Getting the lists of keys and values from an object
During development, there are occasions when we need to obtain only keys or only values from an object. Both of the following built-in functions are pretty straightforward:
- Object.keys(): used to get the list of keys.
- Object.values(): used to get the list of values.
const vehicle = { brand: 'BWM', year: 2023, type: 'suv'};
//get keys
console.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]
//get values
console.log(Object.values(vehicle)); // [ 'BWM', 2023, 'suv' ]
Using hasOwnProperty() to check an item
When using a for-in loop, checking a property of an object can be useful to avoid iterating through the properties from the object’s prototype. Instead of using an if-else block, here we can use Object.hasOwnProperty().
const vehicle = { brand: 'BWM', year: 2023, type: 'suv'};
for (var item in vehicle) {
if (vehicle.hasOwnProperty(item)) {
console.log(item);
};
};
// brand
// year
// type
Using splice instead of delete
When using the delete method, an application will replace an item with undefined instead of removing it from the array. So it is better to use splice() to delete an item from an array.
Let’s see what happens when using delete.
var arrayItems = ['a' , 2 , 'b', '3', 'c', '4'];
arrayItems.length; // returns 6
delete arrayItems[2]; // returns true
arrayItems.length; // returns 6
console.log(arrayItems); // [ 'a', 2, undefined, '3', 'c', '4' ]
When using splice(), the following occurs.
var arrayItems = ['a' , 2 , 'b', '3', 'c', '4'];
arrayItems.length; // returns 6
arrayItems.splice(2,1); // returns ['b']
arrayItems.length; // returns 5
console.log(arrayItems); // [ 'a', 2, '3', 'c', '4' ]
The delete method should be used to delete an object property.
Cloning an object correctly
Assume you have an object and need to copy it to change its value, but the original object should be unchanged. There are two methods of how you can do that.
The first method is to use Object.assign(), which copies values of all enumerable properties from one object to another.
var initialVehicle = { brand: 'BWM', year: 2023, type: 'suv'};
var secondaryVehicle = Object.assign({}, initialVehicle);
console.log(secondaryVehicle); // { brand: 'BWM', year: 2023, type: 'suv'};
The second method is to copy the object using JSON.parse().
var initialVehicle = { brand: 'BWM', year: 2023, type: 'suv'};
var secondaryVehicle = JSON.parse(JSON.stringify(initialVehicle));
console.log(secondaryVehicle); // { brand: 'BWM', year: 2023, type: 'suv'};
Selecting specific data from an object
There are a few methods to select keys from an object. The method you choose depends on what you want to do with the values. The following example shows an organized way of selecting data from an object.
Here, you can select the keys you need and pull them into a new object.
const selectObj = (obj, items) => {
return items.reduce((result, item) => {
result[item] = obj[item];
return result;
}, {});
};
const vehicle = { brand: 'BWM', year: 2023, type: 'suv'};
const selected = selectObj(vehicle, ['brand', 'type']);
console.log(selected); // { brand: 'BWM', type: 'suv' }
Removing keys from an object
Sometimes it is necessary to remove specific keys and their values from an object.
This might be necessary for a scenario where you are building an API and want to remove sensitive data.
The most suitable method is to write a reusable remove method that takes an object and a list of keys to be removed as inputs. You can then loop through each key to be removed and delete it from the object.
const remove = (object, removeList = []) => {
const result = { ...object };
removeList.forEach((item) => {
delete result[item];
});
return result;
}
const vehicle = { brand: 'BWM', year: 2023, type: 'suv'}
const itemRemoved = remove(vehicle, ['year']);
console.log(itemRemoved); // Result { brand: 'BWM', type: 'suv' }
Pulling object data into an array
There are scenarios where you need to pull your object data into an array, such as a dropdown menu. You can use the Object.entries() function, which takes an object as its first argument and returns an array.
The returned object is an array of an array. The inner arrays will have two values: the first is the key, and the second is the value.
const vehicle = { brand: 'BWM', year: 2023, type: 'suv'}
console.log(Object.entries(vehicle));
// [ [ 'brand', 'BWM' ], [ 'year', 2023 ], [ 'type', 'suv' ] ]
Looping through a JavaScript object
There are several methods in JavaScript that can be used to loop through an object. I will compare two of the best methods I use.
The first method is to use Object.entries(), a function that avoids looking up each value in the original object.
const vehicle = { brand: 'BWM', year: 2023, type: 'suv'}
Object.entries(vehicle).forEach(
([key, value]) => console.log(key, value)
);
// brand BWM
// year 2023
// type suv
As a much better and clearer method, you can use object destructuring with Object.entries().
const vehicle = { brand: 'BWM', year: 2023, type: 'suv'}
for (const [key, value] of Object.entries(vehicle)) {
console.log(key, value);
}
// brand BWM
// year 2023
// type suv
Conditionally adding attributes to objects
Usually, developers use an if-else condition as a much longer method to add a new element to an object conditionally. However, the simplest way is to use object destructuring and the spread operator
const type = { type: 'suv' };
const vehicle = {
brand: 'BMW',
year: 2023,
...(!type ? {} : type)
}
console.log(vehicle); //{ brand: 'BMW', year: 2023, type: 'suv' }
Likewise, using different conditions, you can add as many elements as you like to an object.
Conclusion
Like any other programming language, JavaScript has many tricks to handle objects, letting us write our programs more simply and beautifully. This article discussed 10 of the tips and tricks I use most when dealing with objects.
I hope you found this article helpful. Thank you for reading and happy coding 💻 😉!
Ref
https://webdevgenius.com/posts/10-tips-and-tricks-with-javascript-objects
Top comments (4)
Your article presents a nice selection of features and details! Conditionally adding attributes/merging objects in particular can be a very powerful tool.
I would add a few notes to this, though:
Object.hasOwn()was added to resolve concerns that.hasOwnProperty()could be modified or even missing, like when you useObject.create(null).While
.splice()allows you to modify the array in place, non-mutating methods are becoming more popular. I typically use.filter()to remove array elements.The
JSON.parse(JSON.stringify())trick can be useful, especially when you have nested arrays or objects that you do not want to share, but these operations can be very slow, so they should be used as a "last resort".It's great to see this kind of content; sharing patterns and tools that can help us all write better code!
Thanks for you sharing! Happy coding 😉
Just a small not on
.splice(), you list that it returnstruein your code example, where.splice()actually returns the values removed from the array.Yes, you are right. I will edit my post. Thanks for your feedback