Spread operator, Iterators and Arrow functions in ES6

by Daniela G. November. 16, 17 0 Comment
Tech tutorials

This is the second installment of our ES6 tutorial series, where we will take a look at the spread operators, iterators, and fat arrow functions. We will focus on their peculiarities and go over where to use them.

Check out the first post in the series about ES6 Classes, where we gave you a practical example of game UI.

Spread operator

The spread operator allows an iterable to be expanded in places where zero or multiple arguments (for function calls) or elements (for array literals) are expected.

The syntax looks like this:

  •  for function calls:

  • for array literals:

 

Let’s look at some examples where the spread operator becomes handy:

  • Replace Apply when calling functions: when you want to pass the elements of an array as arguments to a function.

Before ES6, in this case, we had to use Function.prototype.apply:

You can simplify the code above and avoid using null, thanks to the spread operator:

  • Easier array manipulation: use it when you want to expand an array with another one without nesting them or using a combination of push, splice, concat, etc. Spread syntax can be used anywhere in the array literal and it can be used multiple times:

  •  Copy an array: spread syntax makes a copy by value, so that future manipulations will not affect the original array:

Note: objects within the array are still by reference, so not everything gets “copied”, per se.

  •  Concatenate arrays: it is an easier way to insert an array of values at the start of an existing array without using unshift and apply:

Thanks to the spread syntax, this operation is much easier:

  •  Math functions: you can use them in conjuction:

  •  Converting string to array: this feature allows you can convert a string to an array of characters:

Iterators

The for...of statement creates a loop that iterates over iterable data structures such as Arrays, Strings, Maps, Sets, and more. It is the most concise and direct syntax for looping through array elements, as an alternative to both for...in and forEach(). For...of loop works with break, continue, return and throw.

Let’s look at the syntax:

where:

  •  variable: for each iteration, a value of a different property is assigned to a variable.
  • iterable: an object which has enumerable properties and can be iterated upon.

The following examples show the different data structures where the for...of loop can be used:

  •  Arrays: They are used to store multiple values in a single variable. Here is how we iterate over an Array:

  • Strings: They hold data that can be represented in text form:

  • Map: The Map object holds key-value pairs, so the for...of loop will return an array of key-value pair for each iteration.

  •  Set: The Set object allows you to store unique values of any type like primitive values or objects. If you create a Set that has the same element more than once, it is still considered as a single element.

  • Arguments object: It is an Array-like object corresponding to the arguments passed to a function. Here is a case where iterating is used over it:

Fat arrow functions

The main benefits of fat arrow functions are that they provide shorter syntax and simplify function scoping by non-binding of the this keyword. Their analogue is Lambdas in other languages like C# and Python.

Let’s compare the syntax of an ordinary function and this one of a fat arrow function:

The same function can be expressed as an arrow function with one line of code, which is more concise and easier to read:

So, the basic syntax of a fat arrow function looks like:

You can simplify the syntax even more:

  •  when there’s only one parameter, the opening parenthesis are optional:

  • when you are returning an expression, you remove the brackets and the return keyword:

  •  function without parameters should be written with a pair of parentheses:

As we said above the this of arrow functions works differently.
Before we move on, let’s take a look at what is this in JavaScript. It can refer to objects, variables and can we use it in context.

  •  Global context:

If this is outside of any function in a global execution context, it refers to the global context (window object in browsers).

  •  Function context

this refers to the object that the function is executing in. Look at this example:

this is determined by how a function is invoked. As you can see, all the above functions have been called in a global context.

So, when a function is called as a method of an object, this is set to the object the method is called on:

And it doesn’t matter how the function was defined:

Another example:

But in strict mode, rules are different. Context remains as whatever it was set to:

In the example above, this was not defined, so it remained undefined.

this is dynamic, which means the value could change. Here’s a simple example to show that:

We can call car by this and by object name:

When we create an instance of an object with new operator, the context of a function will be set to the created instance of the object:

  • call, apply, bind

These methods allow us to manage the context of a function. Let’s see how they work, on examples:

The bind method sets the context to the provided value. But remember that after using bind, this remains immutable, even by invoking call, apply or bind:

But when we use arrow functions, this retains the value of the enclosing lexical context:

Let’s notice the difference between the arrow and ordinary function. With an arrow function we are in the window context:

We can say that:

x => this.y equals (x) {return this.y}.bind(this)

The arrow function always binds this and so it can’t be used as a constructor:

Once you figure out the difference between the function dynamic and lexical this, be careful before declaring a new function. If it is invoked as a method, use dynamic this, if it is invoked as a subroutine, use the lexical this.

For more interesting information regarding spread operator, iterators and arrow functions in ES6 follow @CoherentLabs on Twitter or start a discussion in our Forum.

Additional resources

6 Great Uses of the Spread Operator

ES6 Iterators in Depth

ES6 In Depth: Iterators and the for-of loop

MDN for…of

Arrow functions

ES6 In Depth: Arrow functions

Spread syntax

Social Shares

Related Articles

Leave a Comment