This site is mobile accessible. Press the "Tap Here" button to use a different font-size.

Smartphone icons created by Freepik - Flaticon

10.3 Object Methods

Example 1: JS Object Methods - this Keyword

const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

What is this?

In JavaScript, the this keyword refers to an object.
Which object depends on how this is being invoked (used or called).
The this keyword refers to different objects depending on how it is used:

In an object method, this refers to the object.

Alone, this refers to the global object.

In a function, this refers to the global object.

In a function, in strict mode, this is undefined.

In an event, this refers to the element that received the event.

Methods like call(), apply(), and bind() can refer this to any object.

Note
this is not a variable. It is a keyword. You cannot change the value of this.

JavaScript Methods

JavaScript methods are actions that can be performed on objects.
A JavaScript method is a property containing a function definition.

Property	Value
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

Methods are functions stored as object properties.

Accessing Object Methods

You access an object method with the following syntax:

objectName.methodName()

You will typically describe fullName() as a method of the person object, and fullName as a property.
The fullName property will execute (as a function) when it is invoked with ().
This example accesses the fullName() method of a person object:

Example 2: JS Objects - Creating and using an object method part 1

name = person.fullName();

If you access the fullName property, without (), it will return the function definition:

Example 3: JS Objects - Creating and using an object method part 2

name = person.fullName;

Adding a Method to an Object

Adding a new method to an object is easy:

Example 4: JS Objects - Adding a Method to an Object

person.name = function () {
  return this.firstName + " " + this.lastName;
};

Using Built-In Methods

This example uses the toUpperCase() method of the String object, to convert a text to uppercase:

let message = "Hello world!";
let x = message.toUpperCase();

The value of x, after execution of the code above will be:

HELLO WORLD!

Example 5: JS Objects - Using Built-In Methods

person.name = function () {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

JavaScript Fundamentals course home
Module 10. JS Objects

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon

Example files created in this module:
JS Variables - Objects are Variables part 1 JS Variables - Objects are Variables part 2 JS Objects - Using an Object Literal part 1 JS Objects - Using an Object Literal part 2 JS Objects - Using an Object Literal part 3 JS Objects - Using the Keyword new JS Objects are Mutable JS Object Properties - Access a property with .property JS Object Properties - Access a property with ["property"] JS Object Properties - Looping object property values JS Object Properties - Add a new property to an existing object JS Object Properties - Deleting object properties part 1 JS Object Properties - Deleting object properties part 2 JS Objects - Access nested objects part 1 JS Objects - Access nested objects part2 JS Objects - Access nested objects part 3 JS Objects - Access nested objects part 4 JS Arrays - Nested JS Objects and Arrays JS Object Methods - this Keyword JS Objects - Creating and using an object method part 1 JS Objects - Creating and using an object method part 2 JS Objects - Adding a Method to an Object JS Objects - Using Built-In Methods JS Objects - Displaying a JavaScript object JS Objects - Display object properties JS Objects - Displaying the Object in a Loop JS Objects - Using Object.values() JS Objects - Using JSON.stringify() JS Objects - Stringify Dates JS Objects - Stringify Functions part 1 JS Objects - Stringify Functions part 2 JS Arrays - Stringify Arrays JS Getters and Setters - The get Keyword JS Getters and Setters - The set Keyword JS Object Methods part 1 JS Object Methods part 2 JS Getters and Setters - Data Quality part 1 JS Getters and Setters - Data Quality part 2 JS Getters and Setters - Object.defineProperty() JS Object Constructors JS Object Constructors - Add a Property to an Object JS Object Constructors - Adding a Method to an Object JS Object Constructors - Adding a Property to a Constructor part 1 JS Object Constructors - Adding a Property to a Constructor part 2 JS Object Constructors - Adding a Property to a Constructor part 3 JS Object Constructors - Adding a Method to a Constructor Did You Know? JS Objects - Using an object constructor JS Objects - Using the prototype Property part 1 JS Objects - Using the prototype Property part 2 JS Iterables - Iterate over a String JS Iterables - Iterating Over an Array JS Iterables - Home Made Iterable part 1 JS Iterables - Home Made Iterable part 2 JS Sets - The new Set() Method part 1 JS Sets - The new Set() Method part 2 JS Sets - The new Set() Method part 3 JS Sets - The add() Method part 1 JS Sets - The add() Method part 2 JS Sets - The forEach() Method JS Sets - The values() Method part 1 JS Sets - The values() Method part 2 JS Sets - The keys() Method JS Sets - The entries() Method JS Map Objects - new Map() JS Map Objects - Map.set() part 1 JS Map Objects - Map.set() part 2 JS Map Objects - Map.get() JS Map Objects - Map.size JS Map Objects - Map.delete() JS Map Objects - Map.clear() JS Maps using Map.has() JS Map Objects - Map typeof JS Map Objects - Map instanceof JS Map Objects - Using Map.forEach() JS Map Objects - Using Map.entries() JS Map Objects - Using Map.keys() JS Map Objects - Using Map.values() part 1 JS Map Objects - Using Map.values() part 2 JS Map Objects - Objects as Keys part 1 JS Map Objects - Objects as Keys part 2 JS Object - Changing a Property Value JS Objects - Listing All Properties JS Objects - Listing Enumerable Properties JS Objects - Adding a Property JS Objects - Adding Getters and Setters JS Objects - A Counter Example