JavaScript Array

An array in JavaScript is a special variable that can hold multiple values at once. Arrays are used to store lists of items, and each item is accessed by its index.

1. Creating Arrays

You can create arrays in several ways:

Using an Array Literal

const fruits = ['Apple', 'Banana', 'Cherry'];

Using the Array Constructor

const numbers = new Array(1, 2, 3, 4, 5);

Note: Using array literals is more common and preferred for simplicity.

2. Accessing Array Elements

Array elements are accessed using their index, starting from 0.

const fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]);  // Output: Apple
console.log(fruits[2]);  // Output: Cherry

3. Modifying Arrays

You can change elements by accessing their index:

const fruits = ['Apple', 'Banana', 'Cherry'];
fruits[1] = 'Blueberry';  
console.log(fruits);  // Output: ['Apple', 'Blueberry', 'Cherry']

4. Array Methods

JavaScript provides various methods to work with arrays:

push(): Adds a new element to the end of the array.

const fruits = ['Apple', 'Banana'];
fruits.push('Cherry');
console.log(fruits);  // Output: ['Apple', 'Banana', 'Cherry']

pop(): Removes the last element from the array.

const fruits = ['Apple', 'Banana', 'Cherry'];
fruits.pop();
console.log(fruits);  // Output: ['Apple', 'Banana']

shift(): Removes the first element from the array.

const fruits = ['Apple', 'Banana', 'Cherry'];
fruits.shift();
console.log(fruits);  // Output: ['Banana', 'Cherry']

unshift(): Adds a new element to the beginning of the array.

const fruits = ['Banana', 'Cherry'];
fruits.unshift('Apple');
console.log(fruits);  // Output: ['Apple', 'Banana', 'Cherry']

splice(): Adds/removes elements from the array.

const fruits = ['Apple', 'Banana', 'Cherry'];
fruits.splice(1, 1, 'Blueberry');  
console.log(fruits);  // Output: ['Apple', 'Blueberry', 'Cherry']

slice(): Returns a shallow copy of a portion of an array.

const fruits = ['Apple', 'Banana', 'Cherry'];
const citrus = fruits.slice(1, 3);  
console.log(citrus);  // Output: ['Banana', 'Cherry']

5. Looping Through Arrays

Using a for Loop

const fruits = ['Apple', 'Banana', 'Cherry'];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

Using forEach()

const fruits = ['Apple', 'Banana', 'Cherry'];
fruits.forEach(function(item) {
    console.log(item);
});

Using for...of

const fruits = ['Apple', 'Banana', 'Cherry'];
for (const fruit of fruits) {
    console.log(fruit);
}

6. Array Properties

• length: Returns the number of elements in the array.

  const fruits = ['Apple', 'Banana', 'Cherry'];
  console.log(fruits.length);  // Output: 3
  

  Try It Now

7. Multidimensional Arrays

JavaScript supports arrays of arrays (multidimensional arrays).

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

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

8. Common Array Operations

Concatenation

const arr1 = [1, 2];
const arr2 = [3, 4];
const result = arr1.concat(arr2);
console.log(result);  // Output: [1, 2, 3, 4]

Finding Elements

• indexOf(): Returns the first index of the specified element.

  const fruits = ['Apple', 'Banana', 'Cherry'];
  console.log(fruits.indexOf('Banana'));  // Output: 1
  

  Try It Now

• includes(): Checks if an array contains a specified element.

  const fruits = ['Apple', 'Banana', 'Cherry'];
  console.log(fruits.includes('Banana'));  // Output: true
  

  Try It Now

Summary

• Arrays store multiple values in a single variable and can be accessed by index.
• JavaScript provides various methods to manipulate arrays, including adding, removing, and iterating over elements.
• Arrays can contain different data types, including other arrays (multidimensional arrays).
• Arrays are versatile and a crucial part of handling collections of data in JavaScript.