Object Methods in JavaScript
Introduction
JavaScript is based on a fundamental object-oriented paradigm. Objects in JavaScript, like items in many other programming languages, can be compared to real-world objects.
An object in JavaScript is a self-contained entity with attributes and a type. Consider a car as an example. A car is a physical object with qualities. A car has a colour, a pattern, a weight, a material made of, and so on. JavaScript objects, too, can have properties that determine their traits.
JavaScript being a flexible programming language offers a variety of methods to manipulate objects. In this article, we’ll be looking at various object methods in JavaScript.
Object Methods in Javascript
A method is a type of function that is associated with the object or a method is a function that is a property of an object. Methods are defined similarly to regular functions, with the exception that they must be assigned as a property of an object.
In JavaScript, Object Methods are accessed by using functions.
Let us see an example to understand Object Methods:
| <script> const person = { firstName: "Coding", lastName: "Ninjas", fullName : function() { return person.firstName + " " + person.lastName; } }; // Display data from object: document.getElementById("demo").innerHTML = person.fullName(); </script> |
Output:
| Coding Ninjas |
In the above code, we have properties and their values that are given below in the table:
| Properties | Value |
| firstName | Coding |
| lastName | Ninjas |
| fullName | function() {return this.firstName + " " + this.lastName;} |
The Keyword this
The keyword this signifies the "owner" of a function in a function definition. The keyword ‘this’ is the object that "owns" any property.
Let us understand it with an example:
| <script> const person = { firstName: "Coding", lastName: "Ninjas", fullName : function() { return this.firstName + " " + this.lastName; } }; // Display data from object: document.getElementById("demo").innerHTML = person.fullName(); </script> |
In the above code, we can get the value of firstName using this keyword rather than writing the person(owner) for it.
Accessing Object Methods
We can see in our code that the fullName() is a method of the person object and fullName, which is a property of the person object. The fullName (property) will be executed when it is invoked with ().
Syntax for accessing methods:
| objectName.methodName() |
| <script> // Create an object: const person = { firstName: "Coding", lastName: "Ninjas", fullName : function() { return this.firstName + " " + this.lastName; } }; // Display data from object: document.getElementById("demo").innerHTML = person.fullName(); </script> |
Output:
| Coding Ninjas |
The function definition will be returned if we access the fullName property without using ().
Let us understand it with an example:
<script> </script> |
Output:
| function() { return this.firstName + " " + this.lastName; } |
Here, the function definition is returned as output as we have not used the () after person.fullName.
Adding Method to an Object
It's simple to add a new method to an object.
Let us understand it with an example:
| <script> const person = { firstName: "Coding", lastName: "Ninjas", }; person.name = function() { return this.firstName + " " + this.lastName; }; document.getElementById("demo").innerHTML = "Welcome to " + person.name(); </script> |
Output:
| Welcome to Coding Ninjas |
Here, we obtain the output after adding the method to the object.
Using Inbuilt Methods
There are various inbuilt methods that make working with JavaScript convenient. In the example given below we use the toUpperCase() method of the String object to convert a text to uppercase:
| <script> const person = { firstName: "Coding", lastName: "Ninjas", }; person.name = function() { return (this.firstName + " " + this.lastName).toUpperCase(); }; document.getElementById("demo").innerHTML = "Welcome to " + person.name(); //adding details. </script> |
Output:
| Welcome to CODING NINJAS |
Some of the frequently used inbuilt methods are described in the table below:
| Methods | Description |
| Object.assign() | It copies enumerable and own properties from one object to another. |
| Object.create() | It is used to make a new object with specified properties and a prototype object. |
| Object.entries() | It will return an array containing the value and key pairs. |
| Object.freeze() | It avoids the removal of the existing properties. |
Object.defineProperty() | It's used to specify the property's behavioral attributes. |
Frequently Asked Questions
Q1) What is the object method in JavaScript?
Answer: Actions that can be performed on objects are referred to as methods. Primitive values, other objects, and functions can all be used as object properties. An object method is a function definition contained in an object property. JavaScript objects hold named values in the form of properties and methods.
Q2) What do you mean by the object?
Answer: An object in JavaScript is a separate entity with properties and a type. Consider the example of a cup. A cup is a property-rich object. A cup has a color, a design, a weight, and a material made of it, among other things. JavaScript objects, likewise, can have properties that define their characteristics.
Q3) What is this keyword in JavaScript?
Answer: In JavaScript, this keyword refers to the "owner" of a function in a function definition. The keyword ‘this’ is the object that "owns" any property.
Q4) What is the syntax for accessing methods in JavaScript?
Answer: The syntax for accessing Object Method in JavaScript is objectName.methodName().
Key Takeaways
JavaScript being a flexible programming language offers a variety of methods to manipulate objects. In this article, we explained various object methods in JavaScript.
If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here.
Thank you for reading!
Comments
No comments yet
Be the first to share what you think