Posted on: 2017-03-09

There is a lot of synonym around Rest and Spread. The Rest/Spread specification talk about object properties, Mozilla documents it under expressions and operators with the title destructuring assignment. I personaly like just calling it "spread" and don't like the "rest" part since it's share the name of Rest Api which make it hard to find good result on Internet. However, regardless of the name, let's explore this object Rest experimental functionalities of JavaScript/EcmaScript, already present if you are using TypeScript.

Object Rest a.k.a. destructuring

They are more than one usage for Rest. You can extract object's fields into individual variables, take the remaining of the field into an object, copy array values into variable, swapping value between variables, take the remaining of the values of an array into a new array.

Extracting Object fields a.k.a. Object Destructuring Assignment

Imagine that you have an object and that you want to extract specific values. A common scenario could be that you get more data from a Rest Api call and you need to get specific values.

const user = {
  id: 1,
  name: "Patrick Desjardins",
  website: "http://patrickdesjardins.com/blog",
  isPaidUser: false,
  email: "patrick@email.com",
};

Traditionally, you would do :

const id = user.id;
const name = user.name;
const email = user.email;

Now, with object destructuring assigment you can extract in a single line the field you want.

const { id, name, email } = user;

This operation doesn't alter the user variable and create 3 variables that can be accessed like the traditional way.

The example shown set the value from the name of the user. However, we can also specify the name of the variable we want which can be handy if the schema returned from the Rest Api doesn't satisfy the convention you are using. Let's do an example where we change the name to have underscore in front of each variable that we extract.

const { id: _id, name: _name, email: _email } = user;

We can also have some cases where the information you get may not contain the property desired. For example, the user may have a field numberOfChildren with an integer if this one has at least one child and return nothing if no children. In that case, we would want to have a default value to 0.

const { id, name, email, numberOfChildren = 0 } = user;

In the case that the user has numberOfChildren defined, this one will take over the default value. In all cases, we can be sure that numberOfChildren variable will be set with a value.

Take the remaining of the field into an object

As seen in the previous section, you can extract specific fields into variable. But, you can also store all the remaining fields into a new object.

const { id, email, ...allRemainingFields } = user;

The value of allRemainingFields is an anonymous (any) object with the field email, website, isPaidUser.

Copy array values into variable

This scenario is handy if you accept an array for parameter and needs to extract values by position. For example, you expect to receive an array of 3 elements and that you want to store these 3 elements in a variable.

const myArray = ["patrick", "desjardins", true];
const [firstName, lastName, hasPaid] = myArray;

You probably ask yourself about what if the array doesn't contain at least 3 items that won't work! Well, you can also use default value. Here is an example where the website was not passed in the array.

const myArray = ["patrick", "desjardins", true];
const [firstName, lastName, hasPaid, website = "none"] = myArray;

Swapping value between variables

Maybe not as useful but still interesting to have in your tool belt is two swap value between two variables. Doing it manually requires to have a temporary variable. You take the value of var1 set it to tempo, take value of var2 set it to var1 and set var2 with tempo.

let var1 = 100;
let var2 = 300;
let tempo;
tempo = var1;
var1 = var2;
var2 = tempo;

Now, you can do it in a single line without temporary variable.

let var1 = 100; let var2 = 300; [var1, var2] = [var2, var1];

Take the remaining of the values of an array into a new array

This is similar to what we did with object's fields, but this time with an array. We can set some array values into variables and the remaining into a new array.

const myArray = ["patrick", "desjardins", true]; 
const [firstName, ...remaining];

In this example remaining is : ["desjardins", true]

We saw a lot of different scenario where destructuring could be interesting by avoiding several lines of code for simple object or array manipulation. In an upcoming article we will see about the second operator called spread and how this one can simplify even more your JavaScript/TypeScript code.