Function inside an object means you can define a function as one of its properties in JavaScript. This is known as a method, and it allows you to encapsulate functionality that is related to the object within the object itself.
By defining a function as a method of an object, you can access the properties of that object using the this keyword inside the method.
const myObject = {
myProperty: 'hello',
myMethod: function() {
console.log(this.myProperty);
}
};
myObject.myMethod(); // Output: "hello"
Function inside object JavaScript examples
A simple example code created an object called person with two properties, name and age, and a method called greet. The greet method logs a message to the console that includes the person’s name and age.
<!DOCTYPE html>
<html>
<body>
<script>
const person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
}
};
person.greet();
console.log(person)
</script>
</body>
</html>Output:
Anonymous functions inside an object
This is useful for creating a function that is only used within the context of that object and does not need to be referenced or called outside of it.
const calculator = {
add: function(num1, num2) {
return num1 + num2;
},
subtract: function(num1, num2) {
return num1 - num2;
},
multiply: function(num1, num2) {
return num1 * num2;
},
divide: function(num1, num2) {
return num1 / num2;
},
calculate: function(num1, num2, operation) {
return operation(num1, num2);
}
};
console.log(calculator.calculate(5, 2, function(num1, num2) {
return num1 % num2;
})); // Output: 1
Call functions from functions inside an object
You can call functions from functions inside an object by using this keyword. It refers to the object and accesses the function as a property of the object.
const counter = {
count: 0,
increment: function() {
this.count++;
console.log("Count is now " + this.count);
},
reset: function() {
this.count = 0;
console.log("Count has been reset to " + this.count);
this.increment();
}
};
counter.reset(); // Output: "Count has been reset to 0" followed by "Count is now 1"
How to call the function inside an object
Answer: you can use dot notation to access the function as a property of the object and then invoke it using parentheses ().
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName()); // Output: "John Doe"Function inside an Object inside a Class
This is useful for organizing related functionality together and creating reusable code.
class Calculator {
constructor() {
this.operations = {
add: function(num1, num2) {
return num1 + num2;
}
};
}
}
const calc = new Calculator();
console.log(calc.operations.add(2, 3)); // Output: 5
Comment if you have any doubts or suggestions on this JS object topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version