The latest ECMA standard for (ECMAScript 6) makes JavaScript more readable by encouraging a more declarative style with functional constructs and new operators. JavaScript Destructuring One of my favourite ES6 features is . It allows you to extract data from one variable to another by using . For arrays this means for example: destructuring structure 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 of the array. We indicate with the notation. rest rest ... 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 operator has some interesting properties: rest 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 of without guards. .length rest The equivalent in ES5 (and below) is to use the function. Array.slice 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 to do something instead of telling it we want. how what 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 . So is not a reference to . copied newArr 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 when we run functions recursively over lists we like to model the list as a and a . programming head 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 and destructuring rest: var [ head, ...tail ] = [ 1, 2, 3 ];// head: 1// tail: [ 2, 3 ] We can also trivially implement the and functions using ES6: head tail function head([ head, ...tail ]) {return head;}function tail([ head, ...tail ]) {return tail;}// or with arrow function syntaxvar 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 and . parameter destructuring 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 checks whether there is still a tail to recurse over. Otherwise, the recursion stops there. tail.length === 0 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 with the operator and using a single return statement with a ternary operator. concat spread 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 , and using the above techniques. filter reduce join 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 , on GitHub as HugoDF , there are more JavaScript gists here . Recursive list operations in ES6 with rest/spread and destructuring is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Facebook

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Recursion in JavaScript with ES6, destructuring and rest/spread

Too Long; Didn't Read

Companies Mentioned

Hugo Di Francesco

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Recursion in JavaScript with ES6, destructuring and rest/spread

Too Long; Didn't Read

Companies Mentioned

Hugo Di Francesco

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES