JavaScript Arrays 101

Introduction

Imagine you have a notebook where you write down a list of tasks for the day. Instead of storing each task in a separate notebook, you write them all in one notebook with numbers: Task 1, Task 2, Task 3, etc. An array in JavaScript works the same way. It is a single container that holds multiple values in a specific order.

In this blog, we will learn what arrays are, how to create them, how to access and modify their values, and how to loop through them.

---

1. What Arrays Are and Why We Need Them

An array is a collection of values stored in a single variable. Each value in the array is called an element, and each element has a position called an index.

Why Do We Need Arrays?

Without arrays, storing multiple related values would be messy:

Without an array (repetitive and hard to manage):

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
let fruit4 = "Orange";
let fruit5 = "Grapes";

console.log(fruit1);
console.log(fruit2);
console.log(fruit3);
// This gets annoying quickly with many values!

With an array (clean and manageable):

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

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
// Much cleaner!

Arrays make your code cleaner, easier to manage, and easier to work with groups of related data.

Real-Life Examples

Think of arrays as lists in real life:

• A shopping list: Milk, Bread, Eggs, Vegetables

• Student marks: 85, 90, 78, 92, 88

• Days of the week: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday

Basic Array Concepts

Element: A single value in the array

["Apple", "Banana", "Mango"]
   ^        ^         ^
Elements

Index: The position of an element (starts from 0, not 1)

["Apple", "Banana", "Mango"]
   0        1        2
Indices

---

2. How to Create an Array

There are two main ways to create an array in JavaScript.

Method 1: Using Square Brackets (Recommended)

The most common way to create an array is using square brackets []:

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

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

Example 1: Array of Numbers

let marks = [85, 90, 78, 92, 88];

console.log(marks); // Output: [85, 90, 78, 92, 88]

Example 2: Array of Mixed Types

Arrays can contain different types of values:

let student = ["Ashish", 20, true, 450];
// String, number, boolean, number all in one array

console.log(student); // Output: ["Ashish", 20, true, 450]

Example 3: Empty Array

You can create an empty array and add values later:

let emptyArray = [];

console.log(emptyArray); // Output: []

Method 2: Using the Array Constructor

You can also use the new Array() constructor, but this is less common:

let fruits = new Array("Apple", "Banana", "Mango");

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

We will stick with square brackets as it is simpler and more popular.

---

3. Accessing Elements Using Index

To get a specific element from an array, you use the element's index inside square brackets.

Important: Indexing Starts from 0

The first element is at index 0, the second element is at index 1, and so on.

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

// Index:     0        1          2        3         4

console.log(fruits[0]); // Output: Apple
console.log(fruits[1]); // Output: Banana
console.log(fruits[2]); // Output: Mango
console.log(fruits[3]); // Output: Orange
console.log(fruits[4]); // Output: Grapes

Example 1: Accessing Different Elements

let marks = [85, 90, 78, 92, 88];

console.log("First mark: " + marks[0]); // Output: First mark: 85
console.log("Second mark: " + marks[1]); // Output: Second mark: 90
console.log("Last mark: " + marks[4]); // Output: Last mark: 88

Example 2: Using Array Values in Calculations

let prices = [100, 200, 150, 300, 250];

let total = prices[0] + prices[1] + prices[2];
console.log("Total of first three items: " + total); // Output: Total of first three items: 450

What Happens with Invalid Index?

If you try to access an index that does not exist, you get undefined:

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

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

Visual Representation of Array Indexing

Array: ["Apple", "Banana", "Mango", "Orange", "Grapes"]

Index:   0         1         2         3         4
        |----------|----------|----------|----------|
Value: Apple    Banana     Mango     Orange    Grapes

Accessing:
fruits[0] = "Apple"
fruits[2] = "Mango"
fruits[4] = "Grapes"

---

4. Updating Elements

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

Basic Syntax

arrayName[index] = newValue;

Example: Updating a Single Element

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

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

fruits[1] = "Orange"; // Change Banana to Orange

console.log("After: " + fruits[1]); // Output: After: Orange
console.log("All fruits: ", fruits); // Output: All fruits: ["Apple", "Orange", "Mango"]

---

5. Array Length Property

Every array has a length property that tells you how many elements are in the array.

Syntax

arrayName.length

Example: Getting Array Length

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

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

The array has 3 elements, so the length is 3.

---

6. Basic Looping Over Arrays

Looping through an array means going through each element one by one. This is very useful when you want to do something with every element.

Method 1: Using for Loop

The most traditional way to loop through an array:

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

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Output:

Apple
Banana
Mango

Breaking Down the for Loop

for (let i = 0; i < fruits.length; i++) {
     ^    ^  ^      ^
     |    |  |      |
     |    |  |      +-- Increment i by 1 each time
     |    |  +--------- Continue while i is less than array length
     |    +------------ Start with i = 0
     +----------------- Create a loop variable i
}

Method 2: Using forEach

There is a simpler way using forEach(). We will learn this in the "Array Methods" blog:

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

fruits.forEach(function(fruit) {
  console.log(fruit);
});

Or with arrow functions:

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

fruits.forEach(fruit => console.log(fruit));

Both produce the same output as the for loop.

Output:

Apple
Banana
Mango

---

---

Visual Array Representation

Memory Storage Visualization

Array: let students = ["Ashish", "Priya", "Rahul"];

Memory:
┌─────────────────────────────────────┐
│ students                            │
├─────────────────────────────────────┤
│ [0] "Ashish"  (index 0)             │
├─────────────────────────────────────┤
│ [1] "Priya"   (index 1)             │
├─────────────────────────────────────┤
│ [2] "Rahul"   (index 2)             │
└─────────────────────────────────────┘

students.length = 3

---

Summary

1. Arrays are collections of values stored in a single variable

2. Create arrays using square brackets: let arr = [value1, value2]

3. Access elements using index (starting from 0): arr[0]

4. Update elements by assigning new values: arr[0] = newValue

5. Array length tells you how many elements are in the array: arr.length

6. Last element is always at index arr.length - 1

7. Loop through arrays using a for loop to process each element

8. Indexing starts at 0, not 1

9. Arrays make managing multiple related values much easier