Michael Martire - Designer & Marketer | ES6 Arrow Functions
post-template-default,single,single-post,postid-16195,single-format-standard,theme-bridge,woocommerce-no-js,ajax_fade,page_not_loaded,,columns-4,qode-child-theme-ver-1.0.0,qode-theme-ver-16.7,qode-theme-bridge,disabled_footer_top,wpb-js-composer js-comp-ver-5.5.2,vc_responsive

ES6 Arrow Functions

ES6 Arrow Functions

Why use arrow functions?

To put it simply, arrow functions are just a more efficient alternative to writing traditional functions.

Arrow functions:
– Are anonymous
– Change the way “this” binds for scoping in the function

Starting with an ES5 function

// This ES5 function takes a and b as arguments.
// Then returns the sum of a and b

var additionFunc = function(a, b) {
  return a + b;

Same function but implemented as an ES6 Arrow function!

// This ES6 function takes x and y as arguments. 
// Then returns the sum of x and y
const additionFunc = (x, y) => { return x + y };

What is the difference?

Half of the effort and less code!
But that is only one example, what if you only need one argument? Or what if you want to manipulate an array?
Lets take a look.

Lets pass a single argument

// This ES6 function takes a as an argument and adds 1 
const plusOne = a => {return a + 1}

// This ES6 function has no arguments and console logs Hello World
const helloWorld = () => {console.log('Hello World')}

Lets go deeper!

// Lets take this array and sort it by price
const shoppingList = [
  { name:'milk', price: 3 },
  { name:'eggs', price: 2.50 },
  { name:'chips', price: 0.25 }

let filterList = list => list.sort((a,b) => a.price-b.price);


// Output
[[object Object] {
  name: 'chips',
  price: 0.25
}, [object Object] {
  name: 'eggs',
  price: 2.5
}, [object Object] {
  name: 'milk',
  price: 3

Implicit vs Explicit Returns

// What an implicit return looks like in ES6
const implicit = () => 'Return This'


// Output
'Return This'

// What an explicit ES5 return looks like
var implicit = function implicit() {
  return 'Return This';


// Output
'Return This'

We can return a single-line statement within the arrow function without explicitly calling “return”.

If we want to return a block or manipulate the data further, we need to explicitly call “return”/ use curly braces { }.
ES6 looks at the body of the function to see if it’s contents are contained to one executable line of code, if this is true the function will return that line of code or else it returns “undefined”. As soon as you use curly braces { } within the function body, an implicit return is no longer feasible.

Lets look at some examples

const explicit = () => { return 'Michael' }

// returns 'awesome'

const defective = () => { 'Michael' }

// returns undefined

Not too bad

We were able to sort an array with one line of code and return data without explicitly calling “return”.
That is useful, quite a bit of time can be saved using arrow functions!

But there is a tradeoff…

Arrow functions are great from an “Output” (Typing) perspective but not optimal for “Input” (Readability).

But it does get easier to read after using arrow functions consistently!

No Comments

Sorry, the comment form is closed at this time.