Destructuring Tweets - Episode 9 - Short Read about Length
Tags: snippet, javascript, destructuring, length
Published: 2021-02-28 14:55:35

---
title: Destructuring Tweets - Episode 9 - Short Read about Length
published: true
description: I pick a more or less random snippet from Twitter and analyze it in depth in this series. It shall help me, and you understand the trickery behind it. In this episode, we learn something special about a seemingly well-known property: length.
tags: snippet, javascript, destructuring, length
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2256odxabg7fxkez98an.png
---

Wad up? Welcome to my dev.to series about my takes on Twitter code challenges! This time it's going to be awesome. You will learn something about an API you use on a daily basis: length! You read that correctly. *Length*. Let's jump right in 👉👉👉

# Snippet of the Week

This week's [snippet](https://twitter.com/apoorv__tyagi/status/1365912115421220865) is from [Apoorv Tyagi](https://twitter.com/apoorv__tyagi):
```javascript
const numbers = ['100', '200'];
numbers.length = 0;

console.log(numbers[0]);
```
In that piece of code, they initialize a constant with an array containing two strings - nothing special so far. However, in the next line, the property `length` gets overwritten by `0`.
Just in case, `length` is a property holding the element count of an Array.

> The length property of an object which is an instance of type Array sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array.
>
> from <cite>[MDN Array.prototype.length][1]</cite>

Okay, so what we do here is replacing the item-count of 2 with a 0.
On the last line, the snippet logs the first element of the array to leave it up for us to guess the output.

# The Output

The logged value is not exactly spectacular but may be somewhat counter-intuitive. You probably would expect the length to be read-only or have no significant effect on the calling instance, thus still logging 100.
However, in reality, that's not the case, and it is a tedious matter of `undefined`.

# The Analysis

That's probably the most boring analysis in the existence of my blogging career yet. Cause the answer is that it's designed like that! The length can be overwritten and ditches any elements on indexes exceeding the given value.

> Decreasing the length property does, however, delete elements.
> 
> from <cite>[MDN Array][2]</cite>

In our example, we provide the value of `0`. The array is emptied and does not hold a single item anymore. When we call the first index (`0`), the value of `undefined` reflects precisely that.

# Snippet Summary

- **Trickery**: special behavior of overwriting length
- **Key Learning**: the length property of an array is not read-only and heavily influences the calling instance
- **Further Reading**:
    - [Relationship between length and numerical properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#relationship_between_length_and_numerical_properties)
    - [MDN Array Length Page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length)
    - [New in Firefox 23: the length property of an array can be made non-writable](http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/)

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length
[2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#relationship_between_length_and_numerical_properties