JavaScript Spread & Rest Operator (…)

JavaScript has a neat operator that looks like this: ... 👉 They look the same — but behave differently based on context.

JavaScript Spread & Rest Operator (…)

• Spread Operator (...): It unpacks the array and adds each item individually.
• Rest Operator (...): "Collect the rest" of the values into an array or object.

Let's see with an example…

🌫Spread Operator (…)

Let’s say you have a list of items from two different stores:

let store1 = ["shoes", "hat"];
let store2 = ["t-shirt", "jeans"];

You want to combine them into one list:

let allItems = [...store1, ...store2, "socks"];
console.log(allItems);
// Output: ["shoes", "hat", "t-shirt", "jeans", "socks"]

👉Here, …store1 and …store2 spread out the items inside the new array.

📦 Rest Operator (…)

Let's say you’re packing an order and only want to treat the first item specially — the rest go into a box.

let items = ["laptop", "mouse", "keyboard", "charger"];

let [firstItem, ...packedItems] = items;

console.log(firstItem);     // "laptop"
console.log(packedItems);   // ["mouse", "keyboard", "charger"]

👉Here, …packedItems collects the rest of the array values.

Get Gaurav Davre’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Let's have a look at a Function.

Say you’re calculating the total price from multiple product prices:

function totalPrice(discount, ...prices) {
  let total = prices.reduce((sum, price) => sum + price, 0);
  return total - discount;
}

console.log(totalPrice(10, 100, 200, 50));
// Output: 340

Let me explain:

• discount = 10
• prices = [100, 200, 50] — gathered using rest operator
• Total = 350–10 = 340

✅ Summary:

• Spread (…): Break apart (unpack values)
  [Useful to Combine arrays, and merge objects]
• Rest (…): Gather together (collect rest)
  [Useful for Function arguments, destructuring]

and that was all the Spread and Rest operators!
✨They’re simple, and powerful tools that make your JavaScript code cleaner and smarter.

./See you soon…