JavaScript .length

In JavaScript, the .length property is used to determine the number of elements, characters, or items in a given data structure, such as arrays or strings. This property is straightforward to use and plays a crucial role in JavaScript, making it simple for developers to work with the data.

Syntax

myString.length

Parameters:

The .length property does not accept any parameters.

Return value:

Returns a number representing the count of items or characters, depending on the object it’s used with (e.g., arrays, strings, NodeLists).

Example 1: Using .length with Arrays

This example uses .length to calculate the total number of elements in an array:

const fruits = ['apple', 'banana', 'orange', 'grape'];

const numberOfFruits = fruits.length;

console.log(numberOfFruits);

Copy to clipboard
Copy to clipboard

Here is the output:

4

Copy to clipboard
Copy to clipboard

Example 2: Using .length with Strings

This example uses .length to calculate the total number of characters in a string:

const message = 'Hello, world!';

const messageLength = message.length;

console.log(messageLength);

Copy to clipboard
Copy to clipboard

Here is the output:

13

Copy to clipboard
Copy to clipboard

Example 3: Using .length with DOM Collections

When working with the DOM (Document Object Model), methods like document.querySelectorAll() return NodeLists, which are array-like. In this case, .length can be used to count the total number of selected elements:

const buttons = document.querySelectorAll('button');

console.log(buttons.length);

Copy to clipboard
Copy to clipboard

Here is a possible output:

2

Copy to clipboard
Copy to clipboard

Frequently Asked Questions

1. Can I use .length with objects?

Not directly. Standard JavaScript objects don’t have a .length property. To count the number of keys, use:

const obj = { a: 1, b: 2 };

console.log(Object.keys(obj).length); // Output: 2

Copy to clipboard
Copy to clipboard

2. Does .length count undefined or empty slots in arrays?

Yes. JavaScript arrays can be sparse, and .length will count the total index range, not just defined elements:

const arr = [];

arr[3] = 'dog';

console.log(arr.length); // Output: 4

Copy to clipboard
Copy to clipboard

3. Is .length writable for arrays?

Yes, but with caution:

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

arr.length = 2;

console.log(arr); // Output: [ 1, 2 ]

Copy to clipboard
Copy to clipboard

Modifying .length truncates or extends the array.