«Back to Home

Learn JavaScript

Topics

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

  1. Using index values incorrectly (starting at 1 instead of 0)

  2. Forgetting .length changes when adding/removing items

  3. Using for…in instead of for…of for arrays

  4. Confusing array length with last index

  5. 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)

  1. Create an array of 5 fruits and print each value.

  2. Add and remove elements using push, pop, shift, unshift.

  3. Find the last element using length - 1.

  4. Create an array of marks and calculate its total.

  5. Create a nested array for 3 students with 2 marks each and print them.

Author
Jeetendra Gund
50 30.9k 3.1m