Thread by @swapnakpanda

💙 Spread and Rest Parameter Operators (...) in JavaScript

Follow this 🧵 for the easiest and never-to-forget type explanation. Thank me later 😝

Happy Weekend 👋

👇👇👇

🤷‍♀️ What is the need? [The Background]

We all know that an array is a collection of elements "kept together" in memory in a contiguous manner so that we can easily access any element using an index.

⇨ As all elements were kept together, how can we break those apart?

🤷‍♀️ Why does an array need to be broken apart?

If elements of an array are going to be "treated separately", you have to take all them out. Let's take an example.

🤷‍♀️ Problem: Print all elements in an array separately.
✅ Solution:

✪ If size is 1.
⇨ console.log(a[0])

✪ If size is 3.
⇨ console.log(a[0], a[1], a[2])

✪ If size is 100.
⇨ We will go mad. Right?

Here we are trying to take elements from array manually on our own. This process is not only lengthy and tedious, error prone as well.

🤷‍♀️ Spread Operator comes to rescue

This is the practical use case of a spread operator. Few languages call this operation "unpacking", but JavaScript calls it "spreading".

🤷‍♀️ What can we spread?

Any iterable (an array, a string etc) or, an object expression (key-value pairs)

🤷‍♀️ What is the syntax?

✪ Use 3 dots (...) before the variable that is to be spread.

✪ Put entire thing
⇨ inside square brackets ([ and ]) (if the variable is an iterable) or,
⇨ inside curly braces ({ and }) (if the variable is an object expression).

✪✪ The 2nd rule is not applicable when an iterable is to be spread inside a function call expression.

Example:

1️⃣
let a = [10, 20, 30]

let b = [...a]
console.log(...a)

2️⃣
let o = {x:10, y:20}
let p = {...o}

🤷‍♀️ Like we broke apart items, can we group them again?

Yes. That's what rest (parameter) operator does.

🤷‍♀️ Why is the confusion, then?

Because both "Spread" and "Rest Parameter" operators look similar. They are identified by 3 dots (...)

🤷‍♀️ Then, how would we know?

✪ In an "assignment expression", there is a LHS and RHS.
✪ RHS is evaluated and, the value is assigned to the LHS.
✪ If we use "..." in RHS, it's a spread operator.
✪ If we use "..." in LHS, it's a rest parameter operator.

🤷‍♀️ How to memorise easily?

R ⇨ Rest Parameter
S ⇨ Spread

✪ Alphabetically R comes before S, so also LHS comes before RHS.

✪ So, the "Rest Parameter Operator" is used in the LHS and the "Spread Operator" is used in the RHS.

🤷‍♀️ The catch

Rest Parameter actually always operates along with destructuring assignment.

Example:

1️⃣
let [a, b, ...c] = [10, 20, 30, 40]

⇨ a = 10, b = 20 and c = [30, 40]

2️⃣
let [...a] = [10, 20]

⇨ a = [10, 20]

https://twitter.com/swapnakpanda/status/1447887006659268612?s=20

🤷‍♀️ What is the restriction?

As the rest parameter operator operates along with destructuring assignment, it can be used only at the end.

Example:

✅ [a, b, ...c] is allowed
❌ [a, ...b, c] is not allowed

🤷‍♀️ Final Example

let name = "Jessica" // string is an iterable

let [f, ...rest] = [...name]

✪ [...name] is at RHS, so it's spreading
✪ "name" is a string which is an iterable. So, it's spread to an array
✪ Hence [...name] is evaluated to ['J', 'e', 's', 's', 'i', 'c', 'a']

✪ ...rest is at LHS, hence it's a rest parameter
✪ [f, ...rest] is an array destructuring expression
✪ "f" is the first element of the array and "rest" is the array containing rest all elements.
✪ "f" is assigned 'J'
✪ "rest" is assigned ['e', 's', 's', 'i', 'c', 'a']

So, we come to the end of this 🧵 How do you feel about this 🧵?

Do you want to know more about me? 👇

https://twitter.com/swapnakpanda/status/1458413606748385280?s=20

And, if you want to visit more contents that I have written here, 👇 🧵 lists all them.

https://twitter.com/swapnakpanda/status/1458413603271286786?s=20

To help others getting access to this content,
♥️ Like this Thread
🔁 RETWEET the first tweet

To never miss any content from me,
✅ Follow @swapnakpanda
🔔 Turn on Notifications

To give feedbacks and suggestions,
💬 Reply