JavaScript : Arrays

Variables can store only a single value at a time but what if you want to store multiple items at the same time? It is not efficient to create separate variables to store each item, right?

In JavaScript, we can store multiple items together using an array. An array is just a list-like structure or a container that is used to store multiple elements irrespective of the data type.

In JavaScript, you can create an array as given below,

let items = ["Apples", "Bananas", 2, 4, 8, "Purple", true, false]

An array is just a variable that stores a list. In the above line, we have created an items variable that contains a list of 8 items. All the items inside the array have different data types. You can create an array of strings, numbers, boolean, objects, or a combination of multiple types. An array does not care about the type of data that is stored inside it.

You can also create an array that contains another array such as,

let items = [1, 2, 3, ["Apples", "Bananas"]]

The syntax for creating an array

let/const/var arrayName = []

An array name should not begin with a number.

An array is created using square brackets.

Accessing elements from an array

Arrays are zero-indexed. It means that the first element inside an array is stored at index 0, the second element is stored at index 1, and so on.

If you want to access the third element then you can do it by using the following expression,

let items = [1, 2, 3, 4, 5]

let thirdElement = items[2]

Now, the thirdElement variable contains the value 3.

To access an element from the array you have to specify the index of the element inside the square brackets i.e arrayName[index].

Since the array is a list-like structure, you can use loops to access all elements from the array.

To get the length of an array you can use the length property of an array i.e array.length

forEach loop

let items = [1, 2, 3, 4, 5]
items.forEach(item => console.log(item))

// for each loop is used to access each element present inside the array

for loop

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

// The above loop will print each item to the console
// items.length contains the value 5 because array contains 5 elements
// hence the loop will run until the value of i is less than 5

Modifying array elements

We have seen how to create and access array elements. You can also modify the elements inside the array.

let items = [1, 2, 3, 4, 5]

Suppose you want to modify the value of the third element and replace it with 10. You can do it by,

items[2] = 10

Now the array will be [1, 2, 10, 4, 5]

In this way, you can reassign a value to any index inside the array. This property of an array is called mutability. It means that you can modify the elements inside the array.

Array Methods

let items = [1, 2, 3, 4, 5]

// get length of an array
console.log(items.length) // prints 5

/*
    add and remove elements from the end of the array
    push - adds element at the end of the array
    pop - removes element from the end of the array
*/

// add element at the end of an array
items.push(6) // returns [1, 2, 3, 4, 5, 6]
items.push(7, 8) // returns [1, 2, 3, 4, 5, 6, 7, 8]

/* At this point,
    items = [1, 2, 3, 4, 5, 6, 7, 8]
*/

// remove element from the end of an array
items.pop() // returns [1, 2, 3, 4, 5, 6, 7]

let removedValue = items.pop()
console.log(removedValue) // prints 7

/* At this point,
    items = [1, 2, 3, 4, 5, 6]
*/

// check if element is present inside array or not
console.log(items.includes(10)) // prints false
console.log(items.includes(1)) // prints true

/* 
    find index of array elements
    indexOf - returns index of the first occurrence of the element
    lastIndexOf - returns index of the last occurrence of the element
*/

let box = ["pen", "pencil", "eraser", "pen", "pen"]

console.log(box.indexOf("pen")) // prints 0

console.log(box.lastIndexOf("pen")) // prints 4

/*
    add and remove elements from the beginning of the array
    shift - removes the first element from the array
    unshift - add element at the beginning of the array
*/

let items = [1, 2, 3]

items.shift() // returns [2, 3]
items.unshift(0, 1) // returns [0, 1, 2, 3]

/*
    sort - sorts an array in increasing order
    to sort array in decreasing order, you have to pass comparison function 
    to the sort
    syntax - array.sort()
*/

let items = [ 5, 4, 3, 1, 2]
items.sort() // returns [1, 2, 3, 4, 5]

// sort in decreasing order
let items = [ 5, 4, 3, 1, 2]
items.sort((a,b)=>{
    if(a<b){
        return 1;
    }else if(a>b){
        return -1;  
    }else{
        return 0;
    }
})
// returns [5, 4, 3, 2, 1]

/*
    slice - returns a portion of array without modifying the array 
    syntax - slice(start, end), slice(start)

    slice does not return element present at the end index specified
*/

let items = [ 5, 4, 3, 1, 2]
console.log(items.slice(2)) // returns [3, 1, 2]
console.log(items.slice(2,4)) // returns [3, 1]

You can learn more about array methods here.

Blog

Vivek Alhat