this in objects in Javascript - Mini Project: Build & Apply

Understanding <code>this</code> in Objects

📖 Scenario: Imagine you are creating a simple app to manage a few cars. Each car has a brand and a model. You want to create objects for each car and use this inside the object to refer to its own brand and model.

🎯 Goal: You will create a car object with properties and a method that uses this to show the car's full name.

📋 What You'll Learn

Create an object called car with properties brand and model.

Add a method called getFullName inside the car object that returns the full name using this.brand and this.model.

Call the getFullName method and print the result.

💡 Why This Matters

🌍 Real World

Using <code>this</code> in objects helps you write code that works with data inside the same object, like managing details of cars, users, or products.

💼 Career

Understanding <code>this</code> is essential for JavaScript developers because it is used in many real-world applications, including web apps and frameworks.

1

Create the car object with properties

Create an object called car with the properties brand set to "Toyota" and model set to "Corolla".

Javascript

// Create the car object with brand and model properties
// Your code here

Hint

Use const car = { brand: "Toyota", model: "Corolla" }; to create the object.

2

Add the getFullName method using this

Add a method called getFullName inside the car object that returns a string combining this.brand and this.model separated by a space.

Javascript

const car = {
  brand: "Toyota",
  model: "Corolla",
  // Add getFullName method here
  // Your code here
};

Hint

Define getFullName() { return this.brand + " " + this.model; } inside the object.

3

Call the getFullName method

Call the getFullName method on the car object and store the result in a variable called fullName.

Javascript

const car = {
  brand: "Toyota",
  model: "Corolla",
  getFullName() {
    return this.brand + " " + this.model;
  }
};

// Call getFullName and store in fullName
// Your code here

Hint

Use const fullName = car.getFullName(); to call the method.

4

Print the full name of the car

Print the value of the variable fullName using console.log.

Javascript

const car = {
  brand: "Toyota",
  model: "Corolla",
  getFullName() {
    return this.brand + " " + this.model;
  }
};

const fullName = car.getFullName();

// Print fullName
// Your code here

Hint

Use console.log(fullName); to show the full name in the console.

Practice

1. What does this refer to inside a regular method of an object in JavaScript?

easy

A. The object itself

B. The global window object

C. Undefined

D. The method's name

Solution

1. Step 1: Understand this in object methods

   Inside a regular function defined as a method of an object, this refers to the object that owns the method.

2. Step 2: Compare with other contexts

   Unlike arrow functions or global functions, regular methods bind this to the object itself.

3. Final Answer:

   The object itself -> Option A

4. Quick Check:

   this in object method = object [OK]

Hint: Remember: regular methods use this as the object [OK]

Common Mistakes:

• Thinking this is always global
• Confusing arrow functions with regular functions
• Assuming this is the method name

2. Which of the following is the correct way to define a method that uses this inside an object?

easy

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

B. const obj = { greet: function() => console.log(this.name) };

C. const obj = { greet() { console.log(this.name); } };

D. const obj = { greet: function => console.log(this.name) };

Solution

1. Step 1: Identify correct method syntax

   const obj = { greet() { console.log(this.name); } }; uses the concise method syntax with a regular function, which correctly binds this to the object.

2. Step 2: Check other options for errors

   const obj = { greet: () => console.log(this.name) }; uses an arrow function, which does not bind this to the object. Options B and D have invalid syntax for function definitions.

3. Final Answer:

   const obj = { greet() { console.log(this.name); } }; -> Option C

4. Quick Check:

   Regular method syntax = const obj = { greet() { console.log(this.name); } }; [OK]

Hint: Use regular functions, not arrow functions, for methods [OK]

Common Mistakes:

• Using arrow functions for methods
• Incorrect function syntax inside objects
• Confusing method shorthand with arrow functions

3. What will be the output of the following code?

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

medium

A. Alice

B. undefined

C. Error

D. person

Solution

1. Step 1: Identify this inside greet method

   The method greet is a regular function inside the person object, so this refers to person.

2. Step 2: Access the name property

   Since this is person, this.name is 'Alice'. The console logs 'Alice'.

3. Final Answer:

   Alice -> Option A

4. Quick Check:

   this.name = 'Alice' [OK]

Hint: Regular method this points to the object [OK]

Common Mistakes:

• Expecting undefined because of arrow function confusion
• Thinking this is global
• Assuming method returns error

4. Find the error in this code and fix it:

const car = {
  brand: 'Toyota',
  showBrand: () => {
    console.log(this.brand);
  }
};
car.showBrand();

medium

A. No error, code works fine

B. Add .bind(car) to arrow function

C. Replace this.brand with car.brand

D. Change arrow function to regular function: showBrand() { console.log(this.brand); }

Solution

1. Step 1: Identify arrow function issue

   Arrow functions do not have their own this. Here, this.brand is undefined because this is not bound to car.

2. Step 2: Fix by using regular function

   Changing showBrand to a regular method binds this to car, so this.brand correctly accesses 'Toyota'.

3. Final Answer:

   Change arrow function to regular function: showBrand() { console.log(this.brand); } -> Option D

4. Quick Check:

   Regular function binds this correctly [OK]

Hint: Avoid arrow functions for object methods needing this [OK]

Common Mistakes:

• Using arrow functions for methods
• Trying to bind this on arrow functions
• Ignoring this context rules

5. You want to create an object with a method that returns a greeting using the object's name. Which code correctly uses this to achieve this?

const user = {
  name: 'Bob',
  greet: ???
};
console.log(user.greet());

hard

A. greet: () => `Hello, ${this.name}!`

B. greet() { return `Hello, ${this.name}!`; }

C. greet: function() => `Hello, ${this.name}!`

D. greet: function { return `Hello, ${this.name}!`; }

Solution

1. Step 1: Check method syntax and this binding

   greet() { return `Hello, ${this.name}!`; } uses a regular method syntax, so this correctly refers to the user object.

2. Step 2: Validate other options

   greet: () => `Hello, ${this.name}!` uses an arrow function, which does not bind this to the user object. Options B and C have invalid syntax for function definitions.

3. Final Answer:

   greet() { return `Hello, ${this.name}!`; } -> Option B

4. Quick Check:

   Regular method with this = greet() { return `Hello, ${this.name}!`; } [OK]

Hint: Use regular methods for this access in objects [OK]

Common Mistakes:

• Using arrow functions for methods
• Incorrect function syntax
• Expecting this to work in arrow functions