Arrays & other data types exist in most of the programming languages. In programming, the logic behind arrays is more or less the same but some parts differ from one language to another.

JavaScript cares about arrays a lot. There are many built-in methods in JavaScript that helps to work with arrays easier. Before learning them, first, it’s good to know the fundamentals of arrays.

So in this post, I will make an introduction to arrays in JavaScript with the following points below:

• JavaScript arrays
• How to create an array?
• Accessing the elements of an array
• Getting the size of an array
• Looping an array

Let’s start first with how programming would be without arrays.

How would it be without arrays?

Consider we need to store a list of numbers from 1 to 100 in our program. In JavaScript we declare a variable (a number in this case) like below:

let number1 = 1;

Each variable can hold only 1 value. I declared 1, so 99 left. Now we need to declare 99 unique variables for the rest:

let number2 = 2;
let number3 = 3;
let number4 = 4;
. 
.
.
let number100 = 100;

So 100 variables declared for 100 numbers. Not very practical, is it?

However, if we use an array, we can hold more than one value and store all of the numbers in one single variable:

let myFirstArray = [1,2,3,...,100];   // Example of a JS Array

Arrays in JavaScript

So above we see that we can hold multiple elements at once, by using an array.

JavaScript arrays are used to store multiple values in a single variable. — w3schools

JavaScript’s approach to arrays is a bit different. There isn’t a data type called array in JavaScript. Instead, arrays are objects in JavaScript.

A JavaScript Object can hold different data types (string, integer, boolean) at once:

let person = {
 firstName: “John”,
 lastName: “Doe”,
 age: 20
};// Example of a JavaScript Object

Since an array in JS is an object (with a different syntax), they can also contain different data types:

let array = [1, 2, "hello world", 3.14, true];

How to create an array?

Guess now you have some idea about JavaScript arrays. Now let’s see how to create an array. There are 2 different ways to create a JavaScript array:

1. Array literals

This way is used more commonly. We declare an array with empty square brackets and assign it to a variable:

let myArray = [];   // Declaring an array in JS

The values of an array are written inside the brackets, separated by commas:

let myArray = ['BMW', 2019, true];

2. Array Constructor

There is also a global Array Object in JavaScript, which has its own built-in properties & methods. (We can also use them for our own arrays.)

So the other way to create an array is by creating an instance of the Array Object with the new keyword:

let myArray = new Array();

And we can also fill it like below:

let myArray = new Array('BMW', 2019, true);

I won’t go in more details up here because it’s not recommended to use the array constructor method for creating arrays.

There is no need to use new Array(). For simplicity, readability and execution speed, use the first one (the array literal method). — w3schools

Accessing the Elements of an Array

• Each element of an array has a location called as index.
• We can access an element of the array by referring its index.
• Array indexes always start with 0, which points to the first element of the array.

Let’s define an array of numbers and then access its elements:

let numbersArray = [1, 2, 3, 4, 5];

So the numbersArray has 5 elements and below we see how they’re indexed:

-- index --           -- elements --numbersArray[0]    -->      1numbersArray[1]    -->      2numbersArray[2]    -->      3numbersArray[3]    -->      4numbersArray[4]    -->      5

The first element (1) has an index of 0, the second element (2) has the next index (1) and that goes so on.

When we want to access one of the elements, we just need to call its index:

Or we can change one of the elements by assigning a new value to the index:

If you try to give a higher index number, it will return undefined because that index doesn’t exist:

Like the post so far? Check also our video about JavaScript Arrays below:

Getting the Size of an Array

JavaScript provides an easy way to get how many elements an array has: the length property.

The length property is one of the built-in properties of the Array Object in JavaScript. We can call it simply with dot (.) notation:

let numbersArray = [6, 7, 8, 9, 10];numbersArray.length;

The length property returns the size/length of an array:

Looping an Array

Like in other programming languages, we can use the for / while loops in JavaScript to return values from an array at once.

For example, let’s print the values inside the array by using a for loop:

let numbersArray = [1, 2, 3, 4, 5];for(let i=0; i < numbersArray.length; i++) {
  console.log(numbersArray[i]);
}

The for loops must have a starting & an ending point.

So I created a for loop, “i” will start from 0 and keeps running until the end of the array. Using the length property is useful here. If the size of the array changes, the length property will get a new size automatically and the loop won’t break.

Then I give the same “i” value as an index property to the array, so it gets directly the elements and prints them to console:

There are also other ways to loop an array in JavaScript, I will cover them detailly in another post later.

NOTE: It’s recommended to use the length property in loops because arrays are dynamic and the size can be changed.

Arrays cover an important place in JavaScript. Mastering arrays will help you to have a better understanding of JavaScript. There are various operations can be done with arrays and JavaScript provides solutions to do them easily. In my next articles, I will cover them in details.

If you want to learn more about Web Development, feel free to follow me on Youtube!

Thank you for your time.