DEV Community: Sayantani96

Destructuring in Javascript

Sayantani96 — Tue, 28 Feb 2023 11:21:36 +0000

Overview

Destructuring is one of the coolest features introduced in ES6. The destructure feature allows us to break an object or an array into its values. Then we can access the values just by using the separate variables. It becomes easy to access the array and object elements in this way.

const arr=[5,8,10,67,34];

const [first,second]=arr

const obj={

name: "Titli",

id:1

}

const {name,id}=obj;

Object Destructuring

We use keys as the name of variables for destructuring objects. The variable names should be the same as the keys of the object, otherwise undefined will be returned. Unlike array destructuring, objects identify values by their properties(keys) instead of index.

const obj={
    id:1,
    name:"Shanaya",
    email:"shanaya23@gmail.com",
}

const {id,name,email}=obj;
console.log(id,name); // 1 Shanaya

We can also destructure objects when it's nested.

const obj={
    id:1,
    name:"Shanaya",
    email:"shanaya23@gmail.com",
    mentee:{
        id:3,
        name:"Subhojit",
        email:"subh89@gmail.com"
    }
}

const {mentee:{name:menteeName}}=obj;
console.log(menteeName); // Subhojit

From the above example, we see how we can access a value from a nested object through destructuring. We access the value of name of the mentee which is an object nested inside object obj.

We also see how we can assign a new variable name to the value and access the value using that name. Instead of using the name key we assign value of name inside mentee to a new variable called "menteeName" and then access the value using "menteeName".

Array Destructuring

While destructuring an array, we separate the values using their index. For example,

const arr=[1,8,3,6,9];

const [first, second]=arr;

console.log(first,second);// 1 8

In the above code snippet, we see how the first variable points to the first element in the array (arr[0]) and the second variable to the second element in the array (arr[1]). The destructured variables points to the values in the positions they are placed.

const arr=[1,8,3,6,9];

const [third,second,first,fourth,eighth]=arr;

console.log(first,second,third,eighth); // 3 8 1 9

As we see in the above example, we have given random names to the variables to access the array elements. The variables point to the values according to their index. For example, first points to arr[2] as the variable named first is at index number 2. Similarly, third points to arr[0] as it is positioned at index 0.

Now, the next big question is: what if we want to access a value in an array by skipping the initial values? We can do that too.

const arr=[1,8,3,6,9];

const [,,third,,fifth]=arr;

console.log(third,fifth); // 3 9

From the above example, we see how we can access the values of a specific index through destructuring.

There is another way to do this.

const arr=[1,8,3,6,9];

const {2:third,4:nine}=arr;

console.log(third,nine); // 3 9

As we know arrays in javascript are special objects. The index values in arrays act as the keys or properties. We use this knowledge to destructure arrays more cleanly. We assign a new variable name to the array elements at the specified index and access the values using those variable names.

Coming to nested destructuring of arrays, it's pretty easy. Let's see an example.

onst arr=[1,8,[3,6,8,16],9];

const {2:[first,second]}=arr;

console.log(first,second); // 3 6

As we see, we can destructure a nested array in a similar manner. Now that we have seen almost all the possible ways of destructuring, I would like to end this blog with an example which has mixture of all the cases.

const book = { 
        title: 'A Definitive Guide to Javascript',  
        authors: [{name: 'D. Flanagan', age: 49 }, { name: 'Y. Matsumoto', age: 57 }],  
        publisher: {name: 'O\'Reilly Media', location: 'LA'}
};


const {title,authors:[{name:author1},{name:author2}],publisher:{name:publisherName}}=book;


console.log(title); // A Definitive Guide to Javascript
console.log(author1); // D. Flanagan 
console.log(author2); // Y. Matsumoto
console.log(publisherName); // O'Reilly Media

Difference between == and ===

Sayantani96 — Tue, 14 Feb 2023 12:26:43 +0000

Overview

The equality operator in javascript is used to check whether two operands are equal. It returns a boolean value. In javascript, the comparison can be done by using == and === operators. The major difference between == and === operators is that == does a type conversion of the operands before checking while === prioritizes checking the types of the operands first and then the values.

let check1= 15=='15';
console.log(check1);
//output is true

let check2= 15==='15';
console.log(check2);
//output is false

How does == work?

== also known as the loose equality operator, performs a type conversion before comparing two operands. This is called implicit type conversion or type coercion. Javascript is a weakly typed language, so in case of a loose equality check, it automatically changes(coerces) the type of one value to fit into the other operand type.

If one operator is a symbol and the other is not, return false
If one operator is boolean and other is not, boolean is converted to a number. True is converted to 1 and false to 0. Then the two operands are compared loosely again.

console.log(true==1);//true
console.log(false==0)//true
console.log(true==0)//false
console.log(false==1)//false
console.log(true=="Hi")//false

In case of a number and a string, the string is converted to a number. If the string to number conversion fails, NaN is returned, which makes the equality check false.

console.log('10'==10)//true
console.log("Hi"==10)//false, could not convert string to number.

According to ES6 convention, all primitive data types(string, number, boolean, bigint, symbol) and objects are loosely unequal to undefined and null.

console.log('Hi'==undefined)//false
console.log(null=='A')//false
console.log(0==undefined)//false
console.log(0==null)//false
const obj={}//empty object
console.log(obj==undefined)//false

In case of arrays and objects (non-primitive data types), == checks if both the arrays and both the objects refer to the same memory location.

const obj={a:1,b:2};
const obj2={a:1,b:2};
const obj1=obj2;
console.log(obj==obj2);//false
console.log(obj1==obj2);//true (obj1 refers to obj2, the same memory location)
console.log([1,2,3,4,5]==[1,2,3,4,5])//false(Same values but different location or reference)

How does === work?

Now let's talk about ===, also known as the strict equality operator. In this case, neither of the values is implicitly converted before they are compared. Thus, if two values have different data types, they would be considered not equal even if their values are the same.

console.log(1===true)//false
console.log(0===false)//false
console.log("Hi"==="Hi");//true
console.log(15===15)//true
console.log(20==='20')//false

Strict equality check is preferred over loose equality checks as in strict equality checks the outcomes are more predictable and accurate.

Special Cases

+0 and -0 are considered as equal

console.log(+0===-0)//true

NaN is considered as unequal to every other values, including itself.

console.log(NaN===NaN)//false

In case of objects and arrays === works in the same way as ==. It checks whether the two operands are referring to the same memory location.

const obj={a:1,b:2};
const obj2={a:1,b:2};
const obj1=obj2;
console.log(obj===obj2);//false
console.log(obj1===obj2);//true (obj1 refers to obj2, the same memory location)
console.log([1,2,3,4,5]===[1,2,3,4,5])//false(Same values but different location or reference)

Comparing equality methods

Conclusion

Strict equality(===) in general is preferred over loose equality operator(==) as one can be more sure about its outcomes and also strict equality goes through one step less in checking procedure as it does not need to convert data types while checking two operands of different data types. Although we can use loose equality(==) if the type of the operands do not need to be taken into consideration.