Spread Operator in JavaScript

Projected time

About 40-50 minutes

Spread operator

Spread operator allows an iterable such as strings, objects, array and sets to spread or expand individually inside a receiver.

The syntax of spread operator is [...value].

Why it is useful?

let obj1 = {a: 1, b: 2, c: 3}
let obj2 = {d: 4, e: 5, f: 6}
let merge = {...obj1, ...obj2}

Output: merge is {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

Examples

Simple object

Given this object we can use the object spread syntax.

const obj = {
    name: 'AppDividend',
    author: 'Krunal Lathiya'
};
const combined = {
    ...obj,
    age: 25
};
console.log(combined);

Output:{name: ‘AppDividend’, author: ‘Krunal Lathiya’ , age: 25}

Arrays

normal array concat() method

let arr = [1,2,3]; 
let arr2 = [4,5]; 
  
arr = arr.concat(arr2); 
  
console.log(arr); // [ 1, 2, 3, 4, 5 ]

spread operator doing the concat job

let arr = [1,2,3]; 
let arr2 = [4,5]; 
  
arr = [...arr,...arr2]; 
console.log(arr); // [ 1, 2, 3, 4, 5 ]

spread operator for copying

let arr = ['a','b','c']; 
let arr2 = [...arr]; 
  
console.log(arr); // [ 'a', 'b', 'c' ] 
  
arr2.push('d'); //inserting an element at the end of arr2 
  
console.log(arr2); // [ 'a', 'b', 'c', 'd' ] 
console.log(arr); // [ 'a', 'b', 'c' ]

copying without the spread operator

let arr = ['a','b','c']; 
let arr2 = arr; 
  
console.log(arr2); // [ 'a', 'b', 'c' ]

From geeksforgeeks

Spread in object literals

The spread operator copies enumerable properties from a provided object onto a new object. In object literals, merging of objects is now possible using a shorter syntax than [Object.assign()] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)

const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };

const clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

const mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

Array slice method

The slice() method returns the selected elements in an array, as a new array object. The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument. The syntax of slice method is array.slice(start, end).

Example:

Add Element(s) to the Middle of an Array Using splice()

array.splice( start, deleteCount [, item1 [, item2 [, ...] ] ] )

The Slice method takes 2 arguments.

1st Argument: Specifies from where the selection should be started.

For Example:

var arr1 = [1,5,8,9];
arr1.slice(1); // [5,8,9]
From the first index (5) it will return the elements.

2nd Argument: Specifies at which level the endpoint should be. If you didn’t put this in the parenthesis while calling the slice method, it will return the elements from the starting index to the end of the array.

var arr1 = [1,5,8,9];
console.log(arr1.slice(1,3));
//[ 5, 8 ]

If you put a negative number while calling, the selection will be selected from the end of the array.

var arr1 = [1,5,8,9];
console.log(arr1.slice(-2));
//[ 8, 9 ]

Note: Slice always returns the selected elements from the array.

Slice won’t change the array. The array remains intact. See the below Example:

var arr1 = [1,5,8,9];
arr1.slice(2);
console.log(arr1);
// [ 1, 5, 8, 9 ]

Independent Practice

Nested Object

Rewrite the following code using spread syntax.

const arr1 = ['a','b', 'c'];
const arr2 = ['a.foo', 'b.bar', 'c.baz'];

let result = {};

const insertAggs = (agg, result) => {

  while (result.aggs) {
    result = result.aggs
  }

  result.aggs = agg;
}

for (let i = 0; i < arr1.length; i++) {
  const aggName = arr1[i];
  const field = arr2[i];
  const agg = {
      [aggName]: {
        terms: {
          field
        }
      }
    };

  result.aggs ? insertAggs(agg, result) : result.aggs = agg;
}
}

from freecodecamp

Challenges

  1. Write a function that uses spread as the solution ?
  2. Write a function that uses slice as the solution ? (Note: The example code here is in python, but you should still follow the directions)

Additional Materials