The latest ECMA standard for [JavaScript](https://hackernoon.com/tagged/javascript) (ECMAScript 6) makes JavaScript more readable by encouraging a more declarative style with functional constructs and new operators.

### Destructuring

One of my favourite ES6 features is **destructuring**. It allows you to extract data from one variable to another by using **structure**. For arrays this means for example:

var \[ first, second \] = \[ 1, 2, 3, 4 \];  
// first: 1  
// second: 2

There’s more you can do, like skip some members of the array on the right-hand side of the operation.

var \[ first, , third, fourth \] = \[ 1, 2, 3, 4 \];  
// first: 1  
// third: 3  
// fourth: 4

This is actually quite easily back-ported to the equivalent ES5

var arr = \[ 1, 2, 3, 4 \];  
var first = arr\[0\];  
var second = arr\[1\];  
// etc ...

### Rest

This is where ES6 features become more interesting. With destructuring we can also assign what is called the **rest** of the array. We indicate **rest** with the `...` notation.

var \[ first, ...notFirst \] = \[ 1, 2, 3, 4 \];  
// first: 1  
// notFirst: \[ 2, 3, 4 \]

Naming conventions lead to code that is more akin to the following:

var \[ first, second, ...rest \] = \[ 1, 2, 3, 4 \]  
// first: 1  
// second: 2  
// rest: \[ 3, 4 \]

The `rest` operator has some interesting properties:

var \[ first, ...rest \] = \[ 1 \]  
// first: 1  
// rest: \[\]

It always returns an array. Which means even in defensive JavaScript land, it’s ok to do things like check `.length` of `rest` without guards.

The equivalent in ES5 (and below) is to use the`Array.slice` function.

var arr = \[ 1, 2, 3, 4 \];  
var first = arr\[0\];  
var rest = arr.slice(1);  
// first: 1  
// rest: \[ 2, 3, 4 \]

Two things to note here:

*   the ES5 version is more verbose
*   the ES5 version is more imperative, we tell JavaScript **how** to do something instead of telling it **what** we want.

Now I also think that the structure-matching version (with rest) is more readable.

### Parameter destructuring

We can use destructuring on the parameters of a function definition:

function something(\[ first, ...rest \]) {  
  return {  
    first: first,  
    rest: rest  
  };  
}  
var result = something(\[1, 2, 3\]);  
// result: { first: 1, rest: \[ 2,3 \] }

Equivalent ES5:

function something(arr){  
  var first = arr\[0\];  
  var rest = arr.slice(1);  
  return {  
    first: first,  
    rest: rest  
  };  
}

Again it’s more verbose and more imperative.

### Spread

Spread uses the same notation as rest: `...`. What it does is quite different.

var arr = \[ 1, 2, 3 \];  
var newArr = \[ ...arr \];  
// newArr: \[ 1, 2, 3\]

ES5 equivalent:

var arr = \[ 1, 2, 3 \];  
var newArr = \[\].concat(arr);

Things to note, the contents of the array are **copied**. So `newArr` is not a reference to `arr`.

We can also do things like appending or prepending an array.

var arr = \[ 1, 2, 3\] ;

var withPrepend = \[ ...arr, 3, 2, 1\];  
var withAppend = \[ 3, 2, 1, ...arr \];  
// withPrepend: \[ 1, 2, 3, 3, 2, 1\]  
// withAppend: \[ 3, 2, 1, 1, 2, 3 \]

### Functional Programming: lists & recursion

In functional [programming](https://hackernoon.com/tagged/programming) when we run functions recursively over lists we like to model the list as a **head** and a **tail**.

The head is the first element of the list, the tail is the list composed of the list minus the head.

arr = \[ 1, 2, 3 \]  
// head(arr): 1  
// tail(arr): \[ 2, 3 \]

In ES6 we can do this just by naming the variable appropriately with **destructuring** and **rest:**

var \[ head, ...tail \] = \[ 1, 2, 3 \];  
// head: 1  
// tail: \[ 2, 3 \]

We can also trivially implement the `head` and `tail` functions using ES6:

function head(\[ head, ...tail \]) {   
  return head;  
}  
function tail(\[ head, ...tail \]) {  
  return tail;  
}  
// or with arrow function syntax  
var head = (\[ head, ...tail \]) => head;  
var tail = (\[ head, ...tail \]) => tail;

#### (Tail) Recursion

We can implement functions that operate over arrays (or lists as they tend to be called in functional programming) using **parameter destructuring** and **recursion**.

For example, map can be implemented in the following manner:

_Map is a function that takes a list and a function and returns a list containing the result of a function application to each element of the list._

function map(\[ head, ...tail \], fn) {  
  if(head === undefined && !tail.length) return \[\];  
  if(tail.length === 0){  
    return \[ fn(head) \];  
  }  
  return \[ fn(head) \].concat(map(tail, fn));  
}

The `tail.length === 0` checks whether there is still a tail to recurse over. Otherwise, the recursion stops there.

This is not necessarily the most efficient version of map both in terms of memory usage and speed but it’s a good illustration of ES6.

We can further simplify it by replacing `concat` with the `spread` operator and using a single return statement with a ternary operator.

#### Very ES6 map

Our ES6 recursive/destructuring map can be simplified to:

Or if we want to abuse ES6 and allow ourselves to forget that we’re actually doing JavaScript:

ES5 equivalent

All the features add up and while recursive map in ES6 is essentially a one-liner, in ES5 it’s a clunky, long, hard to read function.

#### Reimplementing list manipulation functions

Now you can have a go at reimplementing `filter`, `reduce` and `join` using the above techniques.

Solutions below the fold :).

ES6 allows us to write code in a functional style more tersely and effectively.

_Give some 💚 to this post if you liked it and to_ **_follow_** _for more JavaScript-related things._

_You can find me on Twitter_[_(at)hugo\_\_df_](https://twitter.com/hugo__df)_, on GitHub as_ [_HugoDF_](https://github.com/HugoDF)_, there are more JavaScript gists_ [_here_](https://gist.github.com/HugoDF)_._

#### Recursive list operations in ES6 with rest/spread and destructuring

> [Hacker Noon](http://bit.ly/Hackernoon) is how hackers start their afternoons. We’re a part of the [@AMI](http://bit.ly/atAMIatAMI)family. We are now [accepting submissions](http://bit.ly/hackernoonsubmission) and happy to [discuss advertising &sponsorship](mailto:partners@amipublications.com) opportunities.

> To learn more, [read our about page](https://goo.gl/4ofytp), [like/message us on Facebook](http://bit.ly/HackernoonFB), or simply, [tweet/DM @HackerNoon.](https://goo.gl/k7XYbx)

> If you enjoyed this story, we recommend reading our [latest tech stories](http://bit.ly/hackernoonlatestt) and [trending tech stories](https://hackernoon.com/trending). Until next time, don’t take the realities of the world for granted!

Facebook

Twitter

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Recursion in JavaScript with ES6, destructuring and rest/spread

Too Long; Didn't Read

Companies Mentioned

@hugo__df

RELATED STORIES