Home » Tutorials » Learn Javascript » JavaScript Object Methods

Learn Javascript

 Prev

JavaScript Object Methods

Objects in JavaScript can also have methods or functions as properties. Object methods in JavaScript are actions that can be performed by an object.

If you are new to Objects, learn about it on our 👉 JavaScript Objects lesson.

Defining and Calling Object Methods 😎

Object methods in JavaScript can be defined in the same way how we define normal properties i.e. in key: value pairs.

Calling an object method is exactly the same as how we call functions which is by typing the method-name along with parenthesis ( ).

Example

let dog = {
  name: "Jacky",
  age: 2,
  bark: function () {
    console.log("Woof, Woof.");
  },
};

// Displays "Jacky"
console.log(dog.name);
// Displays "2"
console.log(dog.age);
// Calling the method "bark" on object "dog".
// Displays "Woof, Woof."
dog.bark();

Output

Jacky
2
Woof, Woof.

Here, the object Jacky has three properties: name, age and bark. The properties name and age are normal properties whereas bark is an object method defined on the object Jacky.

Example (With Parameters) 👨‍💻

const robot = {
  model: "X123",
  welcome: function (name) {
    console.log(`Welcome, ${name}.`);
  },
};

// We pass-in the "name" parameter in the "welcome" method defined on the object "robot"
robot.welcome("John Conner");

Output

Welcome, John Conner.

Example (With Arrow Functions) 🏹

Arrow functions were introduced in the newer version of JavaScript called ES6, which has a cleaner syntax where you don’t even have to type the keyword function to define a function. Hence, arrow functions are a more preferred way to define a function.

const robot = {
  model: "X123",
  // In arrow functions, we don't need to mention the keyword "function" in order to define a function.
  welcome: (name) => {
    console.log(`Welcome, ${name}`);
  },
};

// We pass in the "name" parameter in the "welcome" method defined on the object "robot"
robot.welcome("John Conner");

Output

Welcome, John Conner.

JavaScript this keyword 👇

We can access the properties of an object, inside the object itself by using the this keyword.

The this keyword in JavaScript refers to the object, inside which, the keyword itself is called.

Example

const student = {
  name: "Mike",
  physics: 75,
  maths: 80,
  chemistry: 45,
  totalMarks: 100,
  results: function () {
    // To use the "student" object's properties like: "name", "physics", etc. inside of the object itself, we use the "this" keyword.
    // Here, "this.name" displays the "name" property of the "student" object.
    console.log(`Hi ${this.name}. Out of ${this.totalMarks}, you've got ${this.physics} in Physics, ${this.maths} in Maths and ${this.chemistry} in Chemistry.`);
  },
};

student.results();

Output

Hi Mike. Out of 100, you've got 75 in Physics, 80 in Maths and 45 in Chemistry.

Example (With Arrow Function) 🏹

Unfortunately, the above example will return undefined when used on arrow functions.

const student = {
  name: "Mike",
  physics: 75,
  maths: 80,
  chemistry: 45,
  totalMarks: 100,
  results: () => {
    console.log(`Hi ${this.name}. Out of ${this.totalMarks}, you've got ${this.physics} in Physics, ${this.maths} in Maths and ${this.chemistry} in Chemistry.`);
  },
};

student.results();

Output

Hi undefined. Out of undefined, you've got undefined in Physics, undefined in Maths and undefined in Chemistry.

In this way, object methods in JavaScript help us in performing actions. Here, we defined our own object methods, but JavaScript also provides us with it’s own set of built-in object methods. We will cover that in our next lesson.

Next