Introduction to Arrays in JavaScript
An array is a special type of variable that can store multiple values in a single place. Instead of creating many variables like:
let student1 = "Aman";
let student2 = "Riya";
let student3 = "Karan";
You can store them in one array:
let students = ["Aman", "Riya", "Karan"];
Arrays are extremely important in JavaScript because:
They help store lists
They are used in loops
They are used in APIs
They are used in real-world projects
They make data easy to manage
College students and freshers will use arrays in almost every JavaScript program.
What Is an Array?
An array is a collection of values stored in square brackets [ ], separated by commas.
Example:
let numbers = [10, 20, 30, 40, 50];
Arrays can store:
Numbers
Strings
Booleans
Objects
Other arrays
JavaScript arrays are flexible.
Array Indexing (Very Important)
Array values are stored at positions called indexes.
Index starts at 0
Last element =
length - 1
Example:
let colors = ["red", "blue", "green"];
console.log(colors[0]); // red
console.log(colors[1]); // blue
console.log(colors[2]); // green
Output:
red
blue
green
Changing Array Values
You can update any value using its index.
Example:
let items = ["pen", "book", "pencil"];
items[1] = "notebook";
console.log(items);
Output:
["pen", "notebook", "pencil"]
Array Length
Use .length to get the number of elements.
Example:
let fruits = ["apple", "mango", "banana"];
console.log(fruits.length);
Output:
3
Adding and Removing Elements
1. push() ? Add at end
let numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers);
Output:
[1, 2, 3, 4]
2. pop() ? Remove from end
numbers.pop();
console.log(numbers);
Output:
[1, 2, 3]
3. unshift() ? Add at beginning
numbers.unshift(0);
console.log(numbers);
Output:
[0, 1, 2, 3]
4. shift() ? Remove from beginning
numbers.shift();
console.log(numbers);
Output:
[1, 2, 3]
Looping Through Arrays
We often use loops to print or process array elements.
Using for loop
let fruits = ["apple", "mango", "banana"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Using for…of loop (easier)
for (let fruit of fruits) {
console.log(fruit);
}
Output:
apple
mango
banana
Arrays Can Store Mixed Data Types
JavaScript arrays can store different types together.
let mixed = ["Aman", 20, true, 85.5];
console.log(mixed);
Output:
["Aman", 20, true, 85.5]
Nested Arrays (Arrays inside Arrays)
let marks = [
[50, 60],
[70, 80],
[90, 95]
];
console.log(marks[0][1]); // 60
console.log(marks[2][0]); // 90
Real-Life Example: Shopping Cart
let cart = ["Laptop", "Mouse", "Keyboard"];
cart.push("Pen Drive");
cart.shift();
console.log("Cart Items:", cart);
Output:
Cart Items: ["Mouse", "Keyboard", "Pen Drive"]
Common Mistakes Beginners Make
Using index values incorrectly (starting at 1 instead of 0)
Forgetting
.lengthchanges when adding/removing itemsUsing for…in instead of for…of for arrays
Confusing array length with last index
Trying to access indexes that don’t exist
Example:
let arr = [1, 2, 3];
console.log(arr[10]); // undefined
Example Program (Complete)
let students = ["Riya", "Aman", "Karan"];
// Add
students.push("Meera");
// Remove
students.shift();
// Loop
for (let s of students) {
console.log("Student:", s);
}
console.log("Total Students:", students.length);
Output:
Student: Aman
Student: Karan
Student: Meera
Total Students: 3
Practice Tasks (Do It Yourself)
Create an array of 5 fruits and print each value.
Add and remove elements using push, pop, shift, unshift.
Find the last element using length - 1.
Create an array of marks and calculate its total.
Create a nested array for 3 students with 2 marks each and print them.