Learn Arrow Functions | Modern and Advanced Function Patterns

Arrow functions offer a modern, concise way to write functions in JavaScript. They are especially useful for short, simple functions, such as those used in array methods or when you want to create small, one-off operations.

The syntax for arrow functions is more compact than traditional function expressions, making your code easier to read and write. To define an arrow function, you use the => syntax, which is why they are often called fat arrow functions.

For example, a function that takes a number and returns its double can be written as

const double = (n) => n * 2;

If your function has only one parameter, you can even omit the parentheses: n => n * 2. If the function body is a single expression, the result of that expression is automatically returned, so you do not need to write the return keyword.


              123456789101112131415
            
// Regular function
function doubleArray1(arr) {
  return arr.map(function (num) {
    return num * 2;
  });
}

// Usage:
console.log(doubleArray1([1, 2, 3])); // [2, 4, 6]

// Arrow function
const doubleArray2 = (arr) => arr.map((num) => num * 2);

// Usage:
console.log(doubleArray2([1, 2, 3])); // [2, 4, 6]

While arrow functions are convenient, they also come with some important limitations:

Arrow functions do not have their own this value;
Arrow functions inherit this from the surrounding scope where they are defined;
You should avoid using arrow functions as methods in objects or as constructors, because they cannot be used with the new keyword and will not behave as expected when accessing this;
Arrow functions do not have their own arguments object, so if you need to access all passed arguments, a regular function is a better choice.

These limitations mean arrow functions are best suited for short, simple tasks, not for defining methods or constructors.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Awesome!

Completion rate improved to 7.69

Swipe to show menu