ES6 SPREAD OPERATOR

When to use and how to use

ES6 spread operator is one of ES6 feature I love using, and after reading this, you should also find it very useful

ES6 spread operator can actually save you a lot of time and stress when you working with javascript arrays, objects and functions. So i will give examples of instances when the spread operator will be found very useful.

• Array concatenation: Yeah! its still cool to use Array.concat(), but what happens when you intend concatenating more than just two or three arrays.

e.g

lets say we have

let employees = [];
let developers = ['Raphael', 'Silva', 'Toheeb'];
let writers = ['Princess', 'Peculiar'];
let engineers = ['David', 'Emmanuel'];
// Concatenating all employees array
employees.concat(developers);
employees.concat(writers);
employees.concat(engineers);
console.log(employees);

Ok! perfect we successfully concatenated three(3) arrays to the employees array yuck! so may lines of code this is the problem, so in cases like this spread operator becomes very handy. so we are going to write the same code using ES6 spread operator

let employees = [];
let developers = ['Raphael', 'Silva', 'Toheeb'];
let writers = ['Princess', 'Peculiar'];
let engineers = ['David', 'Emmanuel'];
// Concatenating all employees array
employees = [...developers, ... writers, ...engineers];
console.log(employees);

simple and short and nice right? so let look at other uses

• Copying of arrays

Lets say we copy the data in employees array to another array

let copiedEmployees = employees;

here is the problem

copiedEmployees[0] = 'Osaze';
console.log('Value from copied', copiedEmployees[0]);
console.log('Value from original', employees[0]);

when i change the value of any index in copiedEmployees array, it affects employees array. A simple way to solve such an issue is by using spread operator

e.g

let copiedEmployees = [...employees];
copiedEmployees[0] = 'Osaze';
console.log('Value from copied', copiedEmployees[0]);
console.log('Value from original', employees[0]);

the employees array index 0 value will remain the same even if the copiedEmployees index 0 value was updated. so lets look at other use cases

• For DOM manipulation : If you want to find every paragraph in a document in javascript you will probably use this

// Vanilla JS
let allP = document.querySelectorAll('p');
console.log(allP);

after selecting all p’s on the document, the allP array will have limited array methods, methods like Array.every(), Array.some(), Array.find(), Array.findIndex(), Array.map(), Array.reduce(), Array.filter() and so on. To make this allP array a complete array instance you should use

// Vanilla JS
let allP = Array.from(document.querySelectorAll('p'));
console.log(allP);

now allP array is a complete array instance you can manipulate it like a normal array, but we could also use the spread operator for achieving this.

let allP = [...document.querySelectorAll('p')];
console.log(allP);

hmm! simple and short right? so lets move on

another example

const product = {
    name: 'Samsung',
    categories: ['Mobile', 'Laptops', 'Televisions', 'Speakers'] 
}
let categoryList = ['Keyboard', 'Tablets',...product.categories]; 
console.log(categoryList);           

• For pushing multiple items into an array: You can’t push multiple items to an array using just Array.push(), you have to use a loop for this action

e.g

let oldFriends = ['Michael', 'Ahmed', 'Tega'];
let newFriends = ['Silva', 'Toheeb'];
newFriends.push(oldFriends);
console.log('After push', newFriends);

yuck! index 2 of newFriends array becomes an array. To achieve this we have to use a loop

e.g

for(let oldF of oldFriends){
    newFriends.push(oldF);
}
console.log(newFriends);

perfect we have pushed all oldFriends to newFriends, but spread operator can actually make this process easier.

e.g

newFriends.push(...oldFriends);
console.log(newFriends);

easy short and nice right? lets move on

• For function parameters: lets say we have a function that alerts a first name and last name

e.g

let myName = ['Raphael', 'Eyerin'];
function greetMsg(first, last){
    alert(`Good day ${first} ${last}`)
}
greetMsg(myName[0], myName[1]);

This works fine but what if you intend having more than two(2) parameters. So we can simply use

greetMsg(...myName);

this is going to alert what we expected, its shorter right? lets move on

• Rest parameters in functions: Lets assume we have a function that accepts post title, post description and post tags, this function will have multiple unknown tags we can simply use spread operator for this

e.g

function blogPost(title, description, ...tags){
    console.log('Title', title);
    console.log('Desc', description);
    console.log('Tags', tags);
}
blogPost('ES6 spread operator', 'I am writing about ES6 spread operator and these is my first ever article', 'Javascript', 'Es6',    'Nodejs', 'Expressjs');

so every other parameter after title and description will be seen as tags

Lastly let me give an example of using spread operator for destructing arrays.

let lastExample = [
    'Raphael',
    'Osaze',
    '0705608444',
    'elele@fmail.com',
    'yyyy@gmail.com',
    'zzzz@yahoo.com',
    'google@gmail.com'
];
const [first, last, phone, ...emails] = lastExample;
console.log('last example mails', emails);

so these are few examples of when ES6 spread operator can be very useful, you should learn and practice more on it. This is my first ever post your claps will be very important thank you.