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
};

Need a 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
};

Need a 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
};

Need a 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

Need a hint?

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