JavaScript Fundamentals: Arrow Functions

Arrow functions are one of the most popular features of ES6, but what are they and how do you use them?

An arrow function is a shorter way to write a function expression in JavaScript. They are anonymous and are often used as inline functions.

Arrow functions have a few benefits over regular functions.

• They are less verbose, so they are easier to write and read.
• They do not bind their own this value, so they are often used in methods where this is used frequently.
• Arrow functions are always seen as expressions, so they can be used in places where a regular function cannot. This is particularly useful for higher order functions, such as map, filter, and reduce.
• Arrow functions are always anonymous, so they can be used in places where a named function is not allowed.

Arrow functions don't bind their own value

JavaScript arrow functions do not bind their own value of this, but instead inherit it from the enclosing scope. This means that inside an arrow function, this will always refer to the same object as it does outside the function.

For example, consider the following code:

var obj = {
  foo: function() {
    console.log(this === obj); // true
  }
};

obj.foo();

Now consider the same code, but with an arrow function:

var obj = {
  foo: () => {
    console.log(this === obj); // false
  }
};

obj.foo();

In the second example, this inside the arrow function does not refer to obj, but instead refers to the global object (or undefined in strict mode). One common use case for arrow functions is in method definitions on objects.

In the following code, we use an arrow function for the method bar, but not for the method baz:

var obj = {
  foo: function() {
    // ...
  },
  bar: () => {
    // ...
  },
  baz: function() {
    // ...
  }
};

Since arrow functions do not bind their own value of this, they are not suitable for use as methods.

Arrow functions are expressions

An arrow function is a function expression (a function that is assigned to a variable) that uses the "fat arrow" => syntax.

Arrow functions are considered expressions because they can be used to create anonymous functions (functions without a name). As a result, arrow functions are often used in callback functions (functions that are passed as an argument to another function).

For example:

//Anonymous function assigned to a variable
let foo = function() {
  //Do something
};

//Arrow function assigned to a variable
let foo = () => {
  //Do something
};

//Callback function using an arrow function
someFunction((err, data) => {
  //Do something with the err or data
});

Why are arrow functions anonymous?

Arrow functions are generally considered anonymous because they do not have a name associated with them. This makes them ideal for inline functions or for functions that are declared and invoked immediately.

Here is an example of an anonymous arrow function being used inline:

const multiply = (x, y) => x * y;

multiply(4, 3); // 12

In this code, the arrow function is assigned to the multiply constant and is invoked immediately with the arguments 4 and 3.

Another advantage of arrow functions is that they do not create their own this scope. This means that they can access the this scope of the parent function. This can be useful when working with object-oriented programming or with React components.

Arrow functions can be assigned to a variable

You can assign arrow functions to a variable in JavaScript. This is because arrow functions are just shorthand for regular functions.

For example, the following arrow function:

const foo = () => { // do something }

is equivalent to:

const foo = function() { // do something }

Writing arrow functions in JavaScript

So how do you write an arrow function?

The basic syntax is to write the keyword function, followed by a pair of parentheses. Inside the parentheses, you can optionally specify parameters, just like a regular function. After the parentheses, you use an arrow => to denote the function body.

If the function body is a single expression, then the value of that expression will be returned. If the function body is a block of code, then you must use the return keyword to return a value.

Here are some examples of arrow functions:

// A function that takes no arguments and returns nothing
() => {}

// A function that takes two arguments and returns the sum of those arguments
(a, b) => a + b

// A function that takes an object as an argument and returns the string "Hello, world!"
obj => "Hello, world!"

Using arrow functions

Scenario 1: When you need to create a function that simply returns a value.

For example, if you have a function that calculates the sum of two numbers, you can use an arrow function to simply return the result:

const sum = (a, b) => a + b;

Scenario 2: When you need to create a function that takes a single argument

If you have a function that takes a single argument, you can use an arrow function to make it more concise:

const double = num => num * 2;

Scenario 3: When you need to create a function that takes multiple arguments

If you have a function that takes multiple arguments, you can use an arrow function to make it more concise:

const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;