Hi Everyone,
This is my first blog. And in this blog, I'm gonna talk about Spread Operator, Rest Operator and Destructuring in JavaScript, and as I have been working on JavaScript since 1 year, I used to think that spread operator is used for destructuring. While working on a project recently I found out that concept of destructuring is completely different and thought of sharing it here. So, Let's begin.
Spread Operator
The spread operator is used to split up array elements or object properties. It does deep cloning of the array elements or object, so it doesn't affect the original values.
Let's see the Example of Array first-
const arr1 = [1, 2, 3]
const arr2 = [...arr1, 4, 5]
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4, 5]
arr1.push(6, 7);
console.log(arr1); // [1, 2, 3, 6, 7]
console.log(arr2); // [1, 2, 3, 4, 5]
You can see above that arr2 hasn't changed after adding more values to arr1.
But what if I hadn't provided the "..." operator in arr2. Let's find out below-
const arr1 = [1, 2, 3]
const arr2 = [arr1, 4, 5]
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [[1, 2, 3], 4, 5]
Yes. It would create a nested array.
Same goes with the objects as well.
const obj1 = {
name: "Prince",
Sex: "Male"
}
console.log(obj1); //{name: "Prince", sex: "male"}
const obj2 = {
...obj1,
age: 25 //{age: 25, name: "Prince", sex: "male}
}
console.log(obj2);
obj1["height"] = "5'8 ft";
console.log(obj1);//{height: "5'8 ft",name: "Prince", sex: "male"}
console.log(obj2); //{age: 25, name: "Prince", sex: "male}
Rest Operator
Rest operator is used in a function whenever multiple arguments are expected.
const filter = (...args) => {
return args.filter(val => val%5===0)
}
console.log(filter(5, 10, 2, 4, 20)); // [5, 10, 20]
You can see above that we are passing 5 arguments while calling filter function and it's printing the value according to the condition and even we can pass n number of argument and it'll work just fine.
Destructuring
It's also next gen javascript feature. Destructuring easily extract array elements or object properties and store them in variables.
By the above definition, you'd have been thinking that It works exactly as spread operator but It's work differently.
Let's find out below.-
// Array
const num = [11, 22, 33];
[x, y] = num;
console.log(x); // 11
console.log(y); // 22
[x, , y] = num;
console.log(x); // 11
console.log(y); // 33
When destructuring array, It'll return the value of the index as per left key indexing. And yes, we're not creating any array when writing like [x,y] on the left side. I know, it seems strange but even I was confused earlier.
// Object
{name} = {
name: "Audi",
model: "A8",
price: "1.5 cr"
}
console.log(name); // "Audi"
console.log(age); // undefined
// Above output will be undefined as age is not destructured and aligned with the same key
You can see above that age is returning undefined as It's not destructured and aligned with the same key.
That's it for this article folks. 🙏Thanks For Reading !
Top comments (9)
Wow. Good knowledge transfer.
Thanks Payal 😄
Very good! Short and precise.
Thank you 🤗
I really liked your examples.
Just a quick note on the object example - you need parentheses around destructuring declaration.
developer.mozilla.org/en-US/docs/W...
Yeah... For the object destructuring, I have given parentheses.
Very good bhai.
just one note, spread operator does a shallow clone ( copy ) not deep clone
Actually It creates deep copies of data if the data is not nested. But when you have nested data in an array or object the spread operator will create a deep copy of the top most data and a shallow copy of the nested data.
Hope this clarifies.
Yeah exactly