JavaScript Array length Property

size() vs length for Finding Length

In JavaScript, arrays do not have a size() method. The length property is the standard way to get the size of an array.

Example

let arr = [10, 20, 30, 40];
console.log(arr.length);

You can also try this code with Online Javascript Compiler

Run Code

Output: 

4

The length property returns the total number of elements in the array.

In comparison:

• Languages like Java (ArrayList) use the size() method to return the number of elements.
   
• In JavaScript, length is equivalent to size() in other programming languages.

String Length vs Array Length Property

The length property exists for both arrays and strings, but they behave differently:

• For arrays, length returns the number of elements.
   
• For strings, length returns the number of characters.

Example 1: Array Length

let arr = [1, 2, 3, 4];
console.log(arr.length); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

4

Example 2: String Length

let str = "Hello, World!";
console.log(str.length);

You can also try this code with Online Javascript Compiler

Run Code

Output: 

13

Here, the string "Hello, World!" has 13 characters, including spaces and punctuation.

Key Point: The length property works differently for arrays and strings, but its purpose remains to measure the size.

Iterating Through an Array

To process each element in an array, iteration is essential. The length property is often used in loops to determine how many iterations to perform.

Example 1: Using a For Loop

let arr = [10, 20, 30, 40];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

You can also try this code with Online Javascript Compiler

Run Code

Output:

10
20
30
40

Here, the length property helps control the loop to avoid accessing out-of-bounds indices.

Example 2: For...of Loop

let arr = ['a', 'b', 'c'];
for (let value of arr) {
    console.log(value);
}

You can also try this code with Online Javascript Compiler

Run Code

Output:

a
b
c

The for...of loop simplifies array iteration without needing to use length.

Shortening an Array

The length property can also be used to truncate or shorten an array by setting a smaller value.

Example: Truncate an Array

let arr = [1, 2, 3, 4, 5];
console.log('Original Array:', arr);

// Shortening the array
arr.length = 2;
console.log('Truncated Array:', arr);

You can also try this code with Online Javascript Compiler

Run Code

Output:

Original Array: [1, 2, 3, 4, 5]
Truncated Array: [1, 2]

Here, setting length = 2 removes all elements beyond index 1. This is a quick way to clear elements without creating a new array.

Key Point: Shortening an array is more memory efficient because no new array is created.

Modification in JavaScript Array Length Property

The length property of an array in JavaScript is not read-only. You can modify the length property to truncate or extend the array. To truncate an array, you can set the length property to a value less than the current length. This will remove elements from the end of the array. 

For example:

let fruits = ['apple', 'banana', 'orange', 'mango'];
console.log(fruits.length); // Output: 4

fruits.length = 2;
console.log(fruits); // Output: ['apple', 'banana']

In the above code, setting `fruits.length = 2` truncates the array to contain only the first two elements. The `'orange'` & `'mango'` elements are removed.
 

To extend an array, you can set the length property to a value greater than the current length. This will add empty slots at the end of the array. For example:

let numbers = [1, 2, 3];
console.log(numbers.length); // Output: 3

numbers.length = 5;
console.log(numbers); // Output: [1, 2, 3, empty × 2]

In this case, setting `numbers.length = 5` extends the array to have a length of 5. Two empty slots are added at the end of the array.

Make an Array of Void

In JavaScript, you can create an array of a specific size using the Array constructor along with the length property. Here's how you can create an array of void or empty elements:

let emptyArray = new Array(5);
console.log(emptyArray.length); // Output: 5
console.log(emptyArray); // Output: [empty × 5]

In this example, `new Array(5)` creates a new array with a length of 5. The array is initialized with empty slots, denoted by `empty × 5` when logged to the console.
 

It's important to note that these empty slots are not the same as `undefined` or `null`. They are simply placeholders in the array. If you access an element at an index that holds an empty slot, it will return `undefined`. 

For example:

let emptyArray = new Array(3);
console.log(emptyArray[0]); // Output: undefined

You can also use the Array constructor with the spread operator (`...`) to create an array of a specific size and fill it with a default value:

let filledArray = [...new Array(4)].map(() => 0);
console.log(filledArray); // Output: [0, 0, 0, 0]

Here, `[...new Array(4)]` creates an array of length 4 with empty slots. The `map()` method is then used to fill each slot with the value 0.

Frequently Asked Questions

What is the length property in JavaScript?

The length property in JavaScript is used to determine or set the number of elements in an array. For example, array.length returns the total number of elements.

Can the length property be used to change the size of an array?

Yes, you can set the length property to resize an array. Increasing the length adds empty slots, while reducing it removes extra elements.

How is array length different from string length?

For arrays, length returns the number of elements. For strings, length returns the number of characters, including spaces and punctuation.

Conclusion

The length property is an essential feature in JavaScript that allows developers to determine, iterate, and even modify the size of an array. It simplifies working with arrays by providing a direct way to manage their size and ensures efficient memory usage when shortening arrays. Understanding its usage and differences with strings helps you write cleaner and more effective code.