JavaScript Methods and this Keyword

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

This keyword in JavaScript has frequently been a wellspring of much disarray for beginners to the language. A portion of this disarray comes from the way that this in JavaScript is dealt with distinctively when contrasted within different languages like in Java or self in Python.

Understanding this is totally basic to see further advanced concepts in JavaScript or to read and write JavaScript code.

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

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

In the above example, a person object has two keys (name and greet), which have a string value and a function value, respectively.

Thus essentially, 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 get to the property by calling an objectName and a key. You can get to a method by calling an objectName and a key for that method with (). For instance,

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

// accessing property
person.name; // Salman

// 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.

---

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 = 'Salman';

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

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

In the above example, an empty student object is made. At that point, the name property is added. Additionally, the greet method is likewise added. Thusly, you can add a method just as property to an object.

---

JavaScript this Keyword

To get to a property of an object from inside a method of a similar object, you need to use this watchword. We should think about an example.

const person = {
    name: 'Salman',
    age: 30,

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

person.greet();

Output

The name is Salman

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

In the strategy greet, while getting to the property of an object, this catchphrase is used.

To get to the properties of an object, this watchword is used following by. and, key.

Note: In JavaScript, this catchphrase when used with the object’s technique alludes to the object. this is bound to an object.

---

In any case, the function within an object can get to it’s variable along these lines as a typical function would. For instance,

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

person.greet();

Output

The name is Salman Khan

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JS Objects