JavaScript { Part 9 : Arrays }

Photo by Iker Urteaga on Unsplash

What’s up What’s up!!. Let’s take another one for the data structure. The arrays.

What’s an array?

An array is an ordered collection of any number (zero or more) of elements, the range of the elements are called the array’s elements. You can refer to the array elements with a name and index, this is because each array has an index which is a non-negative integer.

Create an array?

You could create an array literal by giving the square brackets, it could by an empty array or an array with a bunch of elements, remember arrays can have holes inside and may not be contiguous.

Creating literal array’s

According to ECMAScript standard specifies arrays as maps from indices to values, but for me is an ordered collection of elements (This is because I start programming with Perl)

Also remember that an array literal is simple to save or take less space in the file compared with the array constructor, which I’ll explain in a little bit.

Array properties?

Yes, arrays can have properties, this is because arrays are still objects and can have object properties.

Assigning properties to an array

Ok, I would like to see what happen if I need the output of the array in the ‘sixteen line’

Result from the array literal

And now let’s see the result of the lines nineteen and the twenty-one

Result from the array literal using it as an object

Whoot!, As you can see, you can interact with the array as an object too and now you definitively know that an array can store key-value pair and a collection of elements

Array length?

Ok now that you saw the properties of an array I would like to introduce to you the property call ‘Length

This property is equal to the number of arguments or elements in the array also is used to track the highest index in an array and we can use it to remove and append elements

Array length property

For this example, I use the array in the line fifteen and then use the length property and give me as a result 5 (this is because there are five elements in the array)

Array length property with holes

Now I use the array in line ten, this is because I need to prove to you, that holes count too

Array constructor?

In order to keep creating arrays, you could use two kinds of ways in the constructor array

  • You could create an empty array with a given length
  • You could create an array whose elements are given values.

For the constructor array you need to keep in mind that the ‘new’ word it’s totally optional, this is because when you invoke it as a normal function without the ‘new’ word its totally the same as when you invoke it as a constructor

Creating array constructor

Nevertheless, when you use the array constructor, the engine has to spend more time understanding exactly what it is that you want to do: you’re creating an object, OK, what kind of object, and so on. (This is because is not a simple array literal)

Result from the constructor array’s

As you can see our result for creating empty constructor arrays given a length has only holes in it

Array Constructor with values

Now as a quick example I create a vocals variable with the new keyword and also it works! and has a length of 5

Array Indices?

This is used in order to access an element of an array.

Array indices

-As you can see, I took the ‘vocals array’ and access to each element with indices

When you work with arrays indices that are out of range are treated as normal property keys (strings), and don’t influence the property length to let’s see an example…

Array Indices

Maybe in order to understand a little bit deeper, I’ll recommend to you to check the section 15.4 of the ECMAScript specification, trust me it’s very interesting (Here explain the limit of array indices)

Deleting arrays?

There is an operator called delete and deletes array elements

Delete operator

You must keep in mind that when you delete an element also create a hole and the length of the array is not updated

Length of array using delete operator don’t update itself

If you don’t want to create several holes at the moment you are deleting elements of an array. You might want to delete the elements by decreasing an array’s length

Decreasing an array’s length

Keep in mind that if you decrease the length of an array, all elements at the new length and above are deleted

Elements decrease

In order to make this quicker, maybe you could create a new empty array

Make an empty array

Also, you could Increase the length of an array by using the same technique about decreasing let’s see it…

Manually increasing the length of an array

Remember that using this increasing method creates a lot of holes, so please be careful.

The holes in the array?

I personally recommend to you to avoid holes in the arrays. This is because the engine handles not so well the holes and also affect performance in a negative way


There’s another operator call IN and detect whether an object has a property with a given key. Can be used to know if a given element exists in an array.

IN operator

In this example you can see an array with a length of 5 elements, and I use the IN operator given the index of 1, 3 and 5, as you can see in the result, the 1 and 3 index elements are given us true (its because the operator found some value|property), but in the 5 index we know that there is nothing, no element, no space, no hole, and that is why it gave us false

When you are a quit experience developer, you are not using so much the array literal as I describe in this article because you are using the array’s a lot, instead, you are using methods that can manipulate the array, and also save you time and your code will look cleaner and more readable.


  • forEach
  • Map
  • Find
  • Filter
  • Every
  • Some
  • Sort

Thank you very much for your time. And, until next time, have a great day!

Did you enjoy this? Give it a clap on the left so others can discover it as well or follow me if you are interested in more chapter like this.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.