Array and Arrays Method in JavaScript

❌

Arrays

Consider a scenario where you want to store the names of 100 employees in an IT department. This can be done by creating 100 variables and storing their names. However, keeping track of 100 variables is tedious and results in inefficient memory utilization. The solution to this problem is to create an array variable to store the names of 100 employees.

An array is a collection of values stored in adjacent memory locations. These array values are referenced using a common array name. The values of an array variable must be of the same data type. These values are also referred to as elements and can be accessed using subscript or index numbers. The subscript number determines the position of a component in an array list.

JavaScript supports two types of arrays that are as follows:

• Single-dimensional array
• Multi-dimensional array

1. Single-dimensional Array:

In a single-dimensional array, the elements are stored in a single row in the allocated memory.

Syntax:

var variable_name = new array (size);

vable_name [indriaex] = 'value';

Where,

variable_name: This is the name of the variable.

size: Is the number of elements to be declared in the array.

index: This is the index position.

Different ways to declare and initialize a single-dimensional array.

// Creating a single-dimensional array

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

// Accessing elements of the array

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

console.log(fruits[1]); // Output: Banana

// Adding an element to the array

fruits.push("Grapes");

console.log(fruits); // Output: ["Apple", "Banana", "Mango", "Orange", "Grapes"]

// Removing the last element from the array

fruits.pop();

console.log(fruits); // Output: ["Apple", "Banana", "Mango", "Orange"]

// Length of the array

console.log(fruits.length); // Output: 4

2. Accessing Single-dimensional Arrays:

Array elements can be accessed by using the array name followed by the index number specified in square brackets.

i. Accessing Array Elements Without Loops

An array element can be accessed without using loops by specifying the array name followed by square brackets containing the index number.

// Creating an array

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

// Accessing elements without using a loop

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

console.log(fruits[1]); // Output: Banana

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

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

ii. Accessing an Array of Elements With Loops

JavaScript allows you to access array elements by using different loops. Thus, you can access each array element by putting a counter variable of the loop as the index of an element. However, this requires the count of elements in an array. So, the length property can be used to determine the number of elements in an array.

// Creating an array

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

// Accessing elements using a loop

for (let i = 0; i < fruits.length; i++) {

    console.log(fruits[i]);

}

3. Multi-dimensional Array

Consider a scenario where you store the employee IDs of 100 employees and their salary structure. The salary structure will include the basic salary, allowances, HRA, and the total gross salary. Now, if a single-dimensional array is used, then two separate arrays must be created for storing employee IDs and salaries. However, using a multi-dimensional array, both IDs and salaries are stored in just one array.

A multi-dimensional array stores a combination of values of a single type in two or more dimensions. These dimensions are represented as rows and columns similar to those of a Microsoft Excel sheet. A two-dimensional array is an example of a multi-dimensional array.

A two-dimensional array is an array of arrays. This means, for a two-dimensional array, first a main array is declared and then, an array is created for each element of the main array.

The syntax to declare a two-dimensional array is as follows:

Syntax:

var variable_name = new Array (size);

variable_name [index] = new Array (' value1', 'value2'..);

where,

variable_name: This is the name of the array.

index: This is the index position.

value1: This is the value in the first column.

value2: This is the value in the second column.

Example of a Two-dimensional Array:

// Creating a two-dimensional array

let matrix = [

    [1, 2, 3], // First row

    [4, 5, 6], // Second row

    [7, 8, 9] // Third row

];

// Accessing elements in a two-dimensional array

console.log(matrix[0][0]); // Output: 1 (First row, first element)

console.log(matrix[1][2]); // Output: 6 (Second row, third element)

console.log(matrix[2][1]); // Output: 8 (Third row, second element)

4. Accessing two-dimensional arrays

Multi-dimensional arrays can be accessed by using the index of the main array variable along with an index of the sub-array.

i. Accessing Array Elements Without Loops

Create a two-dimensional array that displays the employee details.

// Creating a two-dimensional array

let matrix = [

    [1, 2, 3], // First row

    [4, 5, 6], // Second row

    [7, 8, 9] // Third row

];

// Accessing elements without using a loop

console.log(matrix[0][0]); // Output: 1

console.log(matrix[0][1]); // Output: 2

console.log(matrix[0][2]); // Output: 3

console.log(matrix[1][0]); // Output: 4

console.log(matrix[1][1]); // Output: 5

console.log(matrix[1][2]); // Output: 6

console.log(matrix[2][0]); // Output: 7

console.log(matrix[2][1]); // Output: 8

console.log(matrix[2][2]); // Output: 9

ii. Accessing an Array of Elements with Loops

Create a two-dimensional array to display product details.

// Creating a two-dimensional array

let matrix = [

    [1, 2, 3], // First row

    [4, 5, 6], // Second row

    [7, 8, 9] // Third row

];

// Accessing elements using nested loops

for (let i = 0; i < matrix.length; i++) {

    for (let j = 0; j < matrix[i].length; j++) {

        console.log(matrix[i][j]);

    }

}

Array Methods

An array is a set of values grouped and identified by a single name. In JavaScript, the Array object allows you to create arrays. It provides the length property that allows you to determine the number of elements in an array. Various methods of the Array object allow access and manipulation of the array elements.

Lists the most commonly used methods of the Array object.

• Concat: Combines one or more array variables

• Join: Joins all the array elements into a string

• Pop: Retrieves the last element of an array

• Push: Appends one or more elements to the end of an array

• Sort: Sorts the array elements in alphabetical order