Fat Arrow (=>) Syntax was Introduced in ES6, which is used to define a shorthand for a nameless function. To under Stand the syntax of Fat Arrow (=>), first, let's take an example of a regular Function.

In the above example, we write a simple function for multiplication with the name ‘prdct’.The output of the Function is as Fallows:

The above function can be written by using Fat Arrow Syntax:

In this article, we will explore an array and object Destructuring with the Difference

Simply Destructuring means “A process of unpacking or extracting a small part of something from the main body/part so that it can be modified where needed”.

In JS There are two main types of Destructuring:

1. Array Destructuring

2. Object Destructuring

Array Destructuring:

In JS it is a feature that allows us to extract or unpack the elements of an array and bound them to distinct variables. Here is a simple Example :

Output:

Object Destructuring:

In JS it is a feature that allows us to extract or unpack the properties of an object and bind them to distinct variables. Here is a simple Example :

Output:

Difference Between Array Destructuring and Object Destructuring:

Array destructuring relies on the order of values in the array, while object destructuring relies on the names of properties in the object. Array destructuring uses square brackets [] to define the pattern of values to extract, while object destructuring uses curly braces {} to define the pattern of properties to extract.

Let’s discuss it briefly….

There are two Data Types in js:

Primitive

Boolean, Numbers, and String Null and Undefined. They are immutable which means if we change one then a new instance is created as a result however the original value remains the same.

Non-Primitive

Arrays and Objects are Non-Primitive. They are mutable if we change one then no new instance will be created and properties of an original array or an object will be changed.

There are two types of Mutation in JS.

a) Object Mutation

b) Array Mutation.

Let’s Create an object in js

const fruit={name: ’Mango’};

In the above line name is the property of the ‘fruit’ object. If we add another Property then it is the mutation as we are changing the original form of our object ‘fruit’

fruit. color=’Yellow’;

console.log(fruit);

Output

{ name: ‘Mango’, color: ‘Yellow’ }

Now we create another Variable ‘newfruit’ and assign it the ‘fruit’ object

const newfruit=fruit;

Lets Change the color Property of ‘newfruit’ and see what happens;

newfruit.color =’blue’;

console.log(fruit);

Output

{ name: ‘Mango’, color: ‘blue’ }

console.log(newfruit);

Output

{ name: ‘Mango’, color: ‘blue’ }

Look at the last two outputs both are the same although we are changing the color property of the ‘newfruit’ object, the fruit object is changing automatically without our knowledge. In other words, by mutating the ‘newfruit’ object ‘fruit’ object mutated automatically. These unpredictable Changes can break an application and hard to fix and debug.

Why original Object Muted

When we create an abject, a memory location is automatically assigned to it and holds the value assigned to it. In the above example when a ‘newfruit’ object is created by using const newfruit=fruit;… the fruit object memory is shared with the ‘newfruit’ object which leads to automatically changing ‘fruit’ object.

Array Mutation

The following is an example in which an array is reversed

const Fruits=[‘Apple’,’Mango’,’Dates’,’Grapes’,’WateMellon’];

const newfruits=Fruits.reverse();

console.log(newfruits);

output

[ ‘WateMellon’, ‘Grapes’, ‘Dates’, ‘Mango’, ‘Apple’ ]

console.log(Fruits);

output

[ ‘WateMellon’, ‘Grapes’, ‘Dates’, ‘Mango’, ‘Apple’ ]

In the above example, both outputs are the same although we are passing array ‘fruits’ to ‘newfruits’ and then reversing it yet when we print the original array[ i.e console.log(Fruits); ]we found that its elements are reversed automatically. This is an array mutation.

Here is another example of reversing an array without changing original array, which means without mutation.

const Fruits1=[‘Apple’,’Mango’,’Dates’,’Grapes’,’WateMellon’];

const newfruits1=Fruits1.slice().reverse();

console.log(newfruits1);

output

[ ‘WateMellon’, ‘Grapes’, ‘Dates’, ‘Mango’, ‘Apple’ ]

console.log(Fruits1);

output

[ ‘Apple’, ‘Mango’, ‘Dates’, ‘Grapes’, ‘WateMellon’ ]