Spread vs Rest operator

Spread operator `...`

i. Concat or Merge arrays

const a1 = [80, 40, 90];
const a2 = [180, 240, 390];
const a3 = [...a1, ...a2];
// a3 ->  [80, 40, 90, 180, 240, 390 ]

ii. Concat or Merge objects

const avenger = {
  name: "Tony Stark",
  house: "🏘️",
  networth: "💰💰💰",
  power: "🤖",
  phrase: "❤️ you 3000",
};
const details = {
  nation: "US",
  skill: ["genius", "billionaire", "playboy", "philanthropist"],
};
const fullDetails = { ...avenger, ...details };
// fullDetails
{
  name: "Tony Stark",
  house: "🏘️",
  networth: "💰💰💰",
  power: "🤖",
  phrase: "❤️ you 3000",
  nation: "US",
  skill: ["genius", "billionaire", "playboy", "philanthropist"],
}

iii. Override keys in objects

const avenger = {
  name: "Tony Stark",
  house: "🏘️",
  networth: "💰💰💰",
  power: "🤖",
  phrase: "❤️ you 3000",
};
const combine = { ...avenger, nation: "US", power: "💿" };
// combine - power is overridden - Whichever is last will overide the initial one
{
  name: "Tony Stark",
  house: "🏘️",
  networth: "💰💰💰",
  nation: "US",
  power: "💿",
  phrase: "❤️ you 3000",
}

iv. Copy arrays & objects

const a1 = [80, 40, 90];
const a2 = [...a1];
const a3 = a1;
// a2 -> [80, 40, 90]
// a3 -> [80, 40, 90]
console.log(a1 === a2); // false
console.log(a1 === a3); // true

v. Spread used in any position in the array

const a1 = [80, 40, 90];
const a2 = [180, 240, 390];
const a3 = [30, ...a1, 700, ...a2];
// a3 -> [30, 80, 40, 90, 700, 180, 240, 390]

vi. To pass array as separate arguments

let nums = [4, 5, 20, 7];
console.log(Math.max(nums[0], nums[1], nums[2], nums[3])); // 20
console.log(Math.max(nums)); // NaN
// eg1: Spread
console.log(Math.max(...nums)); // 20
// eg2: Spread
console.log(Math.min(...nums)); // 4

Rest operator `...`

i. Destructing - Collecting rest of the values

// eg: 1
let [s1, ...s2] = ["eng", "maths", "social", "tamil"];
console.log(s1, s2);
// s1 -> "eng"
// s2 -> ["maths", "social", "tamil"]

ii. Rest element must be last element

// eg: 2 - error - Rest element must be last element
let [s1, ...s2, s3] = ["eng", "maths", "social", "tamil"];
console.log(s1, s2, s3);

iii. Collecting multiple arguments in function

function sum(...nums) {
  console.log(nums); // [4, 5, 7, 8, 9]
  let total = 0;
  for (let val of nums) {
    total = total + val;
  }
  return total;
}
console.log(sum(4, 5, 7, 8, 9)); // 33

@ragavkumarv

swipe to next ➡️

Blog

Spread vs Rest operator

Spread vs Rest operator

Spread operator .css-97bh9q{position:relative;display:inline;font-family:var(--font-family-mono);font-size:0.9em;padding:4.5px 6px;margin:1px -1px;background:var(--inline-code-clr-1);border-radius:3px;-webkit-box-decoration-break:clone;}...

i. Concat or Merge arrays

ii. Concat or Merge objects

iii. Override keys in objects

iv. Copy arrays & objects

v. Spread used in any position in the array

vi. To pass array as separate arguments

Rest operator ...

i. Destructing - Collecting rest of the values

ii. Rest element must be last element

iii. Collecting multiple arguments in function

Spread operator `...`

Rest operator `...`