Skip to main content

Command Palette

Search for a command to run...

JavaScript mein ...Rest aur Spread Operator

Updated
3 min readView as Markdown

Same syntax, alag kaam — context se pata chalta hai ki kaun sa operator hai. Aaj hum dono ko clearly samjhenge real examples ke saath.

Introduction

JavaScript mein ... (three dots) dekh ke confuse ho jaate ho? Kabhi ye spread hai, kabhi rest — aur dono ka syntax bilkul same hai. Fark sirf ek cheez se pata chalta hai: kahan use ho raha hai.

Golden Rule: Function call mein ho → Spread. Function definition mein ho → Rest.

⬆ Spread Operator
Array ya Object → Multiple values
Failata hai. sumOne(...myA)
⬇ Rest Operator
Multiple values → Array
Ikattha karta hai. function f(...args)

Spread Operator

Spread — "Array ko Todo"

Socho tumhare paas ek array hai aur tum chahte ho ki uski values alag-alag arguments ki tarah kisi function mein jayein. Yahi kaam karta hai spread operator.

function sumOne(a, b) {
  return a + b;
}

var myA = [5, 4];

// Bina spread ke — kaam nahi karega sahi
console.log(sumOne(myA));       // NaN — array as first arg

// Spread se — array tod ke alag arguments
console.log(sumOne(...myA));    // 9 ✓
// Same as: sumOne(5, 4)

Aur yahi reason hai ki Math.max() kaam karta hai itne saare numbers ke saath — internally it takes separate arguments, not an array.

var nums = [2, 5, 7, 4, 9, 8];

Math.max(2, 5, 7, 4, 9, 8);   // 9
Math.max(...nums);              // 9 — same result!

// Object.assign bhi spread jaisa hi kaam karta hai
var myObj = {};
Object.assign(myObj, {a:1, b:2}, {z:9, y:8});
console.log(myObj); // {a:1, b:2, z:9, y:8}

Rest — "Baaki Sab Ikattha Karo"

Function banate waqt agar tum nahi jaante ki kitne arguments aayenge — tab rest operator use karo. Ye saare extra arguments ko ek array mein pack kar deta hai.

function sumTwo(...args) {
  let sum = 0;

  for (const arg of args) {
    sum += arg;
  }

  return sum;
}

sumTwo(2, 3);             // args = [2, 3]  → 5
sumTwo(1, 2, 3, 4, 5);   // args = [1,2,3,4,5] → 15

Mixed — Named + Rest Parameters

Sabse powerful pattern ye hai — pehle kuch named params lo, baaki sab rest mein daal do. Rule yaad rakho: ...rest hamesha last parameter hona chahiye.

function sumTwo(a, b, ...args) {
  console.log(args);        // [10, 20, 30]

  let multi = a * b;         // 3 * 4 = 12
  let sum = 0;

  for (const arg of args) {
    sum += arg;               // 10+20+30 = 60
  }

  return [sum, multi];        // [60, 12]
}

sumTwo(3, 4, 10, 20, 30);
// a=3, b=4, args=[10, 20, 30]

Cheat Sheet

Kahan Kya karta hai Naam
Function call mein Array → multiple values (failata hai) Spread
Function definition mein Values → array (ikattha karta hai) Rest
...rest ka position Hamesha last parameter hona chahiye (Rule!) Rest
Conclusion: Syntax same hai (...), lekin kaam bilkul ulta. Spread todta hai, Rest jodhta hai. Context dekho — call hai ya definition — bass itna kaafi hai!

More from this blog