spread and rest operator in javascript code example

Example 1: javascript rest parameters vs spread operator

/** 
* JS Spread and Rest operators:
* Two operators with the same syntax (...) but behave differently
*/

// Rest parameter: collects all remaining elements into an array. 
function foo (...args) { console.log(args) } 
foo(1,2,3,4,5,6) // Output: (6) [1,2,3,4,5,6]

// Spread operator: allows iterables to be expanded into single elements.
let arr = [1, 2, 3];
let arrCopy = [-1, 0, ...arr]; // spread the array into a list of parameters
                        // then put the result into a new array

Example 2: spread and rest javascript

var myName = ["Marina" , "Magdy" , "Shafiq"];var newArr = [...myName ,"FrontEnd" , 24];console.log(newArr) ; // ["Marina" , "Magdy" , "Shafiq" , "FrontEnd" , 24 ] ;

Example 3: spread operator in javascript

// spread operators can be used for arrays or objects

// cloning to prevent mutation.
let numList = [1,2,3];
let numListClone = [...numList]; // [1, 2, 3]

// spread operator for destructuring.
let animal = {
  name: 'dog',
  color: 'brown',
  age: 7
};
let { age, ...otherProperties } = animal; 

// spread operator as rest operator
function sum(x, y, ...rest) {}

// spread operator for merging arrays or objects
let numLists = [...numList1, ...numList2];
let animalWithBreed = {
  ...animal,
  breed: '',
}

Example 4: the rest operator javascript

function sum(...numbers) {
	return numbers.reduce((accumulator, current) => {
		return accumulator += current;
	});
};
 
sum(1,2) // 3
sum(1,2,3,4,5) // 15

Example 5: spread and rest javascript

var myName = ["Marina" , "Magdy" , "Shafiq"] ;const [firstName , ...familyName] = myName ;console.log(firstName); // Marina ;console.log(familyName); // [ "Magdy" , "Shafiq"] ;

Example 6: array spread operator in javascript

let arr1 = ['A', 'B', 'C'];

let arr2 = ['X', 'Y', 'Z'];

let result = [...arr1, ...arr2];

console.log(result); // ['A', 'B', 'C', 'X', 'Y', 'Z']
// spread elements of the array instead of taking the array as a whole