Spread vs Rest օպերատորներ – ինչպես և երբ կիրառել

JavaScript-ում թե՛ Spread, թե՛ Rest օպերատորները օգտագործում են նույն սինթաքսը՝ `...`, բայց տարբեր նպատակներով։ Դրանք ներմուծվել են ES6-ում և լայնորեն օգտագործվում են օբյեկտների ու զանգվածների հետ աշխատելիս։

Ճիշտ տարբերակելով՝ երբ է պետք օգտագործել Spread և երբ Rest, կոդդ կդառնա մաքուր, ճկուն և ընթեռնելի։

Spread օպերատոր – արժեքների տարածում

  
// Array-ի տարածում
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers); // [1, 2, 3, 4, 5]

// Օբյեկտի տարածում
const user = { name: 'Ani', age: 25 };
const updatedUser = { ...user, age: 26 };

console.log(updatedUser); // { name: 'Ani', age: 26 }
  

Այս մեթոդի առավելությունները՝

• Օգնում է ստեղծել նոր զանգվածներ կամ օբյեկտներ՝ առանց mutate անելու բնօրինակը
• Աշխատում է որպես shallow copy՝ հարմար է immutable մոտեցումների համար

Rest օպերատոր – արժեքների հավաքում

  
// Array destructuring-ի մեջ rest-ը
const [first, ...rest] = [1, 2, 3, 4];

console.log(first); // 1
console.log(rest);  // [2, 3, 4]

// Օբյեկտի մեջ rest
const { name, ...restProps } = { name: 'Ani', age: 25, city: 'Yerevan' };

console.log(restProps); // { age: 25, city: 'Yerevan' }
  

Այս մեթոդի առավելությունները՝

• Օգնում է առանձնացնել որոշ արժեքներ, մնացածը հավաքել
• Օգտակար է դինամիկ պարամետրեր փոխանցելիս

Function parameters-ում Rest

  
function sum(...nums) {
  return nums.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3)); // 6
  

Այս մեթոդի առավելությունները՝

• Թույլ է տալիս գրել ֆունկցիաներ, որոնք ընդունում են անսահմանափակ արգումենտներ
• Զանգվածի նման list-ի ստեղծումը ցանկացած պարամետրերից

Համեմատություն՝ երբ որ օգտագործել

Spread (`...`) ➤ երբ ուզում ես "տարածել" արժեքներ՝ array կամ object-ի մեջ, օրինակ՝ copy, merge, expand:

Rest (`...`) ➤ երբ ուզում ես "հավաքել" արժեքներ՝ որպես զանգված կամ օբյեկտ, օրինակ՝ destructuring-ի կամ ֆունկցիայի պարամետրերի մեջ։