10. Arrays in JavaScript.md

10 Arrays

Arrays are used to store multiple values in a single variable. They help you keep related data together in an ordered list.

In JavaScript, arrays are zero-indexed, which means the first value starts at index 0.

10.1 Introduction to Arrays

An array is a special type of object used to store multiple values in a single place. Each value in an array is called an element.

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

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

Note: Arrays can store different types of values, but it is usually better to keep similar values together for better readability.

10.1.1 Store Multiple Values in Arrays

You can store multiple values in an array by separating them with commas inside square brackets [].

let numbers = [10, 20, 30, 40];
let names = ["Jagan", "John", "Mike"];

console.log(numbers); // [10, 20, 30, 40]
console.log(names); // ["Jagan", "John", "Mike"]

10.1.2 Find Length of an Array

You can find the number of elements in an array using the .length property.

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

console.log(fruits.length); // 3

Note: For a non-empty array, the length is always one more than the highest index.

10.1.3 Empty Arrays

An empty array is an array that does not contain any elements.

let fruits = [];

console.log(fruits); // []
console.log(fruits.length); // 0

Note: You can add elements to an empty array later.

10.1.4 Arrays with Mixed Data Types

In JavaScript, an array can store values of different data types.

let mixedArray = ["Jagan", 25, true, null];

console.log(mixedArray); // ["Jagan", 25, true, null]

Note: Although JavaScript allows mixed data types in an array, keeping similar values together usually makes the code easier to understand.

10.2 Nested Arrays / Multi-Dimensional Arrays

A nested array is an array that contains another array inside it. This is often called a multi-dimensional array.

let myArray = [
  ["John", 25],
  ["Mike", 30],
];

console.log(myArray);

Note: Nested arrays are useful when you want to group related values inside a larger array.

10.3 Access Array Data with Index

You can access array elements using bracket notation and their index number.

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

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Orange

Note: Array indexing starts from 0, not 1.

10.3.1 Access the Last Element of an Array

You can access the last element of an array using array.length - 1.

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

console.log(fruits[fruits.length - 1]); // Orange

Note: Since the index starts from 0, the last index is always one less than the length of the array.

10.4 Modify Array Data with Index

You can change an array element by assigning a new value to its index.

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

fruits[1] = "Mango";

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

Note: Arrays are mutable, which means their values can be changed after creation.

10.5 Access Multi-Dimensional Arrays with Indexes

To access values inside a nested array, use multiple indexes.

let myArray = [
  ["John", 25],
  ["Mike", 30],
];

console.log(myArray[0]); // ["John", 25]
console.log(myArray[0][0]); // John
console.log(myArray[1][1]); // 30

Note: The first index selects the inner array, and the second index selects the value inside it.

10.6 Manipulate Arrays with push()

The push() method adds one or more elements to the end of an array.

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

fruits.push("Orange");

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

Note: push() changes the original array.

10.7 Manipulate Arrays with pop()

The pop() method removes and returns the last element of an array.

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

let removedFruit = fruits.pop();

console.log(removedFruit); // Orange
console.log(fruits); // ["Apple", "Banana"]

Note: pop() changes the original array and returns the removed element.

10.8 Manipulate Arrays with shift()

The shift() method removes the first element from an array.

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

fruits.shift();

console.log(fruits); // ["Banana", "Orange"]

Note: shift() changes the original array.

10.9 Manipulate Arrays with unshift()

The unshift() method adds one or more elements to the beginning of an array.

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

fruits.unshift("Apple");

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

Note: unshift() changes the original array.

10.10 Mutate an Array Declared with const

An array declared with const cannot be reassigned, but its elements can still be changed.

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

fruits[0] = "Mango";

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

Note: const prevents reassignment of the array reference, but it does not make the array immutable.

10.10.1 Reassign vs Mutate an Array Declared with const

When an array is declared with const, you cannot reassign it to a completely new array. However, you can still change the existing elements inside the array.

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

fruits[1] = "Mango"; // allowed

/*
fruits = ["Grapes", "Pineapple"]; // Not allowed
*/

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

Note: const protects the array reference, not the values stored inside the array.

10.11 Manipulate Arrays with splice()

The splice() method is used to add, remove, or replace elements in an array at a specific index.

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

fruits.splice(1, 1, "Mango");

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

Note: In splice(start, deleteCount, item1, item2, ...), the first value is the starting index, and the second value is the number of elements to remove.

10.12 Copy Part of an Array with slice()

The slice() method is used to copy a portion of an array into a new array.

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

let newFruits = fruits.slice(1, 3);

console.log(newFruits); // ["Banana", "Orange"]

Note: slice() does not change the original array.