DEV Community

Cover image for [Series] Made Easy with JavaScript - Objects
Arunkumar Palaniappan
Arunkumar Palaniappan

Posted on • Updated on

[Series] Made Easy with JavaScript - Objects

Welcome to series Made easy with JavaScript. In this series we will be exploring some quick and efficient methods to do day to day operations in JavaScript. This post will explore on the most used operations/actions. Let’s get started.

You can read Part 1 of this series Made easy with JavaScript Arrays at https://akrp.in

Checking for a key exists in object

Checking for an key in object by value by validating it with undefined, but is not an accurate way of testing whether a key exists because undefined itself can be a value of an key.

const obj = { key: undefined };
if(obj["key"] !== undefined) {
    // key exists
}
Enter fullscreen mode Exit fullscreen mode

So, we can use in operator to check for a key.

if("key" in obj){
    // key exists
}
Enter fullscreen mode Exit fullscreen mode

We can also check if a key doesn't exist using negate condition with a parenthesis.

!("key" in obj) //  key does not exist
!"key" in obj   // ERROR!  Equivalent to "false in obj"
Enter fullscreen mode Exit fullscreen mode

If we want to particularly check for properties of the object instance (and not inherited properties), we can use hasOwnProperty

obj.hasOwnProperty("key") //  key exists
Enter fullscreen mode Exit fullscreen mode

In terms of performance, in offers better performance that hasOwnProperty.
perf-check-object-key

Iterating through all keys in an object

We can use various methods to iterate through an object in JavaScript, but the most easiest and high performing approach is using a plain for loop or Object.keys method.

// for loop
const myObject = {
    "key1": "value",
    "key2": "value"
};
for (let key in myObject) {
   console.log(key);    
   console.log(myObject[key]);
}
// Object.entries
Object.entries(myObject).forEach(([key, val]) => {
  console.log(key); 
  console.log(val); 
});
// Object.keys
Object.keys(myObject).forEach(key => {
  console.log(key);       
  console.log(myObject[key]);
});
Enter fullscreen mode Exit fullscreen mode

Plain for loop and Object.keys is providing better performance that using Object.entries.

perf-iterate-object

Merging two objects

We can able to merge two JavaScript objects using different methods like using Object.assign or even a plain for loop.

Object.assign provides better performance than a traditional for loop.

// using for loop
const obj1 = { "location": "delhi", "country": "us" };
const obj2 = { "pet": "dog" };

const merge = (obj1,obj2) => {
    let obj3 = {};
    for (let key in obj1) { obj3[key] = obj1[key]; }
    for (ley key in obj2) { obj3[key] = obj2[key]; }
    return obj3;
}
console.log(merge(obj1,obj2));

// using object.assign
console.log(Object.assign(obj1, obj2));

Enter fullscreen mode Exit fullscreen mode

perf-combine-object

Checking if the Object is empty

We can check if the object is empty by using a traditional for loop or checking the length of object using Object.keys method and as you expect both provides a similar performance.

// Object.keys
var obj = {};

console.log(Object.keys(obj).length === 0 && obj.constructor === Object);
// for loop 
var obj = {};
const isEmpty = (obj) => {
    for(let key in obj) {
        if(obj.hasOwnProperty(key))
            return false;
    }
    return true;
}
console.log(isEmpty(obj));
Enter fullscreen mode Exit fullscreen mode

perf-check-obj

Deep cloning an Object

Most widely used method for this is by using the combination if JSON.parse and JSON.stringify, we can also we Object.assign to deep clone the object.

Using JSON.parse and JSON.stringify is affecting the performance in big time, so its better to use Object.assign whenever possible to get a better performance.

// JSON.parse and JSON.strigify
const myObj = {
  string: 'string',
  number: 123,
  bool: false
}
console.log(myObj);
const clonedObj = JSON.parse(JSON.stringify(myObj));
console.log(clonedObj);
// Object.assign
const newClonedObj = Obj.assign({},myObj);
console.log(newClonedObj);
Enter fullscreen mode Exit fullscreen mode

perf-deep-clone

That's marks the conculsion for this part of the series - Made Easy with JavaScript. Thanks for reading and will see you soon with the Part 3 on Strings.

This article is cross-published from https://akrp.in/posts/2020/09/made-easy-with-javascript-objects

Cover Photo by Maxwell Nelson on Unsplash.

Discussion (0)