Here are couple of cool JavaScript tricks that can help you in everyday work by using "3 dots (...)" or spread operator.

Image by Alltechbuzz from Pixabay
Image by Alltechbuzz from Pixabay

The spread operator ( … ) examples

 

1. Combine / merge multiple objects into one object

                    const obj_1 = {
  'a': 1, 
  'b': 2
}
const obj_2 = {
  'c': 3
}
const obj_3 = {
  'd': 4
}

// Combine them all by using spread operator     
const objAll = {...obj_1, ...obj_2, ...obj_3}

console.log(objAll)
// output:  {a: 1 , b: 2 , c: 3 , d: 4 }

 

2. Combine / merge multiple arrays into one array - it will append second array to first one:

                    const arr1 = [1,2];
const arr2 = [3,4];

const arr3 = [...arr1, ...arr2];

console.log (arr3); 
//  output: [1,2,3,4]

3. there is another way using push and spread operator to add one array to another:

                    const arr1 = [1,2,3];
const arr2 = [4,5,6];

arr1.push(...arr2);
console.log(arr1);
// output: [1,2,3,4,5,6]

/***** or like this *****/
const arr1 = [1,2,3];
const arr2 = [4,5,6];

arr2.push(...arr1);
console.log(arr2);
// output [4,5,6,1,2,3]

 

4. Filter unique array values by using Set object  - remove array duplicate values

                    const arr1 = [0, 1, 1, "2", 3, "2", 4]
const arr2 = [...new Set(arr1)];

console.log(arr2);

//output:  [0 , 1 , "2" , 3 , 4 ]

 

 

5. Change object property value nested inside of array

                    const obj1 = [{

  'a':1,
  'b':2
}];
// One way to use it
obj1[0].a = obj1[0].a+1;
console.log(obj1[0]);
// output:  {a: 2 , b: 2 }

/*******************/

// or by using spread operator
obj1[0] = {...obj1[0], b: 'test'}

console.log(obj1[0]);
// output: {a: 2 , b: "test"}

 

6. Split text into array

                    const textToSplit = 'Split me up';
const splittedToArray = [...textToSplit];
console.log (splittedToArray); 

// output: ["S" , "p" , "l" , "i" , "t" , " " , "m" , "e" , " " , "u" , "p"]