How To Call A Function Inside An Object In JavaScript

Hello guys! Today we will share a guide on how to call a function inside an object in JavaScript. This is the most basic skill when working with functions, so please look at the two solutions: using function invocation and using call() method.

Call a function inside an object in JavaScript

We are going to provide you with two different approaches. Each way is relatively easy, so you can use whichever method you want.

Using function invocation

Syntax:

objectName.functionName

Parameters:

• objectName: the name of the object that has the function.
• functionName: the name of the function you want to call.

The function invocation is widely used when programmers want to call a function inside an object that has already defined it, for example:

let object = {
foo1(){
	return "LearnShareIT"
  },
  foo2(){
	return "LearnShareIt"
  },
}
 
// Call a function inside an object
console.log(object.foo1())
console.log(object.foo1)

Output:

LearnShareIT
ƒ foo1(){
	return "LearnShareIT"
  }

The example above indicates that we have declared two functions namely foo1 and foo2 inside an object, we then call function foo1 by using the function invocation as introduced. The functions that you have called are the defined one instead of built-in functions. Each type in JavaScript (e.g. object type, string type, numbers…) may have some pre-defined functions (also known as built-in functions), for instance:

console.log(object)

Output:

The result above shows that the object declared contains 2 user defined functions and many built-in functions such as toString() or valueOf(). So you can call a function inside an object in JavaScript even if you have not declared them (e.g. call object.toString()), as long as they are already declared by JavaScript. 

Using call() method

Syntax:

objectName1.functionName.call(objectName2)

Parameters:

• objectName1: The name of the object that defined the function you want to call.
• objectName2: The name of the object in which you want to apply the function to.
• functionName: The name of the function you want to call.

With this method, you can write a function that can be used among various objects.

let object = {
toString(){
	return "LearnShareIT"
  },
}
let myObject = {
	"learnshareit":4
}
// Call a function toString inside an object
console.log(myObject)
console.log(object.toString.call(myObject))

Output:

{learnshareit: 4}
LearnShareIT

Why does the code above not use the function invocation (toString) directly on the myObject. Because this object does not contain the function prototype, it only has one attribute which is of type number instead of function. As we want to call the function toString() defined inside an object on this myObject, we have to use the call() method as explained. Here is an another example of using call() method:

let object = {
    "learnshareit":2022,
toString(){
	return this.learnshareit
  },
}
let myObject = {
	"learnshareit":4
}
// Call a function toString inside an object
console.log(object.toString())
console.log(myObject.toString())
console.log(object.toString.call(myObject))

Output:

2022
[object Object]
4

By default, the toString() method exists in every object even if you don’t declare them. However, if you try to define one with the same name but different behavior, it will be overridden and the built-in one will disappear. Therefore, if you don’t intend to want this to happen, you shouldn’t use the same name as these built-in ones when declaring a function inside an object.

Summary

We have learned how to call a function inside an object in JavaScript. It would be easy for you to use the function invocation in most cases. We also have lots of tutorials about objects in JavaScript here.

Maybe you are interested:

• How to Update a const Object in JavaScript
• How to Rename an Object’s Key in JavaScript
• How to get an Object’s Class in JavaScript

Edward Anderson

I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.

---

Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R