[Series] Made Easy with JavaScript - Objects
Tags: javascript, objects, performance
Published: 2020-10-01 10:14:49


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](https://akrp.in/posts/2020/09/made-easy-with-javascript-array)


###  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.

```js
const obj = { key: undefined };
if(obj["key"] !== undefined) {
    // key exists
}
```
So, we can use **in** operator to check for a key.
```js
if("key" in obj){
    // key exists
}
```
We can also check if a key doesn't exist using negate condition with a parenthesis.
```js
!("key" in obj) //  key does not exist
!"key" in obj   // ERROR!  Equivalent to "false in obj"
```
If we want to particularly check for properties of the object instance (and not inherited properties), we can use **hasOwnProperty**
```js
obj.hasOwnProperty("key") //  key exists
```
In terms of performance, **in** offers better performance that **hasOwnProperty**.
![perf-check-object-key](https://dev-to-uploads.s3.amazonaws.com/i/3a9lj7d42hnr9ev24s1c.png)


### 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.

```js
// 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]);
});
```
Plain for loop and **Object.keys** is providing better performance that using **Object.entries**.

![perf-iterate-object](https://dev-to-uploads.s3.amazonaws.com/i/repdw30sqcrfwyqqx1km.png)

### 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.

```js
// 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));

```
![perf-combine-object](https://dev-to-uploads.s3.amazonaws.com/i/z7in8ria8qtelr72rfqd.png)


### 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.

```js
// 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));
```
![perf-check-obj](https://dev-to-uploads.s3.amazonaws.com/i/62fconhat63jmx7889ne.png)


### 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.  

```js
// 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);
```

![perf-deep-clone](https://dev-to-uploads.s3.amazonaws.com/i/7x5d6sr8flvvhg72g8t0.png)

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](https://akrp.in/posts/2020/09/made-easy-with-javascript-objects)

<span>Cover Photo by <a href="https://unsplash.com/@maxcodes?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Maxwell Nelson</a> on Unsplash.</span>