JAVASCRIPT Methods
JAVASCRIPT
JavaScript method is a function which is attached to the object itself.
JavaScript Methods
➔ In JavaScript, an object has properties and behaviors, and these behaviors are implemented as methods.
➔ JavaScript has many built-in objects and functions associated with them, so these functions are called methods.
Built-in objects and methods
➔ Array methods:
push(), pop(), filter(), map() etc.
➔ String methods:
toUpperCase(), toLowerCase(), indexOf() etc.
➔ Number methods:
parseInt(), toFixed(), parseFloat() etc.
➔ Date methods:
getDate(), getDay(), getTime(), getMonth(), getFullYear() etc.
Method for an object
const student = {
first_name: "David",
last_name: "Brown",
age: 21,
full_name: function() {
return this.first_name + " " + this.last_name;
}
};
JavaScript method in object
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript method example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>JavaScript method example</h3>
<p>Full Name is: <span id="demo"></span></p>
<script>
const student = {
first_name: "David",
last_name: "Brown",
age: 21,
full_name: function () {
return this.first_name + " " + this.last_name;
}
}
document.getElementById("demo").textContent = student.full_name();
</script>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
this keyword refers to the object itself
➔ When it is necessary to refer to the object itself within a method, this keyword is used to point to the object.
➔ To access object members such as properties or methods, a dot (.) operator is used.
➔ Note that parentheses are not required after the method name to define a function, but they are required when invoking the method.
this keyword
const student = {
first_name: "David",
last_name: "Brown",
age: 21,
first_name: function() {
return this.first_name;
}
last_name: function() {
return this.last_name;
}
};
JavaScript this keyword inside object
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript this keyword example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>JavaScript this keyword example</h3>
<p>Information:<span id="demo"></span></p>
<script>
const student = {
first_name: "David",
last_name: "Brown",
age: 21,
fname: function () {
return this.first_name;
},
lname: function () {
return this.last_name;
}
};
document.getElementById("demo").innerText = "\nFirst Name: " + student.fname() + "\nLast Name: " + student.lname();
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Add method to an object
➔ Methods can be added at runtime by specifying the object name followed by the dot operator in the method name and finally assigning a function to it.
Syntax: add method to object
const student = {};
objectName.methodName = function () {
/* method implementation goes here.. */
return "";
}
New method added to the object
const student = {
first_name: "David",
last_name: "Brown",
};
student.name = function () {
return this.first_name + " " + this.last_name;
}
JavaScript add method to object
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript method add to object</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>JavaScript method add to object</h3>
<p>Information:<span id="demo"></span></p>
<script>
const student = {
first_name: "David",
last_name: "Brown",
age: 21,
fname: function () {
return this.first_name;
},
lname: function () {
return this.last_name;
}
};
student.name = function () {
return this.first_name + " " + this.last_name;
}
document.getElementById("demo").innerText = "\nFull Name: " + student.name();
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Function vs Method in JavaScript
| Function | Method |
|---|---|
| Function is a block of code. | Mehtod is a block of code in object or class. |
| Function is self contained standalone code block. | Method is a class contained code block. |
| Independent and can be invoked by the function name. ex: functionName(); | Dependent on object name and preceded by object name when invoke a method. ex: object.methodName(); |
Syntax of a Function is:
function functionName(parameters) {
/*function implementation*/
} |
Syntax of a Method is:
object = {
methodName: function() {
/*function implementation*/
}
}; |