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?<br>

const obj = {<br>  count: 10,<br>  increment: function() {<br>    setTimeout(() => {<br>      console.log(this.count);<br>    }, 100);<br>  }<br>};<br>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.