Coding Newbie

JavaScript Arrays

Learn JavaScript Arrays Quickly and Easily

JavaScript Arrays are one of the most useful properties. It is extremely important to understand them properly, as arrays are an amazing tool that can greatly improve our code. I myself am constantly learning new ways to use them, which shows how diverse their use is.

In this article we will take a closer look at what arrays actually are, and how to create and use them.

Before continuing with Arrays, if you have not done it already, you should get yourself familiar with JavaScript Data Types first.

Now let’s move on.

What are JavaScript Arrays?

Most simple way to define an array is to say that an array represents a list, or a set of items. It is an ordered list, as each array’s element has his position within the list, called index.

This index is important because we use it to target specific elements of an array. It is important to note that the first item of an array has an index of 0. The second has an index of 1, etc.

javascript arrays index

Now that we understand the basic of JavaScript arrays, we can move to how to actually create an array.

How to create JavaScript Arrays?

There are two ways to create an array:

  • Using Array constructor
  • Using literal notation [ ]

Array Constructor

In order to create an array using Array Constructor, first you need to declare it as a variable.

Arrays differ from variables because of its ability to store multiple values, while a variable can hold only one value. If we use a constructor to create arrays, we must also use the keyword new:

javascript arrays constructor

As seen in the example above, we can store values of the same, but also, if we need to, we can store different data types within an array.

Literal Notation

Using literal notation as a way of creating arrays is a preferable way to do it, and it is the method most developers use, due to its simplicity.

We just put elements, separated by commas, within the square brackets:

javascript arrays literal notation

The Difference

Now, why would we use a constructor, considering that using just square brackets is a much simpler and easier approach?

Well, array length is dynamical, meaning there is no need to specify it. However, if we need to determine the length of an array, using a constructor is preferable method. Let’s take a closer look at the example bellow.

javascript arrays length using constructor and literal notation

As seen above, if we use literal notation, it will create an array of one element, with the value 10. However, using the constructor creates an array with length of 10 elements, and all of them are empty.

The purpose of this approach is to determine how many elements will be stored in our array, but the elements and values will be added later.

If needed, we can create a completely empty array, without a determined number of elements. No matter which method we use to create it, leaving empty brackets create an empty array.

javascript arrays constructor vs literal constructor empty array

How to access elements in already declared Array?

If we need to use some element from an array, we use the already mentioned index.

Each index represents the position of an element, starting from 0.

For accessing specific element in an array, we use the syntax arrayName[index]:

javascript arrays access item

We can use this property to change any item we need:

javascript arrays change item

It is possible to add a new element on the end of an array. Next available index in our ‘fruits’ array is 4 :

javascript arrays add item

It is not necessary to add an element on the next available position (index). We can add new element on any later index, and all elements between will be empty elements:

javascript arrays add item at specific position

Arrays can be manipulated with inbuilt JavaScript methods. You can learn more about these methods and deepen your knowledge of arrays in the post about JavaScript Array Methods.

Conclusion

Arrays are one of the most useful properties of JavaScript. Knowing arrays allows you to easily store and manipulate large sets of data, while making your code simpler and more effective.

We have two ways to declare an array: using array constructor and literal notation. Which one you will use, depends on which way suits better to a certain need, or sometimes of your code writing habit. In essence, the end result is in most cases the same, no matter which method you use.

When you master JavaScript Arrays, your next step should be learning about JavaScript Objects. It opens the whole new world of JavaScript.

%d bloggers like this: