In JavaScript, users can term everything as an Object. They can represent a string object or an array object as input. They can also use an Object constructor in JavaScript to create an object and add values and properties to it.
But, with these techniques, users often need to find the length of a JavaScript object, which would also require knowing how to find the Object length. There are two techniques for getting the length one is, using "for...in" the loop, and the other is, object static methods.
But the easiest technique of getting the Object length of an object in JavaScript is to use the length property of the Object.keys() method. This article describes both methods of getting the length of a JavaScript object.
Method 1: Using Object Static Methods to get the length of an object:
In JavaScript, static methods are pre-defined methods that users can access on an object. There are three static methods of finding the length of a JavaScript object. These are Object.keys(), Object.entries() and Object.values(). These methods return either the key, key-value pairs as arrays, or values, letting users use the length property to specify the length of the JS object.
1. Object.keys() method:
Users can use this method to return the name of the JS object property as an array. Users can also use the length property to fetch the number of keys in the object.
Syntax:
objectLength = Object.keys(exampleObject).length
Code Snippet:
<html><head>
<meta charset="utf-8">
<title>Object Length in Javascript</title>
</head>
<body>
<h2>Object Length in Javascript</h2>
<p id="demo"></p>
<script>
let object1 = Object.keys("Hello Beautiful").length;
console.log(object1);
document.getElementById("demo").innerHTML = object1;
</script>
</body></html>
Explanation:
Here, in the code snippet, we have used the Object.keys() to find the length of the string input written within double-quotes. It returns the string length as 15.
Output:
Another example of the Object.keys() method is as follows:
<html>
<head>
<meta charset="utf-8">
<title>Object Length in Javascript</title>
</head>
<body>
<h2>Object Length in Javascript</h2>
<p id="demo"></p>
<script>
example1 = {
id: 1,
name: 'Henry',
age: 19
}
let example2 = Object.keys(example1).length;
console.log(example2);
document.getElementById("demo").innerHTML = example2;
</script>
</body>
</html>
Explanation:
In this code snippet, we have used a key-value as an object and found the length of the JS object. It returns the key-value length as 3.
Output:
2. Object.entries() method:
Users can use this method to return an array of the key-value pair of an Object. Users can also use the length property to fetch the number of keys in the object.
Syntax:
objectLength = Object.entries(exampleObject).length
Code Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Object Length in Javascript</title>
</head>
<body>
<h2>Object Length in Javascript</h2>
<p id="demo"></p>
<script>
let objectLength = Object.entries("Hello Beautiful").length;
console.log(objectLength);
document.getElementById("demo").innerHTML = objectLength;
</script>
</body>
</html>
Explanation:
Here, in the code snippet, we have used the Object.entries() to find the length of the string input written within double-quotes. It returns the string length as 15.
Output:
Another example of the Object.entries() method is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Object Length in Javascript</title>
</head>
<body>
<h2>Object Length in Javascript</h2>
<p id="demo"></p>
<script>
example1 = {
id: 1,
name: 'Henry',
age: 19
}
let example2 = Object.entries(example1).length;
console.log(example2);
document.getElementById("demo").innerHTML = example2;
</script>
</body>
</html>
Explanation:
In this example, we have used Object.entries() to find the length of the key-value object and return "3" as output.
Output:
3. Object.values() method:
Users can use this method that returns an array containing the JS Object values. Users can also use the length property to fetch the number of keys in the object.
Syntax:
objectLength = Object.values(exampleObject).length
Code Snippet:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Object Length in Javascript</title>
</head>
<body>
<h2>Object Length in Javascript</h2>
<p id="demo"></p>
<script>
let objectLength = Object.values("Hello Beautiful").length;
console.log(objectLength);
document.getElementById("demo").innerHTML = objectLength;
</script>
</body>
</html>
Explanation:
Here, in the code snippet, we have used the Object.values() to find the length of the string input written within double-quotes. It returns the string length as 15.
Output:
Another example of the Object.values() method is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Object Length in Javascript</title>
</head>
<body>
<h2>Object Length in Javascript</h2>
<p id="demo"></p>
<script>
example1 = {
id: 1,
name: 'Henry',
age: 19
}
let example2 = Object.values(example1).length;
console.log(example2);
document.getElementById("demo").innerHTML = example2;
</script>
</body>
</html>
Explanation:
In this example, we have used Object.values() to find the length of the key-value object and return "3" as output.
Output:
Method 2: Using for...in a loop to get the length of an object:
Users can use the "for…in" loop to iterate the properties of a JS object. Users can find the length of the JS object using this loop. All they need to do is to declare a variable and increase the counter so long as the "for...in" loop continues. Users can use this method to check whether each key is present in the JS object.
Then, the JS interpreter will loop the contents of the object through. If the input contains the key, the interpreter will increment the total count of keys. It gives the length of the JS object.
Syntax:
for (key in object)
{
// This is the body of the for...in
}
Code Snippet:
<!DOCTYPE html>
<html>
<head>
<title> JavaScript object length </title>
</head>
<body>
<p>
exampleObject = {
id: 1,
name: 'Arun',
age: 30,
department: 'sales'
}
</p>
<p>Length of the JS object is:<span class="output"></span></p>
<button onclick="getObjectLength()">Get object length</button>
<script>
function getObjectLength() {
// Here, we are declaring an object
exampleObject = {
id: 1,
name: 'Henry',
age: 19,
department: 'Architechture',
salary: 50000,
}
var key, count = 0;
// It check if every key has its own property
for (key in exampleObject) {
if (exampleObject.hasOwnProperty(key));
count++;
}
objectLenght = count;
document.querySelector('.output').textContent = objectLenght;
}
</script>
</body>
</html>
Explanation:
Here, we have used HTML and JavaScript with the "for...in" loop to iterate the objects and get the length.
Output:
After we click the button, it will show the length of the object:
Conclusion:
We hope this article has catered to all the methods of finding the length of a JS object. Both the Object Static and for...in looping methods are efficient to use and get the Object length, but many programmers prefer to use the object static method that precisely finds the Object length.