Skip to main content

JavaScript Object Methods

Objects the Basics: Object Methods - "This"


What is a function that is a property of an object called?

View Answer:
Interview Response: A function that is a property of an object is called its method.

Code Example:

let user = {
name: 'John',
age: 30,
};

// Here sayHi is a method of the object user
user.sayHi = function () {
alert('Hello, JavaScript');
};

user.sayHi(); // Hello, JavaScript

What is the programming paradigm that uses objects to represent entities?

View Answer:
Interview Response: Object-oriented Programming, or OOP, is the programming paradigm that uses objects to represent entities.

What does the "this" keyword refer to in JavaScript?

View Answer:
Interview Response: The "this" keyword in JavaScript refers to the object to which it belongs, and it has varying values depending on where it is used.

  1. In a method, this refers to the owner object.
  2. Alone, this refers to the global object.
  3. In a function, this refers to the global object.
  4. In strict mode, this is undefined.
  5. In an event, this refers to the element that received the event.
  6. Methods like call() and apply() can refer "this" to any object.
  7. Arrow functions have no this.

What is one of the advantages of using the "this" keyword in an object?

View Answer:
Interview Response: The "this" keyword holds a reference to the object and, in return, removes any effort to nullify it later in the code.

Code Example: “THIS” refers to the object

let user = {
name: 'John',
age: 30,

sayHi() {
alert(this.name); // this works as intended
},
};

let admin = user;
user = null; // attempt to override the object fails

admin.sayHi(); // alerts John

Code Example: Fails without the “THIS” keyword

let user = {
name: 'John',
age: 30,

sayHi() {
alert(user.name); // leads to an error
},
};

let admin = user;
user = null; // overwrite to make things obvious

admin.sayHi(); // TypeError: Cannot read property 'name' of null

What is the difference between "THIS" in a function in (strict mode) and (non-strict mode)?

View Answer:
Interview Response: In strict mode, "this" returns undefined, and in the non-strict mode, it returns the global window.

Code Example: Strict Mode

'use strict';

function sayHi() {
alert(this);
}

sayHi(); // returns undefined

Code Example: Non-strict Mode

function sayHi() {
alert(this);
}

sayHi(); // returns global window object

What are the consequences of unbound "THIS"?

View Answer:
Interview Response: In JavaScript, the “this” keyword is free. Its value is evaluated at run-time and does not depend on where the method was defined. But instead, the object that precedes the dot. The concept of run-time evaluated "this" has both pluses and minuses. On the one hand, a function can get reused for different objects, and on the other hand, greater flexibility creates more possibilities for mistakes.

Code Example: Unbound "this"

// non-strict mode
const author = {
name: 'JavaScript',
hello() {
console.log(this.name);
},
};

const hello = author.hello();
// hello is unbound, this refers to nothing in the global scope
// or window/global in non-strict mode
hello();

Since arrow functions have no "This". What is the outcome when the "THIS" keyword gets used in an arrow function?

View Answer:
Interview Response: The outcome in an arrow function is a return of undefined. This outcome is because there is no access to the global window.

Code Example: Regular Function

const brunch = {
food: 'Dim sum',
beverage: 'Jasmine tea',
order: function () {
return `I'll have the ${this.food} with ${this.beverage} please.`;
},
};

// the console log returns "I'll have the Dim sum with Jasmine tea please."
console.log(brunch.order());

Code Example: Arrow Function

const brunch = {
food: 'Dim sum',
beverage: 'Jasmine tea',
order: () => {
return `I'll have the ${this.food} with ${this.beverage} please.`;
},
};

// the console log returns "I'll have the undefined with undefined please."
console.log(brunch.order());

Code Example: Proof that “THIS” refers to the global window object.

window.food = 'pizza'; // global object variables
window.beverage = 'beer';

const brunch = {
food: 'Dim sum',
beverage: 'Jasmine tea',
order: () => {
return `I'll have the ${this.food} with ${this.beverage} please.`;
},
};

// the console log returns "I'll have the pizza with beer please."
console.log(brunch.order());