var arr = [1, 2, 3];
arr.length = 2;

console.log(arr);

In JavaScript, arrays are a versatile data structure that can hold multiple values, with each value accessible via an index. One fascinating aspect of JavaScript arrays is the length property. While it’s commonly thought of as simply the number of elements in an array, this property is more dynamic than you’d think. You can manipulate it directly, and doing so can lead to unexpected behaviors or provide useful shortcuts for array manipulation.

In this blog, we will take a close look at how modifying the length of an array affects the contents of the array.

1. Array Initialization:

var arr = [1, 2, 3];

This creates an array arr with three elements: [1, 2, 3]. The array’s length is initially set to 3, reflecting the number of elements in the array.

2. Modifying the Length Property:

The next line of the code sets the length property of the array to 2:

arr.length = 2;

Here’s where things get interesting. The length property of an array in JavaScript is not a constant or read-only value; it can be modified directly. When you set a new value to arr.length, JavaScript adjusts the array to match the specified length.

• If you decrease the length, the array is truncated, and all elements beyond the new length are removed.
• If you increase the length, the array is expanded, and empty slots (i.e., slots that are undefined) are added to the array.

In this case, since the original array had three elements [1, 2, 3], and we’ve set arr.length = 2, the array is truncated to just the first two elements

3. What Happens Internally:

When arr.length is reduced, JavaScript removes any elements that exist beyond the new length. The elements that remain are the first N elements, where N is the new value of arr.length. In our example, the new length is 2, so the array becomes:

[1, 2]

The element 3 is removed from the array.

4. Logging the Result:

Finally, when we log the array:

console.log(arr);

The output will be:

[1, 2]

As expected, the array is now truncated to only contain the first two elements.

5. Key Takeaways:

• The length Property is Mutable: One of the unique features of JavaScript arrays is that the length property can be changed manually. When you set a new length, JavaScript automatically adjusts the array’s content to match the new length.
• Array Truncation: Reducing the length of an array removes elements beyond the specified length. This behavior allows you to truncate arrays easily, but it also means that data can be lost if you’re not careful.
• Arrays Are Dynamic: JavaScript arrays are dynamic by nature. The length property can increase or decrease, and arrays can grow or shrink as needed. Setting the length property is one of the quickest ways to change the size of an array without using array methods like pop() or splice().
• Potential Pitfalls: While modifying the length property is convenient, it’s important to note that any data beyond the new length is permanently removed. Once truncated, you cannot recover those elements unless you store them beforehand. Therefore, this technique should be used with caution, especially when working with data that must be preserved.

6. What Happens When You Increase the Length?

While we’ve only discussed reducing the length so far, it’s also worth understanding what happens when you increase the length of an array. Let’s take a quick look at this behavior:

var arr = [1, 2, 3];
arr.length = 5;
console.log(arr);

Output:

[1, 2, 3, <2 empty slots>]

In this case, the length property is increased to 5, but JavaScript doesn’t automatically add new values. Instead, it creates empty slots in the array. These empty slots aren’t actually undefined; they are just “empty” and won’t be counted by methods like .forEach() or .map(). If you check the array with console.log(), these empty slots are represented as <2 empty slots>.

Conclusion:

Modifying the length property of an array in JavaScript is a powerful tool, but it requires a solid understanding of how it works. By setting arr.length = 2, we can truncate an array to only the first two elements. However, be careful when manipulating the length property, especially when you’re dealing with important data, as reducing the length removes elements permanently.

Understanding how array length manipulation works opens up new ways of efficiently managing array data. Whether you’re truncating an array, or adjusting its size dynamically, knowing how to use arr.length can make your JavaScript code more concise and effective.