What happens when length of object is set to 0 - JavaScript?

In JavaScript, setting an array's length property to 0 immediately removes all elements and clears the array. This is an efficient way to empty an array without creating a new one.

Initial Array Example

Let's start with an array containing some elements:

var arrayObject = [
    "John",
    "David", 
    "Mike"
];

console.log("Original array:", arrayObject);
console.log("Original length:", arrayObject.length);

Original array: [ 'John', 'David', 'Mike' ]
Original length: 3

Setting Length to 0

When you set length = 0, the array becomes empty and all elements are removed:

var arrayObject = ["John", "David", "Mike"];

// Clear the array by setting length to 0
arrayObject.length = 0;

console.log("After setting length to 0:", arrayObject);
console.log("New length:", arrayObject.length);

After setting length to 0: []
New length: 0

Setting Length Greater Than Current Size

When you set length to a value greater than the current array size, JavaScript adds empty slots filled with undefined:

var arrayObject = ["John", "David"];
console.log("Before:", arrayObject);

// Extend array length to 5
arrayObject.length = 5;
console.log("After setting length to 5:", arrayObject);

// Check individual elements
for (var i = 0; i < arrayObject.length; i++) {
    console.log(`Index ${i}:`, arrayObject[i]);
}

Before: [ 'John', 'David' ]
After setting length to 5: [ 'John', 'David', <3 empty items> ]
Index 0: John
Index 1: David
Index 2: undefined
Index 3: undefined
Index 4: undefined

Complete Example

var arrayObject = ["John", "David", "Mike"];
console.log("Step 1 - Original:", arrayObject);

// Clear array
arrayObject.length = 0;
console.log("Step 2 - After length = 0:", arrayObject);

// Extend array
arrayObject.length = 3;
console.log("Step 3 - After length = 3:", arrayObject);

// Add new elements
arrayObject[0] = "New Item";
console.log("Step 4 - After adding element:", arrayObject);

Step 1 - Original: [ 'John', 'David', 'Mike' ]
Step 2 - After length = 0: []
Step 3 - After length = 3: [ <3 empty items> ]
Step 4 - After adding element: [ 'New Item', <2 empty items> ]

Key Points

• Setting length = 0 completely clears the array and frees memory
• Setting length to a larger value creates empty slots with undefined
• This method modifies the original array rather than creating a new one
• Empty slots are different from explicitly set undefined values

Conclusion

Manipulating an array's length property provides direct control over array size. Setting it to 0 efficiently clears all elements, while increasing it creates empty slots filled with undefined.