{"componentChunkName":"component---src-templates-blog-post-js","path":"/spread-rest-operator/","result":{"data":{"site":{"siteMetadata":{"title":"TheKrPrince Blog"}},"markdownRemark":{"id":"ff02e049-b558-533f-a248-3813a0d24beb","excerpt":"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…","html":"

Hi Everyone,

\n

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.

\n

Spread Operator

\n

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.\nLet’s see the Example of Array first-

\n
const arr1 = [1, 2, 3]\nconst arr2 = [...arr1, 4, 5]\nconsole.log(arr1) // [1, 2, 3]\nconsole.log(arr2) // [1, 2, 3, 4, 5]\narr1.push(6, 7)\nconsole.log(arr1) // [1, 2, 3, 6, 7]\nconsole.log(arr2) // [1, 2, 3, 4, 5]
\n

You can see above that arr2 hasn’t changed after adding more values to arr1.\nBut what if I hadn’t provided the ”…” operator in arr2. Let’s find out below-

\n
const arr1 = [1, 2, 3]\nconst arr2 = [arr1, 4, 5]\nconsole.log(arr1) // [1, 2, 3]\nconsole.log(arr2) // [[1, 2, 3], 4, 5]
\n

Yes. It would create a nested array.

\n

Same goes with the objects as well.

\n
const obj1 = {\n  name: \"Prince\",\n  Sex: \"Male\",\n}\nconsole.log(obj1) //{name: \"Prince\", sex: \"male\"}\n\nconst obj2 = {\n  ...obj1,\n  age: 25, //{age: 25, name: \"Prince\", sex: \"male}\n}\nconsole.log(obj2)\n\nobj1[\"height\"] = \"5'8 ft\"\nconsole.log(obj1) //{height: \"5'8 ft\",name: \"Prince\", sex: \"male\"}\nconsole.log(obj2) //{age: 25, name: \"Prince\", sex: \"male}
\n

Rest Operator

\n

Rest operator is used in a function whenever multiple arguments are expected.

\n
const filter = (...args) => {\n  return args.filter(val => val % 5 === 0)\n}\n\nconsole.log(filter(5, 10, 2, 4, 20)) // [5, 10, 20]
\n

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.

\n

Destructuring

\n

It’s also next gen javascript feature. Destructuring easily extract array elements or object properties and store them in variables.\nBy the above definition, you’d have been thinking that It works exactly as spread operator but It’s work differently.\nLet’s find out below.-

\n
// Array\nconst num = [11, 22, 33]\n;[x, y] = num\nconsole.log(x) // 11\nconsole.log(y) // 22\n;[x, , y] = num\nconsole.log(x) // 11\nconsole.log(y) // 33
\n

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.

\n
// Object\n{name} = {\n    name: \"Audi\",\n    model: \"A8\",\n    price: \"1.5 cr\"\n}\n\nconsole.log(name);                          // \"Audi\"\nconsole.log(age);                           // undefined\n// Above output will be undefined as age is not destructured and aligned with the same key
\n

You can see above that age is returning undefined as It’s not destructured and aligned with the same key.

\n

That’s it for this article folks. 🙏Thanks For Reading.

","frontmatter":{"title":"Spread operator, Rest operator & Destructuring in JS","date":"May 09, 2021","description":"Difference b/w Spread operator, Rest operator and Destructuring in JavaScript."}},"previous":null,"next":{"fields":{"slug":"/git-for-beginners/"},"frontmatter":{"title":"Git for beginners"}}},"pageContext":{"id":"ff02e049-b558-533f-a248-3813a0d24beb","previousPostId":null,"nextPostId":"fa47de01-9c7e-5d73-8d3c-aa6e896efc88"}},"staticQueryHashes":["2841359383","3257411868"]}