JavaScript Arrays 101 (Beginner-Friendly Guide)
When writing programs, we often need to store many values together.
Example:
A list of fruits
A list of marks
A list of movies
A list of tasks
Instead of creating many variables, JavaScript gives us a better solution called Arrays.
Let’s understand arrays in the simplest way possible.
1. What Are Arrays?
An array is a collection of values stored in order.
Think of it like a basket of fruits.
Example:
Basket → apple, banana, mango
In JavaScript:
let fruits = ["apple", "banana", "mango"];
Here:
fruits→ array name"apple","banana","mango"→ elements inside the array
Arrays help us store multiple values in a single variable.
2. Why Do We Need Arrays?
Imagine storing fruit names using variables.
Example:
let fruit1 = "apple";
let fruit2 = "banana";
let fruit3 = "mango";
This becomes messy when we have many values.
Instead, using an array:
let fruits = ["apple", "banana", "mango"];
Now all values are stored in one place.
3. How to Create an Array
We create arrays using square brackets [ ].
Example:
let colors = ["red", "blue", "green"];
Another example:
let numbers = [10, 20, 30, 40];
Arrays can store strings, numbers, or mixed values.
Example:
let data = ["Ravi", 25, true];
4. Accessing Elements Using Index
Each item in an array has a position number called an index.
Important rule:
Array index starts from 0
Example array:
let fruits = ["apple", "banana", "mango"];
Array index looks like this:
Index: 0 1 2
----------------------
Value: apple banana mango
Access elements using index.
Example:
console.log(fruits[0]);
Output:
apple
Another example:
console.log(fruits[2]);
Output:
mango
5. Updating Elements in an Array
We can change values using the index.
Example:
let fruits = ["apple", "banana", "mango"];
fruits[1] = "orange";
console.log(fruits);
Output:
["apple", "orange", "mango"]
The value banana was replaced with orange.
6. Array Length Property
JavaScript provides a property called length.
It tells us how many elements are inside the array.
Example:
let fruits = ["apple", "banana", "mango"];
console.log(fruits.length);
Output:
3
Because the array has three elements.
7. Looping Over Arrays
Sometimes we want to print every element in an array.
We can use a for loop.
Example:
let fruits = ["apple", "banana", "mango"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Output:
apple
banana
mango
Here:
irepresents the indexfruits[i]gives the value at that index
Visual Representation of an Array
Index → 0 1 2 3
--------------------------------
Value → apple banana mango orange
Each value is stored in a memory block with an index.
Assignment Practice
Try this in your browser console.
1. Create an Array of 5 Favorite Movies
let movies = [
"Inception",
"Interstellar",
"Avatar",
"Bahubali",
"RRR"
];
2. Print the First and Last Element
First element:
console.log(movies[0]);
Last element:
console.log(movies[movies.length - 1]);
Output example:
Inception
RRR
3. Change One Value
movies[2] = "Jawan";
console.log(movies);
Updated array:
["Inception","Interstellar","Jawan","Bahubali","RRR"]
4. Loop Through the Array
for (let i = 0; i < movies.length; i++) {
console.log(movies[i]);
}
Output:
Inception
Interstellar
Jawan
Bahubali
RRR