JavaScript Array Length | Get number of elements in Array

By using Javascript Array Length property can get the numbers of elements in an Array. A Lenght property returns the number of elements in that array. Length of Array can be stored in JavaScript variable.

JavaScript Array Length

Now, you might be thinking what is use of Array Length?

Javascript array length is mainly used in loops statements. Let’s assume you have data of fruits name in an array and want to show these fruits as a list to users. For that, you need to run a loop on Array, where the loop will break if all array elements (fruits) count finished.

Syntax

A Syntax of getting the length of an array.

array.length

A Syntax of Set the length of an array.

array.length = number

Return Value

Returns the length of the array.

Javascript get array length Example

Let’s see the simple example of How to JavaScript check array length.

On Clicking a button “myFunction()” function will call. In a function, the first script will create an array and assigning value to the count variable. And in last show this value in a p element.

<!DOCTYPE html>
<html>
    <body>
        
        <button onclick="myFunction()">Click and get array length</button>
        
        <p id="demo"></p>
        
        <script>
            function myFunction() {
                var fruits = ["Apple", "Orange", "Kiwi", "Mango"];
                var count = fruits.length;
                document.getElementById("demo").innerHTML = count;
            }
        </script>
        
    </body>
</html>

Output: 4

Javascript array length 0

or How do I empty an array in JavaScript?

For example this is an array:-

arr = [1,2,3,4];

How can I empty that?

Let’s see the ways to clear an existing array:

Method 1

This code will set the array variable “arr” to a new empty array. It will be perfect if you don’t have references to the original array.

arr = [];

Method 2

By set the array length to zero.

arr.length = 0

Method 3

Using .splice(), the .splice() function will return an array with all the removed items.

arr.splice(0,arr.length)

Method 4

Using While loop statement and pop() method.

while(arr.length &gt; 0) {
    arr.pop();

Source: https://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript

Difference between Array.length = 0 and Array =[]?

array = [] creates a new array and assigns a reference to it to a variable. Where any other references are unaffected (not changed) but still point to the original array.

array.length = 0 modifies the array itself. If it accesses via a different array variable, then it will get the modified array.

Source: https://stackoverflow.com/questions/4804235/difference-between-array-length-0-and-array

Difference between Javascript array length vs size

Array.size() is not a valid method and not available, always use the length property.

.size() is in jQuery and many other libraries.

.length work only when the key is number. length doesn’t work with string keys

.length work well for this type of array


Question: How to initialize an array’s length in javascript?

Answer: You can create an Array with size but not suggested and Theoretically there is no need for this. Here are the code and print the length in the console.

var arr = new Array(5);
console.log(arr.length) // 5

Question: How to JavaScript array cut length?

Answer: Method 1

You can cut or limit the length of an array in JavaScript by using a using splice() function.

arr.slice(0,5)

Complete code example

In the example changing the original array values.

<!DOCTYPE html>
<html>
    <body>
        
        <button onclick="myFunction()">Click and get array length</button>
        
        <p id="demo"></p>
        
        <script>
            function myFunction() {
                var fruits = ["Apple", "Orange", "Kiwi", "Mango"];
                var citrus = fruits.slice(1, 3);
                var count = citrus.length;
                document.getElementById("demo").innerHTML = count;
            }
        </script>
        
    </body>
</html>

Method 2

Other option to cut length is by setting the .length property to the desired length. A fastest easy way.

arr.length =2;

Complete code

New array created in this example.

<!DOCTYPE html>
<html>
    <body>
        
        <button onclick="myFunction()">Click and get array length</button>
        
        <p id="demo"></p>
        
        <script>
            function myFunction() {
                var fruits = ["Apple", "Orange", "Kiwi", "Mango"];
                fruits.length =2;
                document.getElementById("demo").innerHTML = fruits.length;
            }
        </script>
        
    </body>
</html>

Output: 2 (for both examples)

Do comment if you have any doubt and suggestion on this tutorial.

Note: The All JavaScript check array length Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.