JavaScript Methods and this Keyword
<!–
–>
In JavaScript, objects can also contain functions. For example,
// object containing method
const person = {
name: 'John',
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.
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 property by calling an objectName and a key. You can access a method by calling an objectName and a key for that method along with ()
. For example,
// accessing method and property
const 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.
const 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 by .
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,
const 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