this with arrow functions in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does this refer to inside a regular function?

In a regular function, this refers to the object that called the function. If called alone, it can be undefined in strict mode or the global object otherwise.

beginner

How does this behave inside an arrow function?

Inside an arrow function, this does NOT have its own value. It uses this from the surrounding (parent) scope where the arrow function was created.

intermediate

Why might arrow functions be useful when working with this?

Arrow functions keep the this from the outer scope, so you don’t have to use tricks like var self = this or bind(). This makes code simpler and easier to understand.

intermediate

Can arrow functions be used as methods in objects? What happens to this?

Arrow functions should NOT be used as methods because this will not refer to the object but to the outer scope. This usually causes unexpected behavior.

beginner

Example: What will this code print?<br><pre>const obj = {<br>  value: 42,<br>  regularFunc: function() {<br>    console.log(this.value);<br>  },<br>  arrowFunc: () => {<br>    console.log(this.value);<br>  }<br>};<br>obj.regularFunc();<br>obj.arrowFunc();</pre>

The regularFunc prints 42 because this refers to obj. The arrowFunc prints undefined because this refers to the outer scope (likely the global object or undefined in strict mode) which has no value.

What does this inside an arrow function refer to?

A Undefined always

B The global object always

C The object that called the function

D The <code>this</code> of the surrounding scope

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

Which is true about arrow functions as object methods?

A They correctly bind <code>this</code> to the object

B They do not have their own <code>this</code> and use outer <code>this</code>

C They always refer to the global object

D They throw an error when called

Arrow functions do not bind this to the object, so this is from the outer scope.

Why might you choose an arrow function inside a callback to keep this?

A Because arrow functions always refer to the global object

B Because arrow functions create a new <code>this</code>

C Because arrow functions inherit <code>this</code> from the parent scope

D Because arrow functions do not allow <code>this</code>

Arrow functions inherit this from the surrounding scope, which helps keep the correct context in callbacks.

What will this code print?

const obj = {
  count: 10,
  increment: function() {
    setTimeout(() => {
      console.log(this.count);
    }, 100);
  }
};
obj.increment();

A 10

B Error

C undefined

D 0

The arrow function inside setTimeout uses this from increment, which is obj. So it prints 10.

Which of these is NOT true about arrow functions?

A They always bind <code>this</code> to the global object

B They cannot be used as constructors

C They do not have their own <code>this</code>

D They inherit <code>this</code> from the parent scope

Arrow functions do not bind this to the global object; they inherit it from the parent scope.

Explain how this behaves differently in arrow functions compared to regular functions.

Think about where the function is created versus where it is called.

Describe a situation where using an arrow function helps avoid common mistakes with this.

Consider asynchronous code like setTimeout or event handlers.

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