Skip to main content

Command Palette

Search for a command to run...

JavaScript Arrays 101

Updated
6 min read
JavaScript Arrays 101

1) What arrays are and why we need them

i) What arrays are

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

Think of an array like a numbered list.

Example :

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

This array stores three values in order.

Index Value
0 Apple
1 Banana
2 Mango

Array Index Starts From 0

One important thing to remember is that array indexing usually starts from 0 in most programming languages.

Example:

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

print(fruits[0])  # Apple
print(fruits[1])  # Banana
print(fruits[2])  # Mango

Arrays are used when we need to store and manage multiple values together instead of creating many separate variables.


ii) why we need them

1. To Store Multiple Values in One Place

Without arrays, you would need many variables.

Example without an array:

mark1 = 85
mark2 = 90
mark3 = 78

With an array:

marks = [85, 90, 78]
The array keeps related values organized in one variable.

2. To Make Code Cleaner and Simpler

Arrays reduce the number of variables in your program, making the code easier to read and maintain.

Example:

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

3. To Access Values Easily

Arrays allow you to get a value using its index (position).

Example:

marks = [85, 90, 78]
print(marks[1])   # Output: 90

//You can quickly retrieve any value from the array.

2) How to create an array

Creating an array means storing multiple values together in one variable. The values are written inside square brackets [ ] and separated by commas.

Basic Syntax

  • array_name → the name of the array

  • Values inside [ ] → the elements of the array

array_name = [value1, value2, value3]

Example 1: Array of Fruits

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

Example 2: Array of Numbers

numbers = [10, 20, 30, 40]

This array stores four numbers.

Example 3: Array of Student Marks

marks = [85, 90, 78, 92]

Here, all student marks are stored in one array.

Empty Array

items = []

You can also create an empty array and add values later.

3) Accessing elements using index

Each value in an array has a position called an index. You can access any element in the array by using its index number inside square brackets [ ].

In most programming languages, indexing starts from 0.

Example Array :

Think of an array like numbered boxes:

[ Apple ][ Banana ][ Mango ]
    0         1        2
fruits = ["Apple", "Banana", "Mango"]

Access the First Element :

print(fruits[0])

Output:
Apple

Access the Second Element

print(fruits[1])

Output:
Banana

Access the Third Element

print(fruits[2])

Output:
Mango

4) Updating elements

Updating an element means changing the value stored at a specific index in the array.

To update an element, you assign a new value to the index.

Basic Syntax :

array_name[index] = new_value
  • array_name → the array

  • index → position of the element

  • new_value → the value you want to replace it with

Step 2: Update an Element :

Imagine the second student's mark was entered incorrectly and should be 95 instead of 90.

We update the value at index 1:

marks[1] = 95

Step 3: Print the Updated Array :

marks = [85, 90, 78]

marks[1] = 95

print(marks)
//
Output

[85, 95, 78]

5) Array length property

In JavaScript, every array has a length property.
This property tells us how many elements are in the array.

It is useful when we want to know the size of the array.

Example

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

console.log(fruits.length);

//
Output
3

6) Basic looping over arrays

Sometimes we need to go through every element in an array to read or process the values. This is called looping over an array.

In JavaScript, we can use a loop to access each element one by one.

Example

Suppose we have an array of fruits:

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

We can use a for loop to print each fruit.

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

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


Output :

Apple
Banana
Mango

7) Assignment Idea : Practice with Arrays (JavaScript)

This assignment will help you practice creating arrays, accessing elements, updating values, and looping through arrays.

Task 1: Create an Array

Create an array that stores 5 of your favorite movies.

Example:

let movies = ["Inception", "Titanic", "Avatar", "Interstellar", "The Matrix"];

Task 2: Print the First and Last Element

Print the first movie and the last movie from the array.

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

Task 3: Change One Value

Update one movie in the array and print the updated array.

movies[2] = "Spider-Man";

console.log(movies);

Task 4: Loop Through the Array

Use a for loop to print all the movies in the array.

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

Conclusion

Arrays are data structures that store multiple values in order, where each value (called an element) has an index starting from 0. They help keep related data organized, reduce the need for many variables, and make code cleaner.

Arrays are created using square brackets (e.g., ["Apple", "Banana", "Mango"]). Elements can be accessed using their index, updated by assigning a new value, and the length property shows how many elements the array contains. Arrays are often used with loops to go through and process each element easily.