JavaScript Arrays 101

While writing programs, we need to store multiple values for similar purpose. Instead of creating many seperate variables, JavaScript provide a much better solution called arrays.

Array is one of the most used data structure in JavaScript. JavaScript allows us to store different types of data in a single array, but in most of the cases you will store similar type of data into an array.

In this article you are going to understand all the basics of array data structure.

What is an Array ?

An array is a special variable that can store multiple values inside a single variable or we can say "collection of values stored inside a single variable".

You can think of an array like a list of items, or a row of boxes.

Example :

[ "Apple", "Banana", "Mango", "Orange" ]

Need of an Array :

Let's suppose you want to stor ethe names of your favourite movies.

If not using array, you will do something like this :

let movie1 = "Avatar";
let movie2 = "Avengers",
let movie3 = "Superman"

Now you will think that, if we can store all the items like this, then what is the need of an array?

Above given example works perfectly, but let's suppose there are 100 of movies, or 500.

So instead of creating 100 of variables for same purpose, we can store all values in one single data structure. Just like below example :

let movies = ["Avatar", "Avengers", "Superman"] //Array of movies

Arrays help us keep related data together and make our code cleaner and easier to manage.

How to Create an Array

Creating array in JavaScript is simple and easy.

We use square brackets [ ] to denote the array.

Example of array creation :

let marks = [85, 75, 89, 97, 76]

We can create arrays for any types of data.

Arrays can store : string, numbers, booleans, mix of values

Accessing Array Elements

In an Array, each item has a unique position number, called an Index.

Index is sequential number attached with each position, index start from 0 and get increase by 1 with each position.

Index Example :

let fruits = ["Apple", "Banana", "Orange", "Mango"]
  (index) -->    0         1         2        3

Access Array Element :

We can access the elemt of array using their index number :

Example :

console.log(fruits[0]);    // Output : Apple

console.log(fruits[3])     // Output : Mango

Output :

Apple

Mango

Updating Array Elements

We can also update the value inside an array.

Let's suppose from above example, we want to replace Banana with Papaya.

let fruits = ["Apple", "Banana", "Orange", "Mango"]
  (index) -->    0         1         2        3


fruits[1] = "Papaya"  //updating the element at index 1

console.log(fruits)

Output :

["Apple", "Papaya", "Orange", "Mango"]

Updating array elemnt is simple, just use the index number and assign a new value.

Understanding the Array Length Property

In JavaScript, array is having a built-in property called length. It tells us how many elements are inside the array. This value is always ( last index of array - 1 ).

We can access the length of an array using .length property, .

Example :

let fruits = ["Apple", "Banana", "Orange", "Mango"]
  (index) -->    0         1         2        3

console.log(fruits.length)

Output :

4

length property is very useful when working with loops.

Looping Over Array

To perform any kind of operation or calculation on each of the Array elements, we need to loop through the Array, using loop we can access each of the array element and can process them one by one.

Let's understand with a simple example :

let fruits = ["Apple", "Banana", "Orange", "Mango"]

// looping over fruits array 
for (let i = 0; i < fruits.length; i++ {
    console.log(fruits[i]);
}

Output :

Apple
Banana
Orange
Mango

In above example we are using for loop to iterate over the array, variable i is being used for accessign index number for each element, starting from 0 and ending with fruits.length which is the number of elements in the array,

In this way Array makes it very easy to handle lists of data.