this with arrow functions in Javascript - Mini Project: Build & Apply

Understanding <code>this</code> with Arrow Functions

📖 Scenario: Imagine you are creating a simple object to represent a person. You want to understand how the this keyword behaves differently in regular functions and arrow functions inside that object.

🎯 Goal: You will build an object called person with a name property and two methods: one using a regular function and one using an arrow function. You will observe how this works in each method.

📋 What You'll Learn

Create an object called person with a property name set to 'Alice'.

Add a method called sayHelloRegular using a regular function that returns a greeting using this.name.

Add a method called sayHelloArrow using an arrow function that returns a greeting using this.name.

Call both methods and print their results to see the difference in this behavior.

💡 Why This Matters

🌍 Real World

Understanding <code>this</code> is crucial when writing JavaScript code for web pages, apps, or servers, especially when working with objects and event handlers.

💼 Career

Many JavaScript jobs require clear knowledge of how <code>this</code> works to avoid bugs and write clean, maintainable code.

1

Create the person object with a name property

Create an object called person with a property name set to the string 'Alice'.

Javascript

const person = {
  // Your code here
};

Hint

Use const person = { name: 'Alice' } to create the object.

2

Add a regular function method sayHelloRegular

Add a method called sayHelloRegular to the person object using a regular function syntax. This method should return the string `Hello, my name is ${this.name}` using a template literal.

Javascript

const person = {
  name: 'Alice',
  // Your code here
};

Hint

Use sayHelloRegular: function() { return `Hello, my name is ${this.name}`; }.

3

Add an arrow function method sayHelloArrow

Add a method called sayHelloArrow to the person object using an arrow function syntax. This method should return the string `Hello, my name is ${this.name}` using a template literal.

Javascript

const person = {
  name: 'Alice',
  sayHelloRegular: function() {
    return `Hello, my name is ${this.name}`;
  },
  // Your code here
};

Hint

Use sayHelloArrow: () => { return `Hello, my name is ${this.name}`; }.

4

Call both methods and print their results

Write two console.log statements to print the results of calling person.sayHelloRegular() and person.sayHelloArrow().

Javascript

const person = {
  name: 'Alice',
  sayHelloRegular: function() {
    return `Hello, my name is ${this.name}`;
  },
  sayHelloArrow: () => {
    return `Hello, my name is ${this.name}`;
  }
};

// Your code here

Hint

Use console.log(person.sayHelloRegular()) and console.log(person.sayHelloArrow()).

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