Arrow Functions in JavaScript, How is it different?

function formatName(firstName, lastName) {  
return firstName + " " + lastName;
}
const formatName = (firstName, lastName) => {  
return firstName + " " + lastName;
}

The differences

1. “this”

When is this useful?

// Let's create a controller to manage the value of some counter  
// when a button is pressed
function ButtonController() {
// initialise the count value
// here "this" is the ButtonController instance
this.countValue = 0;

// create an arrow function to increase out counter
// within the arrow function "this" refers
// to the same "this" as above
const increaseCount = () => {
this.countValue += 1;
}

// As an example, this would be how we would have to do
// the same thing, without arrow functions

// we capture the parent "this" in some variable
var \_this = this;
function decreaseCount() {
// \_this is now available in the scope of decreaseCount
\_this.countValue -= 1;
}

return {
increaseCount,
decreaseCount,
get countValue() {
return this.countValue;
}
}
}

const controllerInstance = SomeController();

// And we could bind this method to the on click event of a button
controllerInstance.increaseCount();

2. Implicit return

// Instead of writing this function like this:  
const formatName = (firstName, lastName) => {
return firstName + " " + lastName;
}

//We can make use of implicit returns instead
const formatName = (firstName, lastName) => firstName + " " + lastName;

When is this useful?

//Let's make an array of fruit.  
const fruitArray = ["Apple", "Banana", "Orange"];

//Now we want an array of fruit but all lower case
//Here we will use Array.map, and make use of the implicit return
//from the arrow function that we pass as the callback
const fruitArrayLowerCase = fruitArray.map(fruit=>fruit.toLowerCase());

//The same thing without an arrow function would look like
const fruitArrayLowerCasae = fruitArray.map(function(fruit) {
return fruit.toLowerCase();
});


//Imagine we need to chain a couple together:
const fruitArrayFiltered = fruitArray
.map(fruit=>fruit.toLowerCase())
.filter(fruit=>fruit.charAt(0) === "a");
// The following function returns an object literal with  
// the two arguments as properties
const myRegularFuncThatReturnsAnObject = function(a,b) {
return {a,b};
}

// To do the same with an arrow function, we need to wrap
// the return value in brackets "(" ")"
const myImplicitReturnFunc = (a,b) => ({a,b});

3. Always anonymous

// In this first example, we're using a named function, \*before\*  
// it's declared. This is because hoisting allows us to call
// any named function within the same scope, despite the fact
// that the function isn't declared until the end of the scope
function initMyComponent1() {

// This works
this.addEventListener('click', handleComponentClick);

// handleComponentClick is a named function and thus
// it is hoisted to the top of initMyComponent1 scope
function handleComponentClick(e) {
// Do something
}

}

// In this second example, we're trying to use an anonymous
// function \*before\* it's been declared
// This will throw an error!
function initMyComponent2() {

// THIS WILL FAIL!
this.addEventListener('click', handleComponentClick);

const handleComponentClick = (e) => {
// Do something
}
}

When to use an arrow function?

// This won't work, as the addEventListener callback is  
// executed on the global (window) scope
// obj.count is always 1
const obj = {
count: 1,
addEventListener: function(el) {
el.addEventListener('click', function() {
this.count ++;
});
}
}

// This will work as expected, the arrow function is created
// with the obj scope, and obj will be incremented
const obj = {
count: 1,
addEventListener: function(el) {
el.addEventListener('click', ()=>{
this.count ++;
});
}
}

When to use a regular, or a regular named function

  • You need the function’s this or super access
  • An object constructor
  • An object method*
  • If you want to use yield within the function body
  • You want to use call, apply, or bind

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mohamed Ibrahim ElSadany

Mohamed Ibrahim ElSadany

Front-end Developer in love with JavaScript