Understanding Arrays in JavaScript

When we start learning programming, we usually store values in variables.

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

This works fine for a few values.
But what if we need to store 20 fruits? 100 student marks? 1000 tasks?

Creating separate variables for each value becomes messy and hard to manage.

This is where arrays help us.

What is an Array?

An array is a collection of data elements that can be of the same or different types. In an array, the individual elements of data are referred to as elements.

Example:

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

Why Do We Need Arrays?

Arrays help us when we want to store multiple values together.

Common examples:

• List of fruits

• Student marks

• Shopping list

• Tasks in a to-do list

• Comments on a post

Example:

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

Instead of 5 variables, we store everything in one array.

How to Create an Array

In JavaScript, arrays can be created using multiple ways:

1. square brackets [] (beginner-friendly)

Example:

let fruits = ["Apple", "Banana", "Mango"];
let numbers = [10, 20, 30, 40];
let data = ["Ashish", 22, true];

1. Using the Array Constructor. You can also use the new Array() constructor.

• Empty Array

const emptyArrayConstructor = new Array();

• Array with initial values

const fruitsConstructor = new Array("apple", "banana", "cherry");

• Array with a specified length: If a single number is passed, it creates an array with that number of empty slots, not a single-element array.

const newArray = new Array(3); 
// Creates an array with 3 empty slots, not [3]
// But accessing newArray[0] gives undefined.

• Array.of(): The Array.of() static method creates a new Array instance from a variable number of arguments, regardless of the number or type of the arguments.

const singleNumberArray = Array.of(8); // Creates [8]
const multipleElementsArray = Array.of(1, 2, 3); // Creates [1, 2, 3]

• Array.from(): The Array.from() static method creates a new, shallow-copied Array instance from an iterable or array-like object.

// Create an array from a string
const fromString = Array.from("word"); // Creates ["w", "o", "r", "d"]

// Create an array with sequential numbers
const range = Array.from({ length: 5 }, (v, i) => i); // Creates [0, 1, 2, 3, 4]

Understanding Array Index

Every element in an array has a position number called an index.

Array indexing starts from 0.

Example:

const arr = ['Apple', 'Banana', 'Mango'];


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

Accessing Array Elements

If we want a specific element of an array we can access it by its index using square brackets.

Example:

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


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

So,

• fruits[0] is the first element

• fruits[1] is the second element

• fruits[2] is the third element

Updating Array Elements

We can use the index of the element to update the array.

Example:

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

fruits[1] = "Orange";

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

In this case we replaced Banana with Orange.

Array Length Property

Every array has a built-in property called length. This property tells us how many elements there are inside of the array.

Example:

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

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

Looping Through an Array

If we don't want to manually print each element, we can use a loop.

Example:

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

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

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

Explanation:

• Start at index 0

• Continue until fruits.length

• Print each element.

This allows us to easily work with arrays of any size.

Visualizing an Array

You can think of an array like boxes placed next to each other.

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

Or like memory blocks:

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

Each box has:

• a position (index)

• a value

Assignment

Try solving the following exercises:

• Define an array of 5 of your favourite movies

• Print the first and the last movies

• Update the second movie in the array and print the array

• Use a for loop to print all the movies

Final Thoughts

Arrays are one of the most important data structures in JavaScript.

They allow us to:

• store a collection of data

• access that collection using an index

• alter that collection

• Easily iterate through that collection

After learning the basics, you can learn to use the various array methods. Learning the basics will help you understand the array methods more easily. Master the basics first, and your future learning will be easier!

Follow the JS series to learn more about Javascript.