The `this` Context of Arrow Functions in JavaScript

This article will give a brief explanation on how to write arrow functions and focus more on the use of this and how it is expressed in functions.

Table of Content

• Introduction

• What are Arrow Functions

• The this keyword

• Conclusion

• Additional Resources

Introduction

The arrow function, is one of the most useful features introduced in ES6. we will briefly look into the syntax of arrow functions and talk a bit more on how they manage this compared to regular functions.

What are Arrow Functions

Arrow functions offer a concise syntax for writing functions in JavaScript. They are particularly useful for creating short, simple functions. Unlike normal functions, arrow functions use an arrow (=>) between the parameter list and the function body, replacing the need for the function keyword.

For example; below is a regular JavaScript function expression

function greetings(name) {
  console.log(`Hello, ${name}!`);
}
greetings('Mark'); // Hello, Mark!

Then the arrow function syntax where 'function' is replaced with a declaration variable 'const' and an arrow is placed between the parameter () and the function body {}

const greetings = name => {
  console.log(`Hello, ${name}!`);
};
greetings('Mark'); // Hello, Mark!

There is an even shorter way of writing arrow function but for only functions with one parameter

function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Hello, Alice!

const greet = name => `Hello, ${name}!`;
console.log(greet("Alice")); // Hello, Alice!

Using arrow function syntax offers several advantages. It makes your code cleaner and more concise, making it suitable for situations where you don’t need to name the function, such as callbacks or creating Immediately Invoked Function Expressions. Additionally, arrow functions do not have their own this context, which simplifies working with this in nested functions.

The this keyword

One significant difference between the arrow function and the regular function is how they handle the this keyword.

In a regular function, the this keyword refers to the object that calls the function. In an arrow function, the this keyword refers to the object where the function was defined.

Regular Function
var num = {
    value: 40,
    regularFun: function() {
        console.log(this.value);
    }
};
num.regularFun(); //40

Arrow Function
var num = {
    value: 40,
    arrowFun: () => {
        console.log(this.value);
    }
};
num.arrowFun(); //undefined

In the arrow function, the output is undefined because the this refers to the value of the enclosing context i.e 'arrowFun' which is not defined and there is no this to inherit like in the case of a nested function. While the regular function, the this refers to the object 'num' from which you call the function, here 'value' is defined '40'.

Another example;

Regular Function
var foot = {
    kick: function() {
        this.yelp = "ouch";
        setImmediate(function() {
            console.log(this.yelp);
        });
    }
};
foot.kick() // undefined

The above code will output undefined because the this inside kick refers to the foot object while the one inside the callback function passed to setImmediate refers to the global object(the window) which does not have a 'yelp' property and is therefore undefined. To make the code correctly log out our result, we use arrow function which causes the this in the callback to refer to the foot object.

Arrow Function
var foot = {
    kick: function() {
        this.yelp = "ouch";
        setImmediate(() => {
            console.log(this.yelp);
        });
    }
};
foot.kick(); // ouch

Conclusion

It is important to note that the this keyword behaves differently in arrow functions compared to regular functions. Understanding this difference is crucial for writing efficient and executable code.

Additional Resources

• w3schools

• freecodecamp

• MDN

• tutorjoes