JavaScript Methods and this Keyword

JavaScript Methods and this Keyword

In this tutorial, you will learn about JavaScript object methods and this keyword with the help of examples.

In JavaScript, objects can also contain functions. For example,

// object containing method
let person = {
    name: 'John',
    greet: function() { console.log('hello'); }
};

In the above example, a person object has a key(name and greet) and string value and a function value.

Hence basically, the JavaScript method is an object property that has a function value.


Accessing Object Methods

You can access an object method using a dot notation. The syntax is:

objectName.methodKey()

You can access a method by calling an objectName and a key for that method along with (). And you can access property only by calling an objectName and a key. For example,

// accessing method and property
let person = {
    name: 'John',
    greet: function() { console.log('hello'); }
};

// accessing property
person.name; // John

// accessing method
person.greet(); // hello

Here, the greet method is accessed as person.greet() instead of person.greet.

If you try to access the method with only person.greet, it will give you a function definition.

person.greet; // ƒ () { console.log('hello'); }

JavaScript Built-In Methods

In JavaScript, there are many built-in methods. For example,

let number = '23.32';
let result = parseInt(number);

console.log(result); // 23

Here, the parseInt() method of Number object is used to convert numeric string value to an integer value.

To learn more about built-in methods, visit JavaScript Built-In Methods.


Adding a Method to a JavaScript Object

You can also add a method in an object. For example,

// creating an object
let student = { };

// adding a property
student.name = 'John';

// adding a method
student.greet = function() {
    console.log('hello');
}

// accessing a method
student.greet(); // hello

In the above example, an empty student object is created. Then, the name property is added. Similarly, the greet method is also added. In this way, you can add a method as well as property to an object.


JavaScript this Keyword

To access a property of an object from within a method of the same object, you need to use the this keyword. Let's consider an example.

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

    // accessing name property by using this.name
    greet: function() { console.log('The name is' + ' ' + this.name); }
};

person.greet();

Output

The name is John

In the above example, a person object is created. It contains properties(name and age) and a method greet.

In the method greet, while accessing a property of an object, this keyword is used.

In order to access the properties of an object, this keyword is used following with . and key.

Note: In JavaScript, this keyword when used with the object's method refers to the object. this is bound to an object.


However, the function inside of an object can access it's variable in a similar way as a normal function would. For example,

let person = {
    name: 'John',
    age: 30,
    greet: function() {
        let surname = 'Doe';
        console.log('The name is' + ' ' + this.name + ' ' + surname); }
};

person.greet();

Output

The name is John Doe