Explain "this" keyword and Scope of this in Javascript Arrow Functions

Arrow Functions as Methods

What would happen if we added, "use strict"? It will be the same result since the scope comes from the parent one.

const myObject = {
  myMethod: () => {
    console.log(this);
  }
};

myObject.myMethod();

You can also try this code with Online Javascript Compiler

Run Code

Output:

One might argue that it depends on how the method is called, same as regular functions, but that's not the case here. Remember, arrow functions don't bind their scope but inherit it from the parent one, which in this case is the window or the global object.

const myObject = {
  myArrowFunction: null,
  myMethod: function (){
    this.myArrowFunction = () => {
      console.log(this);
    };
  }
};

myObject.myMethod();

You can also try this code with Online Javascript Compiler

Run Code

Output:

When we call myObject.myMethod(), we tend to initialize myObject.myArrowFunction with an arrow function inside the method myMethod so that it will inherit its scope. We can see a perfect use case, closures.

You can practice by yourself with the help of Online Javascript Compiler for better understanding.

Explicit, Hard, and New binding

What would happen when we attempt to bind a scope with any of the below techniques?

const myFunction = () => {
  console.log(this);
};
const myObject = {};

You can also try this code with Online Javascript Compiler

Run Code

Explicity Binding

myFunction.call(myObj, args1, args2, ...) // this => window or global object
myFunction.apply(myObj, [array of args]) // this => window or global object

You can also try this code with Online Javascript Compiler

Run Code

Hard Binding

const myFunctionBound = myFunction.bind(myObject);
myFunctionBound(); // this => window or global object

You can also try this code with Online Javascript Compiler

Run Code

New Binding

new myFunction(); // Uncaught TypeError: myFunction is not a constructor

You can also try this code with Online Javascript Compiler

Run Code

It does not matter how we attempt to bind the scope; it will never work. Also, arrows functions are no constructors, so you can not use new with them.

API Calls

The Arrow functions are a good choice for API calls (asynchronous code ), only if we use CLOSURES.

myObj = {
  myMethod: function () {
    helperObject.doSomethingAsync('CodingNinjas', () => {
      console.log(this); // this => myObj
    });
  },
};

You can also try this code with Online Javascript Compiler

Run Code

It is the perfect example; we ask to do something async, wait for the answer to do some actions, and don't have to worry about the scope we were working with. Though what would happen if, for any reason, we refactor the code and extract that function out to be reused, for example:

const reusabledCallback = () => {
  console.log(this);  // this => window or global object
};
myObj = {
  myMethod: function () {
    helperObject.doSomethingAsync('CodingNinjas', reusabledCallback);
  },
};

You can also try this code with Online Javascript Compiler

Run Code

If we do so, we would be violating the current working code, and remember that it doesn't matter how we bind the scope; it won't work. So if you plan to do so, you have to use normal functions and bind the scope manually like

const reusabledCallback = function () {
  console.log(this);  // this => myMethod
};
myObj = {
  myMethod: function () {
    helperObject.doSomethingAsync('CodingNinjas', reusabledCallback.bind(myObject));
  },
};

You can also try this code with Online Javascript Compiler

Run Code

Output:

Check out this problem - Redundant Braces

Frequently Asked Questions

1. What is “this” keyword in JavaScript?
   The "this" keyword points towards the current object in the method or constructor. The most standard use of the "this" keyword eliminates the confusion between class attributes and parameters with the same name  (since a class attribute is shadowed by a method or constructor parameter).
    
2. What is an arrow function?
   The arrow function, which employs a fat arrow (=>), was introduced in ES6 as a new way of defining JavaScript functions. Using the arrow function, curly braces, parenthesis, function, and return keywords become optional.
    
3. Why are arrow functions used?
   Arrow functions plan to fix the problem where we require to access a property of this inside a callback. There are considerable ways to do that: One could assign this to a variable, use bind, or use the third argument available on the Array aggregate methods.
    
4. What is the advantage of the arrow function in JavaScript?
   This arrow function lowers lots of code and makes the code more readable. The syntax of the arrow function automatically binds "this" keyword to the surrounding code's context. Writing the arrow function (=>) is more flexible as compared with the writing function keyword. 
    
5. Do arrow functions have a "this" keyword?
   Arrow functions treat “this” keyword differently. They don't define their context since it doesn't have their own "this" context. They inherit that from the parent scope whenever you call the "this" keyword.

Conclusion

This article gives information about the "this" keyword and its scope in javascript arrow functions. Arrow functions are a powerful feature of ES6, but we must use them with care and caution. We continuously find places where arrow functions are not usable, which can cause difficulty tracking errors, especially if you don't understand how they work.

Click here to read about Explain Memoization in Javascript, Debounce and Throttle & Implement Linear Search and Binary Search in an Array.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Happy Learning!