Array in JavaScript

An array is a list of data ordered index wise. The data can be of any type. So 0th data can be a string, 1st can be number, 2nd can be empty and 3rd can be an object and so on.
JavaScript has a predefined Array object, which provides methods to manipulate arrays in many ways. We will be going to learn about it in this chapter.

Creating an Array

There are three ways to create an array. All 3 following syntaxes are equivalent.


let arr1 = new Array(element0, element1, element2,..., elementN);

let arr2 = Array(element0, element1, element2,..., elementN);

// Array literals
let arr3 = [element0, element1, element2,..., elementN];
                    

element0, element1, element2,..., elementN are the values. These values can be of any type.
The third syntax ( with brackets ) is called Array literals. Most of the times, you will be using this syntax.
Let us create an array with all the syntax.


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

let arr2 = ["a", "b", "c", "d"];

let arr3 = ["a", 1, undefined, null, "", 23, -1];

let arr4 = Array(1, 2, 3, 4);
                    

As you can see, you can create arrays with string, number or any data type. You can add objects also. We haven't learned the objects. We will see it in the next chapter.
We have used Array literals to create the array but you can use any of the above methods.

Access Values

Once you have created the array, you will need to access the values.
To access the vaule syntax is: arrayName[index].
In above syntax, remember that index is 0 based.


let array1 = [1, "two", 3];

let firstValue = array1[0];
console.log(firstValue);
//output: 1

console.log(array2[1]);
//output: two

console.log(array1[2]);
//output: 3

console.log(array[3]);
//output: undefined
                    

As you can see, to get the first value of array, array1[0] is used. The 0th index will return the first value.
Now, if you try to access the 4th value, which is actually not in the array, then it will return undefined.

Empty Array

To create an array which has no values, refer to the following syntax.


let arr = [];

let arr1 = new Array();

let arr2 = Array();
                    

All the above statements will create an empty array. But most of the times, you will be using array literals.

Add value to an array

When you create an array, no matter it is empty or not, you will need to add value to the array. To add value, refer to the following syntax.


let arr = [1,2,3];
arr[3] = "4";
console.log(arr);
//output: 1,2,3,"4"

let emptyArray = [];
emptyArray[0] = 1;
emptyArray[2] = 2;
console.log(emptyArray);
//output: 1,undefined,2
                    

In above code, arr[3]="4"; adds "4" at index 3 of arr.
At second part, emptyArray[0] = 1; will add 1 at index 0 of emptyArray. And emptyArray[2] = 2; will add 2 at index 2 of emptyArray. So at index 1, undefined is added automatically.
Just like above example where we added value at index 2 instead of 1, there will be many times, when you will not know what is the last index so that you add the new value at last index.
There are two ways to add value at last.

Replace values

When you need to replace a value at an index where a value is already added, refer the following code.


let emptyArray = [];
emptyArray[0] = 1;
emptyArray[2] = 2;
console.log(emptyArray);
//output: 1,undefined,2

emptyArray[1] = 1;
emptyArray[2] = 3;
console.log(emptyArray);
//output: 1,1,3
                    

As you can see from the above code, we have added value at index 2. Then we replaced the value at index 2 and also add a new value at index 1.

length of an array

length property is one of the most thing used in array. length gives the length of the array. Let us see, how to use it.


let arr = [0,1,2,3,4,5];
let arrLength = arr.length;
console.log(arrLength);
//output: 6

let emptyArray = [];
emptyArray[0] = 0;
emptyArray[4] = 4;
console.log(emptyArray);
//output: 0, undefined, undefined, undefined, 4
console.log(emptyArray.length);
//output: 5
                    

The first example is straight forward. arr has 6 values and arr.length returns 6. But in second example, the first value is at index 0 and second value is at index 4. So when you see the array, it has undefined at index 1, 2 and 3. So when you check the length, it will be 5. Because it is the length of the array.

Empty Array with length

When you need to create an array with length but empty, please refer the following code.


let arr = [];
arr.length = 5;
console.log(arr);
//output: (5) [empty x 5]
//above output can be interpreted as [undefined, undefined, undefined, undefined, undefinde]

let arr1 = Array(5);
console.log(arr1);
//output: (5) [empty x 5]

let arr2 = new Array(5);
console.log(arr2);
//output: (5) [empty x 5]

let arr3 = new Array(5, 4);
console.log(arr3);
//output: [5, 4]

let arr4 = Array("5");
console.log(arr4);
//output: ["5"]
                    

Most of the times, you will be using the first method ( array literals ) to create an empty array.
The second and third one is confusing. To be clear, if you pass single parameter ( strictly number ) to Array() or new Array(), it will take it as a length and will create an empty array that long. If you pass other parameters than a number or more than one parameter, then it will take it as a value and will create an array containing passed parameters.
This is an important concept and please practice it with different cases.

Add value at last

When we don't know the last index of an array, we can use length of the array to add value at last.


let arr = ["3","2",1];
arr[arr.length] = 6;
arr[arr.length] = 7;
console.log(arr);
//output: ["3", "2", 1, 6, 7]
                    

Changing length

You can directly play with length of the array and by doing that, you can change the array.


let arr = [];
arr.length = 10;
console.log(arr);
//output: (10) [empty x 10]
console.log(arr.length);
//output: 10

let arr1 = [1,2,3,4,5];
console.log(arr1.length);
//output: 5
arr1.length = 3;
console.log(arr1);
//output: [1,2,3]

let arr2 = [1,2];
console.log(arr2.length);
//output: 2
arr2.length = 4;
console.log(arr2);
//output: [1,2, undefined, undefined]
                    

From the above code, we can determine that if you assign bigger length then actually array has, then undefined will be added to make the array length as per your assigned value.
And if you assign smaller length then array has, the last values will be removed.

Conclusion

In this section, you have learned about the arrays and its basic usage. The array is most widely used in JavaScript. Please practice it.
In next section, you will learn Array methods in JavaScript.