DEV Community

Cover image for JavaScript arrow functions
Aden Eilers
Aden Eilers

Posted on

JavaScript arrow functions

What is an arrow function in JavaScript?
Arrow functions are an alternative way of writing functions in JavaScript. There are a few limitations compared to the traditional function that will be discussed in this article.

// Traditional function declaration
function myFunc(myParam) {
  return myParam + 1;
}

// Arrow function declaration
const myFunc = (myParam) => {
  return myParam + 1;
}
Enter fullscreen mode Exit fullscreen mode

Arrow functions can often be shortened substantially.

// If there is one parameter, then you do not need to include
// the parenthesis. 
const myFunc = myParam => { return myParam + 1; }

// If the functions contents can fit on one line, then you can
// remove the 'return' keyword and '{}'. 
// In this case, the 'return' is implied.
const myFunc = myParam => myParam + 1;

Enter fullscreen mode Exit fullscreen mode

It is common to use arrow functions with the built in array methods.

const arr = [1, 2, 3, 4, 5];

const arrMap = arr.map(v => v + 1);

const arrFiltered = arr.filter(v => v > 3);

arr.forEach(v => console.log(v));
Enter fullscreen mode Exit fullscreen mode

The limitations of Arrow functions.

Arrow functions do not have their own binding of this. As a result, you generally will not want to use them as methods in your objects. A few more things to know:

  • They don't have their own binding to arguments, or super
  • They cannot be used as constructors within classes.
  • They likely will not behave as expected with the keywords call, apply and bind.

Since the arrow function does not have its own binding of this, it cannot reference other attributes or methods in objects. this in an arrow function will always reference the global scope.

const obj = {
  value: 1,
  myFunc1: function () {
    console.log(this.value, this);
  },
  myFunc2: () => {
    console.log(this.value, this);
  },
};

obj.myFunc1(); // 1, obj{...}
obj.myFunc2(); // undefined, Window{...} or the Global object
Enter fullscreen mode Exit fullscreen mode

For more info, reference the MDN documentation: MDN Docs

Leave a comment if you have any questions or feedback.

Discussion (0)