Every programming language has a list of essential elements that let developers create something big. Data types are one of them. Sadly, JavaScript is not famous for a vast range of complex data types. All it has are arrays, objects, symbols, sets, and maps. Although it is not much, it can still be enough to build even a large-scale solution. As practice shows, in majority cases, developers are managed to solve all the issues relying only on JavaScript Arrays. Therefore, it is one of those things that everyone should know inside out.

What are Arrays?

Arrays are complex high-level list-like objects with a length property. Note, they may behave as lists, but they are not; they are objects. They have integer properties as indexes and a dozen of helpful methods for manipulating the elements.

How to Create Arrays in JavaScript

There are two ways to create an array. The first one implies the utilization of the literal method. It sounds a bit confusing at first; however, in fact, everything is easy. Here is an example:

var array_name = [item1, item2, ...];  // syntax

var avengers = ["Iron Man", "Captain America", "Captain Marvel"]; 

The second way implies the utilization of a built-in array constructor and the keyword new. Here is an example:

var array_name = new Array(item1, item2, ...); // syntax

var avengers = new Array("Iron Man", "Captain America", "Captain Marvel"); 

The latter option is more official than the first one. Also, it can cause problems. For example, compare and contrast two lines of codes

var array1 = new Array(10, 20);  // creates an array with two elements (10 and 20)
var array2 = new Array(10);  // creates an array with 10 undefined elements 

Therefore, as a rule, developers prefer the first notation. It is more intuitive, simple, and error-proof.

There are several essential things to note. First, you can store different types of data in a JavaScript array, such as:

You can even store multiple data types in a single array:

var heroes= ["Captain Marvel", 7, true];

Second, there are no strict rules in its declaration. It means that spaces and line breaks are not imperative. Here is an example:

var avengers = [
   "Iron Man", 
   "Captain America", 
   "Captain Marvel"
];

How to Create an Empty Array in JavaScript

Based on the two previous syntaxes, you can create an empty array in two ways. 

Method #1:

var avengers = [];

Method #2:

var avengers = new Array();

If you need to create a JavaScript array with a given size, all you need to do is to pass the size as a parameter:

var avengers = new Array(3); // creates an empty array with 3 undefined elements

How to Determine an Array’s Size

When working with arrays, it is essential to know its size. In JavaScript, you do not have to cycle through the entire array to find out how many elements are there: you have the length property for that.

Length property stores information about the size of a JavaScript array and is very easy to retrieve. Here is an example:

var avengers = ["Iron Man", "Captain America", "Captain Marvel"];
var number_of_avengers = avengers.length; 

Note: If an array is empty, the length property will return 0.

Accessing Elements in JavaScript Array

The first thing to remember about JavaScript arrays is that they are a special kind of object that has numbered indexes. Like it or not, but you cannot create associative arrays. All you have is indexes. Therefore, to access any element of an array, you need to use its index. Here is an example

var avengers = ["Iron Man", "Captain America", "Captain Marvel"];
var FirstAvenger = avengers[1]; // Captain America was the first Avenger 

Much like with the majority of programming languages out there, array indexes start with 0. It means that to access the first element in the array, you should use 0. Here is an example:

var avengers = ["Iron Man", "Captain America", "Captain Marvel"];
var firstArrayElem = avengers[0]; //retrieves "Iron Man"

Note: If you use an invalid index to access an element in JavaScript array, an “undefined” value is returned.

How to Access the Last Element in an Array

Accessing the last element of an array is as easy as accessing the first element. All you need is the size of the array. The index of the last element will be calculated as length minus 1 since indexes start with 0. Here is an example:

var avengers = ["Iron Man", "Captain America", "Captain Marvel"];
var lastAvenger = avengers[avengers.length-1]; //retrieves "Captain Marvel"

Note you can use an expression inside the square brackets when accessing the element in an array.

Access the Full JavaScript Array

The great thing about JavaScript arrays is that you can access the full array simply by referring to it by its name. Here is an example:

var avengers = ["Iron Man", "Captain America", "Captain Marvel"];
alert (avengers); // outputs "Iron Man,Captain America,Captain Marvel" inside pop-up window 

Iterating Through a JavaScript Array

There are two field-tested ways to loop through a JavaScript array. The first one is to use the standard for loop. Here is an example:

var avengers = ["Iron Man", "Captain America", "Captain Marvel"];

for (var i = 0; i < avengers.length; i++) {
      console.log(avengers[i]);
}

An alternative way is to use an inbuilt function Array.forEach(). Here is an example:


var avengers = ["Iron Man", "Captain America", "Captain Marvel"];
var text = "<ul>";

avengers.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

How to Edit an Element in an Array

To reset the element inside an array requires one thing – a sequence number. Here is an example of how to change the second element in an array:

var avengers = ["Iron Man", "Captain America", "Captain Marvel"];
avengers[1] = "Falcon";

Other JavaScript Array Methods

JavaScript arrays are powerful tools. You can use them not only for storing data but also for sorting, inserting, removing, and filtering. That is not all, you can also find the index of the required element, join arrays, create a new array from another one, reverse the array, and much more. You can use methods for all these operations. There are a dozen of them, the most popular are:

  • Array.push() – add an element to the end of an array;
  • Array.splice() – remove element by index position or remove elements from the starting position;
  • Array.indexOf() – find the index of an element;
  • Array.sort() – sort array according to function defined.

Let’s consider one of the most popular issues that are addressed with the help of methods, that is how to add elements to an array.

To add an element to a JavaScript array, you need to use the push() method. Here is an example:

var avengers = ["Iron Man", "Captain America", "Captain Marvel"];
avengers.push("Hulk");

Alternatively, you can use an index declaration and a length property. Here is an example:

var avengers = ["Iron Man", "Captain America", "Captain Marvel"];
avengers[avengers.length] = "Hulk"; 

Note: do not use a random index or index that is bigger than the length; it will cause the appearance of undefined elements inside the array.

Wrapping Up

JavaScript arrays are one of the essential elements of the language and certainly one of the most powerful ones. They are easy to understand, organize, and work with.  Use them for storing and manipulating data with indexes as names.

To learn more about JavaScript, check out our collection of JavaScript tutorials.