JavaScript Arrays

When working with JavaScript, we often need to store multiple values. For example, a list of fruits, student marks, or tasks in a to-do list.

If we store each value separately, our code becomes messy and harder to manage.

This is where arrays help.

In this guide, we will learn:

• What arrays are and why we need them

• How to create an array

• Accessing elements using index

• Updating elements

• Array length property

• Basic looping over arrays

Chapter 1: What Are Arrays?

An array is a collection of values stored in a single variable.

These values are stored in order, and each value has a position called an index.

Real-Life Example

Imagine you want to store your favorite fruits.

Instead of creating many variables:

let fruit1 = "Apple"
let fruit2 = "Mango"
let fruit3 = "Banana"

This becomes difficult to manage.

Instead, we can store them in one array.

const fruits = ["Apple", "Mango", "Banana"]

console.log(fruits)

// Output
// ["Apple", "Mango", "Banana"]

Now all fruits are stored in one place.

Chapter 2: Why Do We Need Arrays?

Arrays help us:

• store multiple values in one variable

• organize data

• process lists easily

• loop through data efficiently

Without Arrays

let mark1 = 85
let mark2 = 90
let mark3 = 88

With Arrays

const marks = [85, 90, 88]

console.log(marks)

// Output
// [85, 90, 88]

Arrays make the code cleaner and easier to manage.

Chapter 3: How to Create an Array

Arrays are created using square brackets [].

Syntax

const arrayName = [value1, value2, value3]

Example

const colors = ["Red", "Green", "Blue"]

console.log(colors)

// Output
// ["Red", "Green", "Blue"]

Arrays can store many types of values:

• numbers

• strings

• booleans

Example:

const data = ["Rahul", 22, true]

console.log(data)

// Output
// ["Rahul", 22, true]

Chapter 4: Understanding Array Index

Each value in an array has an index number.

Important rule:

Array indexing starts from 0

Example:

const fruits = ["Apple", "Mango", "Banana"]

Visual Representation

Index:   0        1        2
        ----------------------
Value:  Apple   Mango   Banana

Chapter 5: Accessing Elements Using Index

We access elements using the index number inside square brackets.

Example

const fruits = ["Apple", "Mango", "Banana"]

console.log(fruits[0])
console.log(fruits[1])
console.log(fruits[2])

// Output
// Apple
// Mango
// Banana

Explanation

fruits[0] → Apple
fruits[1] → Mango
fruits[2] → Banana

Chapter 6: Updating Array Elements

We can update values in an array using the index.

Example

const fruits = ["Apple", "Mango", "Banana"]

fruits[1] = "Orange"

console.log(fruits)

// Output
// ["Apple", "Orange", "Banana"]

What happened?

Before:

["Apple", "Mango", "Banana"]

After update:

["Apple", "Orange", "Banana"]

The value at index 1 was changed.

Chapter 7: Array Length Property

The length property tells us how many elements exist in the array.

Example

const fruits = ["Apple", "Mango", "Banana"]

console.log(fruits.length)

// Output
// 3

Visual

["Apple", "Mango", "Banana"]

Total elements = 3

Finding the Last Element

A common trick is:

const fruits = ["Apple", "Mango", "Banana"]

console.log(fruits[fruits.length - 1])

// Output
// Banana

Chapter 8: Looping Through Arrays

Often we need to process every element in an array.

For this we use a for loop.

Example

const fruits = ["Apple", "Mango", "Banana"]

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

// Output
// Apple
// Mango
// Banana

How the loop works

i = 0 → fruits[0] → Apple
i = 1 → fruits[1] → Mango
i = 2 → fruits[2] → Banana

Chapter 9: Memory-Style Representation of Array

Arrays store values in ordered memory blocks.

Example array:

const numbers = [10, 20, 30]

Visual diagram:

Index:     0      1      2
        ----------------------
Memory: | 10 | 20 | 30 |

Each value occupies a position in memory.

Chapter 10: Assignment Practice

Try this exercise.

Step 1: Create an Array

const movies = ["Inception", "Interstellar", "Avengers", "Batman", "Joker"]

console.log(movies)

// Output
// ["Inception", "Interstellar", "Avengers", "Batman", "Joker"]

Step 2: Print First Element

console.log(movies[0])

// Output
// Inception

Step 3: Print Last Element

console.log(movies[movies.length - 1])

// Output
// Joker

Step 4: Update One Value

movies[2] = "Spider-Man"

console.log(movies)

// Output
// ["Inception", "Interstellar", "Spider-Man", "Batman", "Joker"]

Step 5: Loop Through Array

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

// Output
// Inception
// Interstellar
// Spider-Man
// Batman
// Joker

Final Thoughts

Arrays are one of the most important concepts in JavaScript.

They allow us to:

• store multiple values

• access elements using index

• update values easily

• process lists using loops

Key concepts to remember:

Array → collection of values
Index → position of element
Index starts from 0
length → total elements
Loop → process all elements

Understanding arrays is essential before learning advanced topics like:

• array methods

• objects

• data processing

THE END