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:

PropertiesValue
firstNameCoding
lastNameNinjas
fullNamefunction() {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>
const person = {
  firstName: "Coding",
  lastName: "Ninjas",
  
  fullName: function() {
    return this.firstName + " "this.lastName;
  }
};
//without using ()
document.getElementById("demo").innerHTML = person.fullName;

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

MethodsDescription
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!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think