JavaScript Arrays (JS-06)

Track: JavaScript Basics
Lesson: JS-06 / JS-10

🎯 Lesson Goal

By the end of this lesson, you will understand what arrays are, how to create and access them, and how to use arrays to store and manipulate multiple values in JavaScript programs.

---

📌 Prerequisites

• JS-01: Variables and Data Types
• JS-02: Operators and Expressions
• JS-03: Conditional Statements
• JS-04: Loops
• JS-05: Functions

You should be comfortable with:

• Variables and loops
• Basic functions

---

📘 What is an Array?

An array is a data structure used to store multiple values in a single variable.

Instead of creating many variables:

let subject1 = "HTML";
let subject2 = "CSS";
let subject3 = "JavaScript";

We use an array:

let subjects = ["HTML", "CSS", "JavaScript"];

---

🔹 Creating Arrays

Using Array Literals (recommended)

let colors = ["Red", "Green", "Blue"];

Using new Array()

let numbers = new Array(10, 20, 30);

---

🔹 Accessing Array Elements

Array indexing starts from 0.

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

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

---

🔹 Modifying Array Elements

fruits[1] = "Orange";
console.log(fruits);

---

🔹 Array Length

The length property tells how many elements are in an array.

console.log(fruits.length);

---

🔹 Looping Through Arrays

Arrays are commonly used with loops.

Using for loop

let languages = ["HTML", "CSS", "JavaScript", "React"];

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

---

🔹 Common Array Methods

push() – Add element at end

languages.push("Node.js");

pop() – Remove last element

languages.pop();

unshift() – Add element at start

languages.unshift("Git");

shift() – Remove first element

languages.shift();

---

🔹 indexOf() Method

Returns index of an element.

let index = languages.indexOf("JavaScript");
console.log(index);

---

🔹 includes() Method

Checks if an element exists.

console.log(languages.includes("React")); // true

---

🔹 Arrays with Functions

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

printArray(languages);

---

⚠️ Common Mistakes

• Accessing invalid index
• Forgetting array index starts at 0
• Using = instead of array methods
• Modifying array length accidentally

---

🧠 Practice Tasks

1. Create an array of 5 numbers
2. Print all elements using a loop
3. Add a new element using push()
4. Remove the first element
5. Check if a value exists using includes()

---

🧪 Mini Coding Challenge

let marks = [45, 67, 80, 90, 55];

Tasks:

• Calculate total marks using a loop
• Find highest mark
• Count how many students scored above 60

---

📝 Summary

• Arrays store multiple values
• Index starts from 0
• length gives size
• Methods like push, pop, shift are useful
• Arrays work naturally with loops and functions

---

➡️ Next Lesson

JavaScript Objects (JS-07)

---

🏅 Quiz & Badge

Quiz and badges will be enabled soon.