this with arrow functions in Javascript

Introduction

Arrow functions keep the meaning of this from where they are created. This helps avoid confusion about what this points to.

When you want to use <code>this</code> inside a function and keep it the same as the outside object.

When writing event handlers inside objects and you want <code>this</code> to refer to the object, not the event target.

When using callbacks inside methods and you want to keep the original <code>this</code> without extra code.

When you want simpler code without needing to use <code>bind</code> or save <code>this</code> in a variable.

Syntax

Javascript

const functionName = (parameters) => {
  // code using this
};

Arrow functions do not have their own this. They use this from where they are created.

Regular functions get their own this depending on how they are called.

Examples

This prints undefined because arrow functions do not get this from the object, but from the outside (usually the global object or undefined in strict mode).

Javascript

const obj = {
  name: 'Alice',
  greet: () => {
    console.log(this.name);
  }
};
obj.greet();

This prints Alice because the arrow function inner uses this from greet, which is the object.

Javascript

const obj = {
  name: 'Alice',
  greet() {
    const inner = () => {
      console.log(this.name);
    };
    inner();
  }
};
obj.greet();

The arrow function inside setInterval uses this from Person, so this.age updates correctly.

Javascript

function Person() {
  this.age = 0;
  setInterval(() => {
    this.age++;
    console.log(this.age);
  }, 1000);
}
const p = new Person();

Sample Program

This program prints each hobby with the person's name. The arrow function inside forEach uses this from printHobbies, so it correctly accesses person.name.

Javascript

const person = {
  name: 'Bob',
  hobbies: ['reading', 'swimming'],
  printHobbies() {
    this.hobbies.forEach(hobby => {
      console.log(`${this.name} likes ${hobby}`);
    });
  }
};
person.printHobbies();

Important Notes

Do not use arrow functions for object methods if you want this to refer to the object itself.

Arrow functions are great for callbacks where you want to keep the outer this.

Summary

Arrow functions do not have their own this; they use this from where they are created.

This helps avoid confusion and extra code when using this inside callbacks.

Use arrow functions for inner functions or callbacks, but not for object methods if you want this to be the object.

Practice

1.

What is true about this in arrow functions compared to regular functions?

easy

A. this in arrow functions is inherited from the surrounding code where they are created.

B. this in arrow functions always refers to the global object.

C. this in arrow functions is undefined.

D. this in arrow functions refers to the function itself.

Solution

1. Step 1: Understand how this works in arrow functions

   Arrow functions do not have their own this. Instead, they use the this value from the surrounding (lexical) context where they are created.

2. Step 2: Compare with other options

   Options B, C, and D are incorrect because arrow functions do not bind this to the global object, undefined, or themselves.

3. Final Answer:

   this in arrow functions is inherited from the surrounding code where they are created. -> Option A

4. Quick Check:

   this in arrow functions = lexical this [OK]

Hint: Arrow functions use surrounding this, not their own [OK]

Common Mistakes:

• Thinking arrow functions have their own this
• Confusing arrow functions with regular functions
• Assuming this is always global in arrow functions

2.

Which of the following is the correct syntax to define an arrow function that logs this.name?

const obj = { name: 'Alice', logName: ??? }

easy

A. logName: function log() { console.log(this.name) }

B. logName: function() { console.log(this.name) }

C. logName: () { console.log(this.name) }

D. logName: () => console.log(this.name)

Solution

1. Step 1: Identify arrow function syntax

   Arrow functions use the syntax () => expression or () => { statements }. logName: () => console.log(this.name) uses the correct concise syntax.

2. Step 2: Check other options

   Options B and D use regular function() syntax, not arrow functions. logName: () { console.log(this.name) } () { console.log(this.name) } is missing the fat arrow =>, resulting in a syntax error. Note: even with correct arrow syntax as an object method, this would refer to the lexical scope (global), not the object.

3. Final Answer:

   logName: () => console.log(this.name) -> Option D

4. Quick Check:

   Arrow function syntax = logName: () => console.log(this.name) [OK]

Hint: Arrow function syntax: () => expression or () => { } [OK]

Common Mistakes:

• Forgetting the fat arrow '=>'
• Using function keyword instead of arrow syntax
• Confusing arrow function with method shorthand

3.

What will be the output of this code?

const person = {
  name: 'Bob',
  greet: () => {
    console.log(this.name);
  }
};
person.greet();

medium

A. undefined

B. '' (empty string)

C. Error

D. Bob

Solution

1. Step 1: Understand this in arrow functions inside objects

   The arrow function greet does not have its own this. It uses this from the surrounding scope, which is the global scope here.

2. Step 2: Check global this.name

   In most environments, this.name in global scope is undefined unless explicitly set.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Arrow function this = lexical this (global) [OK]

Hint: Arrow functions use outer this, not object [OK]

Common Mistakes:

• Expecting this to be the object
• Confusing arrow function with regular method
• Assuming global this.name is set

4.

Find the error in this code and fix it so that this.name inside greet refers to the user object:

const user = {
  name: 'Carol',
  greet: () => {
    console.log(this.name);
  }
};
user.greet();

medium

A. Use function greet() { console.log(this.name); } outside the object

B. Add bind(user) to the arrow function

C. Change greet to a regular function: greet() { console.log(this.name); }

D. Replace this.name with user.name inside arrow function

Solution

1. Step 1: Identify why this.name is incorrect

   Arrow functions do not have their own this, so inside greet, this is not the user object.

2. Step 2: Fix by using a regular function method

   Defining greet as a regular function method binds this to the user object when called as user.greet().

3. Final Answer:

   Change greet to a regular function: greet() { console.log(this.name); } -> Option C

4. Quick Check:

   Use regular function for object methods needing this [OK]

Hint: Use regular functions for object methods needing this [OK]

Common Mistakes:

• Trying to bind this to arrow functions
• Using arrow functions for object methods expecting this
• Accessing object properties via global this

5.

You want to create an object with a method that uses a callback to print the object's name property after 1 second. Which code correctly uses arrow functions to keep this referring to the object?

const obj = {
  name: 'Dave',
  printName: function() {
    setTimeout(??? , 1000);
  }
};
obj.printName();

hard

A. function() { console.log(this.name) }

B. () => console.log(this.name)

C. function() { console.log(obj.name) }

D. () => { console.log(obj.name) }

Solution

1. Step 1: Understand this inside setTimeout callback

   Inside setTimeout, a regular function's this is global or undefined, so it loses the object context.

2. Step 2: Use arrow function to inherit this from printName

   Using an arrow function as callback keeps this from printName, which is the object obj.

3. Final Answer:

   () => console.log(this.name) -> Option B

4. Quick Check:

   Arrow function callback keeps this from method [OK]

Hint: Use arrow function callbacks to keep this context [OK]

Common Mistakes:

• Using regular function losing this context
• Referencing object by name inside callback (less flexible)
• Not using arrow function for callbacks needing this