Arrays in JavaScript

Introduction

An array is a collection of similar data types. All its values are stored in index locations starting from 0 to n-1.

Declaration of an Array

var myArray = [];
var myArray = [value1, value2, value3, so on...];
var myArray = new myArray(length_of_array);

Let's understand this with the following examples.

Example 1

var myArray = [20, 30, 40, 50];
for (var i = 0; i <= myArray.length - 1; i++) {
  document.write(
    "The value at the index location " + i + " is " + myArray[i] + " <br/>"
  );
}

The preceding code declares an array with 4 values. The for loop is used that starts the index value "i" from 0 until the length of "myArray" and the index location is incremented by 1.

The written property of the document object displays the values at the index location that is implemented using myArray[i], and an HTML Break is used so that the value of each index location is displayed in a different line.

Example 2

var myevenNumbersArray = [];
for (var i = 0; i <= 5; i++) {
  myevenNumbersArray[i] = i * 2;
}
for (var i = 0; i < myevenNumbersArray.length; i++) {
  document.write(myevenNumbersArray[i] + "<br/>");
}

The preceding code prints all the even numbers stored in the array. But this time, we are adding the values to the array dynamically. We have used a for loop to do this. At the very first, we have declared an array whose size is not defined. So, it means that it can contain as many values as we want. We have used a for loop starting from 0 and going to 5. The value of the index location is multiplied by 2 each time the interpreter iterates through the loop. So, 5 values will be stored in the array, in other words, 0, 2, 4, 6, 8, and 10.

And now, using a for loop again, we display the values using the document. Write function.

Example 3

Using the Push and Pop methods of an array,

• Push()- It inserts the value at the last index location of the array or simply at the end of the array.
• Pop()- It removes the value from the last index of the array and also returns it.

var myevenNumbersArray = [];
for (var i = 0; i <= 5; i++) {
  myevenNumbersArray.push(i * 2);
}
for (var i = 0; i <= 5; i++) {
  document.write(myevenNumbersArray.pop() + "<br/>");
}

This is the same code as explained above in Example 2, but the only difference is that we have used the push() and pop() methods in this. In the first for loop, the push() method inserts the value at the end of the array, and in the second for loop, it shows the value in reverse order because the pop() method removes the values from the last until the first and also returns it.

Example 4

Using the Unshift() and Shift() methods of arrays.

• Unshift()- It inserts the value at the first index location of the array or simply at the start of the array.
• Shift()- It removes the value from the first index of the array and also returns it.

// using unshift method with the array
var myArray = [2, 3];
myArray.push(4);
myArray.unshift(1); //this method adds the value to the starting of array
document.write(myArray + "<br/>");

//using shift method with the array
var myArray1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var lastElement = myArray1.pop();
var firstElement = myArray1.shift(); //this method removes the value from the starting of array and returns it
document.write("Last Element is : " + lastElement + "<br/>");
document.write("First Element is : " + firstElement + "<br/>");

The preceding code is very easy and straightforward. I have commented on the code in a consistent manner. You can easily understand.

In case of any queries, please comment below.