Javascript Basic – How Array works in Javascript

Javascript Array

An array is a data structure where you can organize so many data under a single variable sequentially. An array is an object with a non-primitive/reference data type In the array, data are sorted against their index number. When you have a list of items, storing them in a single variable could trouble you rather than storing them in an array.

Declaring Array

Arrays are a crucial part of programming in JavaScript, providing a way to store and access a collection of values using a single variable. In JavaScript, an array is declared using square brackets [] and can contain any number of values of any data type.

Literal Process

The simple and handy process of declaring an Array:-

Example:

var car1 = 'BMW';
var car2 = 'Audi';
var car3 = 'Skoda';
 
var cars = ['BMW', 'Audi', 'Skoda']; // Storing three variables in one.
 
var arr = [1, 2, 3, 4, 5, 6];

Note: You can also create an array instantly and provide the elements.

var cars = [];
cars[0] = 'BMW';
cars[1] = 'Audi';
cars[2] = 'Skoda';

>>> [ 'BMW', 'Audi', 'Skoda' ]

Note: Another way to construct an Array.

var arr2 = Array(1, 2, 3, 4);

Array Accessing and Overwriting

We can access an array by array name and index number. Usually, the index number starts from 0.

Example:

var workers = ['John', 'Alexa', 'Jessy']; //
console.log(workers[1]); // Accessing array element 2
 
workers[0] = 'Tony'; // Updating array element 1
workers[3] = 'Tuco'; // Adding array element 4

Output:

Alexa
['Tony', 'Alexa', 'Jessy', ‘Tuco’];

Array Traversing

Array traversing means accessing all the elements of an array. You can traverse an array by using a for loop or a while loop.

Though an array is an object so we can access its properties by using “dot notation”. We have to access “length” properties to find out how many items are in the array.

Example:

var arr = [1, 2, 3, 4, 5, 6];
var l = arr.length;

Output:

6

Example:

Now traversing an array looks like

var arr = [1, 2, 33, 4, 45, 26];
var l = arr.length;
for (var i=0; i<l; i++){
   console.log(arr[i]);
}

Output:

1
2
33
4
45
26

By traversing an array you can make any operation you want.

Example:

var arr = [1, 2, 33, 4, 45, 26];
var l = arr.length;
for (var i=0; i<=l-1; i++){
   arr[i] += 5;
}
console.log(arr);

Output:

[ 6, 7, 38, 9, 50, 31 ] // Adding 5 with every element of arr

To add a new item from the beginning of the array

We will use the unshift( ) method to insert data from the beginning of an Array.

Example:

var arr = [1, 2, 33, 4, 45, 26];
arr.unshift(12);
console.log(arr);

Output:

[12, 1, 2, 33, 4, 45, 26];

To add a new item from the ending of the array

We will use the push( ) method to insert data from the ending of an Array.

Example:

var arr = [1, 2, 33, 4, 45, 26];
arr.push(12);
console.log(arr);

Output:

[1, 2, 33, 4, 45, 26, 12];

To remove a new item from the ending of the array

We will use the pop( ) method to insert data from the ending of an Array.

Example:

var arr = [1, 2, 33, 4, 45, 26];
arr.pop();
console.log(arr);

Output:

[1, 2, 33, 4, 45];

To remove a new item from the beginning of the array

We will use the shift( ) method to insert data from the ending of an Array.

Example:

var arr = [1, 2, 33, 4, 45, 26];
arr.shift();
console.log(arr);

Output:

[2, 33, 4, 45, 26];

Length of an Array

The length of an array defines the total number of elements of the array whether it is defined, undefined or null.

Example:

var arr = [1, 2, 33, null, undefined, 26];
var l = arr.length;
console.log(l);

Output:

6

Searching any data in an Array

If we want to find any available data in the array, we have to traverse the array in such a way.

Example:

var arr = [1, 2, 33, 4, 45, 26];
var find = 26;
var isFound = false;
for(var i=0; i<arr.length; i++){
    if (arr[i] == find){
        console.log('Data found at index ' + i);
        isFound = true;
        break;
    }
}
if(!isFound){
    console.log('Data not found.');
}

Output:

Data found at index 5

Multidimensional array

Multidimensional arrays are not directly provided in JavaScript. Array inside another array as an element is said as a Multidimensional array. So multi-dimensional arrays in JavaScript are known as arrays inside another array.

Example:

var mld_arr = [
    [1,2,3,4,5],
    ['Jhony', 'Ricky', 'Samuel']
]
console.log(mld_arr[0]);
console.log(mld_arr[1]);
console.log(mld_arr[1][1]); // Accessing the 1th index of 1th index of array mld_arr[]

Output:

[1, 2, 3, 4, 5]
['Jhony', 'Ricky', 'Samuel']
Ricky

Note:  Multidimensional array allows you to conduct matrix operations.

Example:

var matrix = [
   [11, 12, 13, 14],
   [21, 22, 23, 24],
   [31, 32, 33, 34],
   [41, 42, 43, 44]
] //It's 4*4 Matrix
 
console.log(matrix[0][0]);
console.log(matrix[1][1]);
console.log(matrix[2][2]);
console.log(matrix[3][3]);

Output:

11
22
33
44

Array Methods

We have a lot of array methods which will be discussed later in the advanced section. Here we will discuss some basic array methods.

Example:

var arr = [4, 5, 8, 6];
var arr2 = [12, 3, 6, 9];
 
console.log(arr.reverse()); 
console.log(arr.join(' ')); 

var arr3 = arr.concat(arr2);
console.log(arr3); 

var arr4 = Array.from(arr);
console.log(arr3);
 
arr.fill(null)
console.log(arr);

Output:

[ 6, 8, 5, 4 ]
6 8 5 4
[6, 8, 5, 4, 12, 3, 6, 9]
[ 4, 5, 8, 6 ]
[ null, null, null, null ]