Es6 Spread and rest operator in javascript

KelahKelah — Tue, 25 May 2021 16:40:34 +0000

Have you ever come across three dots such as …myVariable in a legacy code and wondered what in the world that is? Well you’re not alone bro. I’ve been there too. But don’t worry, what you saw was just another ES6 spread and rest operator that allows you copy or condense one or more iterables respectively into one variable.

In this article i would talk about ES6 spread and rest operator and how to use it to write a more readable code.

Spread operator

Before the Es6 spread operator, if we wanted to spread an array so as to combine them with another one, we would us the concat() array method to spread two arrays like so

const arr1 = [‘true’ , ‘false’];
const arr2 = [‘yes’ , ‘no’];
const addArr = arr1.concat(arr2)
console.log(addArr)
//Prints
[‘true’, ‘no’, ‘yes’, ‘no’]

But with the ES6 Spread operator all you need to do is

const arr1 = [‘true’ , ‘false’];
const arr2 = [‘yes’ , ‘no’];
const addArr = […arr1, …arr2]
console.log(addArr)
//Prints
[‘true’, ‘false’, ‘yes’, ‘no’]

You can also do the same with objects.
Lets say you have

const userData = {name: ‘kelechi’, age: 25, gender: ‘female’};
const userRole = {isAdmin: true, isLoggedIn : false};
const mySpread = {…userData, …userRole}
console.log(mySpread)
//Prints
{name: ‘kelechi’, age: 25, gender: ‘female’, isAdmin: true, isLoggedIn : false}

Rest operator

Even though rest operator has the same syntax as spread, they do the exact opposite thing. Strange right? Exactly. So say you want to bundle up different arrays as one variable, you should use the rest operator. While this explanation may seam daunting at first, i will use the ES6 destructuring assignment to show you how to understand it better.
in a nutshell, destructuring assignment is used to unpack the elements in an object to make it easier to access. You can read up more on java script destructing here.

const myData = [‘miss’, ‘kelechi’, 25, ‘female’, true];
const destructured = [title, firstName, …restData]
console.log(title) // miss;
console.log(firstName) //kelechi;
console.log(resData) //[25, female, true]

You see that we used the rest operator to access the rest of the data, ‘rest’ as the name implies.

In conclusion, spread operators are used to copy arrays in arrays or even objects into objects while rest operators allows you to bundle the rest of the elements in an array or objects in an element as one variable.

Axios.defaults.timeout

KelahKelah — Tue, 26 Jan 2021 09:36:20 +0000

Axios is an external library used in making promised based HTTP requests. One of the coolest things that comes with it people hardly talk about is the axios timeout functionality.

This article simply explains how to use the axios timeout functionality to optimize/minimize the time it takes to make HTTP requests.

So when you make HTTP requests to a web server there would be sometimes when a response would be delayed for no reason. You may want to avoid this unnecessary delay with axios timeout object. What the axios timeout does is that it would abort a request when it takes longer time. Since the time is measured in milliseconds, whatever seconds set to it is how long the request takes and once it exceeds that times, the request is aborted. The default time is set to 0 which indicates no timeout. This gives you some form of control over making requests.

Here is how you can globally set timeout with axios.

import axios from axios; axios.defaults.timeout === 3000;

One important thing to note is that axios timeout is response/request bound and not connection bound. What this means is that if there is no network on the clients side or for some reason the IP address is not found or may be the domain name is not found, axios timeout isn't going to work. But if for instance the server your making a request to is taking too long to load, then axios time out will work.

You can also set axios timeout this way

import axios from axios ;

axios
.post(‘url’, {timeout: 3000})
.then((res) => console.log(res))
.catch((err) => console.log(err))

In this case if your response takes more than 3 seconds, it goes into the catch block.

DEV Community: KelahKelah

Es6 Spread and rest operator in javascript

Axios.defaults.timeout