Previous Next

React ES6 Spread Operator

Spread Operator

JavaScript spread operator (...) allows us to quickly copy all or part of the same existing members or object to another organization or object.

Example

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

The distribution operator is often used in conjunction with demolition.

Example

Assign the first and second items from numbers to variables and put the rest in an array:

const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;

We may also use the distribution operator and materials:

Example

Combine these two objects:

const myVehicle = {
            brand: 'Ford',
            model: 'Mustang',
            color: 'red'
}
          
const updateMyVehicle = {    
    type: 'car',
    year: 2021, 
    color: 'yellow'
}
          
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

Note that incompatible structures are included, but a similar element, color, was written over the last transfer item, updateMyVehicle. The resulting color is now yellow.

Previous Next