JAVASCRIPT

spread operator javascript

const parts = ['shoulders', 'knees']; 
const lyrics = ['head', ...parts, 'and', 'toes']; 
//  ["head", "shoulders", "knees", "and", "toes"]

spread operator javascript

obj = {first_name : "Marty",
    lovers: ["Jennifer Parker","Baines McFly"]
      };
let objClone = { ...obj }; // pass all key:value pairs from an object 

console.log(objClone)
// { first_name: "Marty", lovers: ["Jennifer Parker", "Baines McFly"] }

How javascript spread operator works?

var num = [2, 4, 6, 8, 10];
console.log(...num)
//expected output: 2 4 6 8 10
console.log(88, ...num, 99) 
// added extra new elements before and after the spread operator
//expected output: 88 2 4 6 8 10 99

spread operator javascript

//Spreed Operator
const price = [100, 150, 200, 300, 400];
const price2 = [500, 550, 600, 10];
const price3 = [35, 60, 70];

const allPrice = [...price, ...price2, ...price3];  //using three dots means spread operator
console.log(allPrice);  //100, 150, 200, 300, 400, 500, 550, 600, 10, 35, 60, 70]

spread operator shorthand javascript

// Spread Operator Shorthand javascript
// Longhand
// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()
console.log(arr2); // [ 1, 2, 3, 4 ]

// Shorthand: 
// joining arrays
const odd_ = [1, 3, 5 ];
const nums_ = [2 ,4 , 6, ...odd_]; //spread operator is simply a series of three dots.
console.log(nums_); // [ 2, 4, 6, 1, 3, 5 ]

// cloning arrays
const arr_ = [1, 2, 3, 4];
const arr2_ = [...arr_];
console.log(arr2_); // [ 1, 2, 3, 4 ]

// Unlike the concat() function, you can use the spread operator to insert an array anywhere inside another array.
const odd__ = [1, 3, 5 ];
const nums__ = [2, ...odd__, 4 , 6];
console.log(nums__); // [ 2, 1, 3, 5, 4, 6 ]

// You can also combine the spread operator with ES6 destructuring notation:
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

How to Use the Spread Operator in JavaScript

const newArray = ['firstItem', ...oldArray];