💯 Arrow Functions in Javascript - Guide

Arrow functions are a shorter syntax for defining functions in JavaScript, introduced in ECMAScript 6 (ES6). They offer a compact alternative to the traditional function definition and have some special properties, especially when dealing with the this value.

Arrow function syntax

The basic syntax of an arrow function is as follows:

// traditional function definition
function add(a, b) {
  return a + b;
}

// arrow function
const add = (a, b) => a + b;

If the arrow function is just an expression, the curly braces and return can be omitted. Otherwise, the braces and return are needed, as with a normal function.

Advantages of Arrow functions

1. Compact syntax: Arrow functions are shorter and more concise than conventional functions.

// Normal function
function greet(name) {
  return "Hello, " + name;
}

// Arrow function
const greet = (name) => "Hello, " + name;

1. Lexical this: Arrow functions bind the this value lexically, i.e. they take the value of this from the surrounding context in which they are defined. This can make working with this much easier in certain situations, such as callbacks or methods in objects.

function Person() {
  this.age = 0;
  setInterval(() => {
    this.age++; // `this` refers to the Person object
    console.log(this.age);
  }, 1000);
}

const p = new Person();

In a traditional function, you would have to bind this explicitly (e.g. with .bind()) to get the correct this.

1. No arguments object: Arrow functions do not have their own arguments object, which can lead to less confusion when used within other functions or methods.

function traditionalFunction() {
  console.log(arguments); // Shows the arguments of the function
}

const arrowFunction = () => {
  console.log(arguments); // ReferenceError: arguments is not defined
};

1. Ideal for simple callback functions: They are ideal for short functions used as callback or for iterators.

const numbers = [1, 2, 3, 4];
const squares = numbers.map(n => n * n); // [1, 4, 9, 16]

Disadvantages of Arrow Functions

1. No own this: Arrow functions do not have their own this. While this is useful in many cases, it can cause problems in situations where a separate this is needed. Especially in event handlers or methods in objects, this can be confusing.

const obj = {
  name: "Object",
  method: () => {
    console.log(this.name); // `this` refers to the global context, not to `obj`
  }
};
obj.method(); // undefined

Here a normal function would correctly refer the this value to the obj.

1. Not usable as constructors: Arrow functions cannot be used as constructors because they do not have their own this. Attempting to call them with the new operator will result in an error.

const MyClass = () => {};
const instance = new MyClass(); // TypeError: MyClass is not a constructor

1. No arguments object: As mentioned earlier, Arrow functions do not have their own arguments object. This can be problematic if you need to process the function arguments dynamically, which is easier with traditional functions.

2. Not suitable for dynamic contexts: In cases where you want to set the context (i.e. the value of this) dynamically, for example through functions such as call, apply or bind, arrow functions are less flexible because they do not have this.

Application examples

1. Compact callback functions

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

1. Lexical this

In the following example, the Arrow function is used to access the this of the parent context (the object obj) instead of the this of the event handler.

const obj = {
  count: 0,
  increment: function() {
    setInterval(() => {
      this.count++; // `this` refers to `obj`
      console.log(this.count);
    }, 1000);
  }
};
obj.increment(); // 1, 2, 3, ...

1. Use in asynchronous operations

Arrow functions are very useful in combination with asynchronous operations such as promises.

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

1. Simple functions without curly braces

If an arrow function only returns an expression, the braces and the return can be omitted:

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

1. Cannot be used as a constructor

const Person = (name) => {
  this.name = name; // Error, `this` does not work in arrow functions
};

const person = new Person("John"); // TypeError: Person is not a constructor

Summary of advantages and disadvantages

Conclusion

Arrow functions are a convenient and modern tool in JavaScript, especially useful for shorter, less complex functions and callback scenarios.