Understanding and Usage

The length property represents the total number of items as a numeric value in structures that allow indexed access, such as arrays, strings, and array-like objects.

In addition, the length property is also used in certain special JavaScript objects (such as Window and History) to represent a count or length that corresponds to each object’s characteristics.

If there are no items, the numeric value is 0.

length Property–Supporting Objects

  • Arrays: The length of the array (the number of elements)
  • Strings: The length of the string (the number of characters)
  • Array-like objects: The number of elements contained in the object
  • TypedArray: The number of elements in the typed array
  • Window: The number of frames in the window, that is, the number of <iframe> elements contained within the current window
  • History: The length of the session history, including the current page
  • Storage: The number of data items stored in the Storage object

Array length Property

In arrays, the length property represents the number of elements contained in the array as a numeric value.

JavaScript 
const fruits = ["apple", "orange", "banana"];
console.log(fruits.length); // 3

const emptyArr = [];
console.log(emptyArr.length); // 0

String length Property

In strings, the length property represents the number of characters contained in the string as a numeric value.

JavaScript 
const greeting = "Welcome. Nice to meet you!";
console.log(greeting.length); // 22

const emptyStr = "";
console.log(emptyStr.length); // 0

Array-like Object length Property

In JavaScript, there are arrays and array-like objects that have structures similar to arrays. Although they are not actual arrays, they share similar characteristics. Examples include a function’s arguments object and DOM collections such as NodeList. Array-like objects also have a length property.

Example: The arguments Object of a Function

The arguments object of a function represents the number of arguments passed to the function as a numeric value.

JavaScript 
function myFunction(a, b, c) {
  console.log(arguments.length);
}

myFunction(); // 0
myFunction(1); // 1
myFunction(1, 2); // 2
myFunction(1, 2, 3); // 3
Example: NodeList Object

In a NodeList object, the length property represents the number of nodes in the list as a numeric value.

JavaScript 
const elements = document.querySelectorAll("p");
console.log(elements.length); // the number of elements

Things to Keep in Mind

The length property is read-only (immutable) for strings, History, and Storage, meaning it cannot be modified directly. In contrast, the length property of an array can be modified directly.

When the length of an array is reduced, elements are actually removed from the array. When it is increased, empty slots are created.

Read-only (Immutable) length Example: String

For strings, even if you attempt to assign a new value to length, neither the original data nor its length changes.

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

// Attempt to modify the length property
str.length = 5;

console.log(str.length); // still 13
console.log(str);        // "Hello, World!" remains unchanged

Modifiable length Example: Array

For arrays, modifying the length property physically adjusts the data stored in memory.

JavaScript 
let arr = ["Apple", "Banana", "Orange", "Grape"];
console.log(arr.length); // 4

// 1. Reduce the length (shorten the array)
arr.length = 2;
console.log(arr.length); // 2
console.log(arr);        // ["Apple", "Banana"] → remaining elements are permanently removed

// 2. Increase the length (expand the array)
arr.length = 5;
console.log(arr.length); // 5
console.log(arr);        // ["Apple", "Banana", empty × 3] → empty slots (holes) are created

// 3. Deleted data cannot be restored
console.log(arr[2]);     // undefined

References