Array in JavaScript

Array
An Array is a collection of multiple values stored in a single variable.

const fruits = ["Apple", "Mango", "Orange"];

Enter fullscreen mode Exit fullscreen mode

Here, fruits contains three values.

Why Do We Need Arrays?
Without an array, you would write:

let fruit1 = "Apple";
let fruit2 = "Mango";
let fruit3 = "Orange";

Enter fullscreen mode Exit fullscreen mode

Using an array:

const fruits = ["Apple", "Mango", "Orange"];

Enter fullscreen mode Exit fullscreen mode

This makes the code shorter and easier to manage.

Array Index
Each value in an array has an index. The index always starts from 0.

Index:   0        1         2
        -------------------------
Array:  Apple   Mango   Orange

Enter fullscreen mode Exit fullscreen mode

Accessing Array Elements
Use the index number to access a value.

const fruits = ["Apple", "Mango", "Orange"];

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

Enter fullscreen mode Exit fullscreen mode

Changing an Array Element
You can update any value using its index.

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

Enter fullscreen mode Exit fullscreen mode

Finding the Length of an Array
Use the “length” property.

const fruits = ["Apple", "Mango", "Orange"];
console.log(fruits.length);
// Output: 3

Enter fullscreen mode Exit fullscreen mode

Adding Elements

1. push() – Add at the End

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

Enter fullscreen mode Exit fullscreen mode

1. unshift() – Add at the Beginning

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

Enter fullscreen mode Exit fullscreen mode

Removing Elements

1. pop() – Remove from the End

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

Enter fullscreen mode Exit fullscreen mode

1. shift() – Remove from the Beginning

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

Enter fullscreen mode Exit fullscreen mode

Common Array Methods

1. includes() – Checks whether an element exists.

const fruits = ["Apple", "Mango", "Orange"];
console.log(fruits.includes("Mango"));
// Output: true

Enter fullscreen mode Exit fullscreen mode

1. indexOf() – Returns the index of an element.

const fruits = ["Apple", "Mango", "Orange"];
console.log(fruits.indexOf("Orange"));
// Output: 2

Enter fullscreen mode Exit fullscreen mode

1. join() – Joins all elements into a single string.

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

Enter fullscreen mode Exit fullscreen mode

1. reverse() – Reverses the array.

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

Enter fullscreen mode Exit fullscreen mode

1. sort() – Sorts the array.

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

Enter fullscreen mode Exit fullscreen mode

Array with Different Data Types
An array can store different types of values.

const data = ["Pranay", 21, true, 95.5];
console.log(data);

Enter fullscreen mode Exit fullscreen mode

Nested Arrays
An array can also contain another array.

const numbers = [
    [1, 2],
    [3, 4]
];

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

Enter fullscreen mode Exit fullscreen mode