Introduction to JavaScript Object Methods
Today, we would discuss ‘JavaScript Object Methods’. So let us first divide the Article name into 3 parts, i.e. JavaScript, Object, and Method. Getting clarity on each word separately would give a clear idea of the topic we need to discuss. So JavaScript is a programming or a scripting language that allows to implement complex requirements on web pages and is designed as simple object-based where Object is a collection of properties in key-value pair; Methods are actions that can be performed on Objects. Hence JavaScript Object Methods are methods in JavaScript that can be accessed using functions. Here functions in JavaScript are stored as values. Objects here can be called without using () brackets.
Syntax
Below is the syntax mentioned:
objectName.methodName()In the method, the ‘this’ keyword is used to refer to the owner object.
- objectName: This refers to the name of the object created to call its methods.
- methodName: This refers to the name of the method name created for that particular object which can be called using objectName.
A function can be divided into different properties, which can then be combined and returned.
Let us consider an example of an object with some properties as below:
The employee is a function which consists of properties like
- employeeName
- employeeID
- employeeCubicle
- employeeDivision
this function will return methods/ functions as object properties
Before we jump into some of the illustrations for JavaScript Object Methods, let us take a look at the ‘this’ keyword which plays a major role here.
‘this’ keyword is widely used in JavaScript but still a confusing keyword in JavaScript. ‘this’ keyword will point to a specific object. It is determined by how a function is called. Let us consider the above Employee example and see how the object properties are accessed using the ‘this’ keyword.
Examples of JavaScript Object Methods
Different examples are mentioned below:
Example #1
Illustration of ‘this’ keyword
Code:
<!DOCTYPE html>
<html>
<body>
<h2><i>this</i> Keyword</h2>
<p>Here <b>this</b> is representing <b>employee</b> object.</p>
<p>As the employee object "owns" the employer method.</p>
<p id="demo"></p>
<script>
var employee = {
employeeName: "Karthick",
employeeId : "101",
employeeCubicle : "B108",
employeeDivision : "BCMS",
employer : function() {
return this.employeeName + " of ID " + this.employeeId + " sits in " + this.employeeCubicle;
}
};
document.getElementById("demo").innerHTML = employee.employer();
</script>
</body>
</html>Output:
In the above example, ‘this’ is an employee object that has an employer’s function (). In other words, this.employeeName means employeeName property of this object.
Example #2
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Sample Example for illustrating function definition as property value</h2>
<p>JavaScript Object Method</p>
<p>patientDetails is a function definition, it is stored as one of the property value in patient object</p>
<p id="demo"></p>
<script>
var patient = {
patientName: "Cyrus",
patientId : "HSP104",
patientSection : "ICU",
patientDetails : function() {
return this.patientName
+ " of ID " + this.patientId + " is in " + this.patientSection;
}
};
document.getElementById("demo").innerHTML = patient.patientDetails();
</script>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>JavaScript Object Method</h2>
<p>
childDetails is a function definition stored as a property value.
</p>
<p>
Storing property values and retrieving without using brackets ()
</p>
<p id="demo"></p>
<script>
var children = {
childName: "Rohit",
childAge : "6 months",
childWeight : "1.5KG",
childDetails : function() {
return this.childName + " of " + this.childAge
+ " weighs only " + this.childWeight + " ";
}
};
document.getElementById("demo").innerHTML
= children.childDetails;
</script>
</body>
</html>Output:
Example #4
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>JavaScript Object Method</h3>
<p>
patientDetail is a function definition, stored as a property value, accessing with additional details
</p>
<p id="demo"></p>
<script>
var patient = {
patientName: "Cyrus",
patientId : "HSP104",
patientSection : "ICU",
patientDetails : function() {
return this.patientName
+ " of ID " + this.patientId + " is in " + this.patientSection;
}
};
document.getElementById("demo").innerHTML
= "PATIENT " + patient.patientDetails();
</script>
</body>
</html>Output:
We have some other Object Methods, so let us dive into,
- create(): It has additional functionality to choose a new object prototype.
let Obj = Object.create(obj);- keys(): Creates an array with keys of an object.
Example #5
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>JavaScript Object.keys() Method</h3>
<script>
const employer = {
boss: 'ABC',
PA: 'XYZ',
salesMan: 'DEF',
consultant: 'GHI'
};
const keys = Object.keys(employer);
document.write(keys);
</script>
</body>
</html>Output:
- values(): Creates an array containing values of an object
Example #6
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>JavaScript Object.values() Method</h3>
<script>
const employer = {
boss: 'ABC',
PA: 'XYZ',
salesMan: 'DEF',
consultant: 'GHI'
};
const values = Object.values(employer);
document.write(values);
</script>
</body>
</html>Output:
- entries(): Gives a nested array of key:value pairs.
Example #7
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>JavaScript Object.values() Method</h3>
<script>
const employer = {
boss: 'ABC',
PA: 'XYZ',
salesMan: 'DEF',
consultant: 'GHI'
};
const entries = Object.entries(employer);
entries.forEach(entry => {
let key = entry[0];
let value = entry[1];
document.write(`${key}: ${value}` + ", ");
});
</script>
</body>
</html>Output:
- freeze(): This method prevents modification to values and properties of an object and prevents being added or removed from an object
- seal(): This method prevents new properties from being added to the object but would modify existing properties.
Conclusion
With this, we can conclude the article ‘JavaScript Object Method’. Illustrated some of the examples and have gone through JavaScript Object methods like .freeze(), .seal(), .keys(), .values(), .entries(), .create(). Looked into the importance of the ‘this’ keyword which is one of the major factors in JavaScript to retrieve properties of an object. JavaScript Objects have useful methods to modify, iterate through itself and protect; we have given a clear example here of iterating through key/ value pairs of objects.