• 5 favorite movies

• 10 student marks

• A list of daily tasks

You could create separate variables like this:

let movie1 = "Inception";
let movie2 = "Interstellar";
let movie3 = "Avatar";

But what if you have 100 values?

That’s messy.

This is where arrays help.

📌 What Are Arrays?

An array is a collection of multiple values stored in a single variable.

Think of it like a row of boxes:

[ value, value, value, value ]

Arrays store values in order and each value has a position called an index.

🏗️ How to Create an Array

We use square brackets [] to create an array.

Example: List of Fruits

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

Now all fruits are stored inside one variable.

Much cleaner than creating 4 separate variables.

📊 Visual Representation of an Array

Index:   0        1        2        3
        --------------------------------
Value:  Apple   Banana   Mango   Orange

⚠ Important: Indexing starts from 0, not 1.

That’s very important in JavaScript.

🔎 Accessing Elements Using Index

To access a value, use its index number.

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

console.log(fruits[0]);  // Apple
console.log(fruits[1]);  // Banana

Structure:

fruits[index]

If you try to access a non-existing index:

console.log(fruits[10]);

It will return:

undefined

🔄 Updating Array Elements

You can change values using index.

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

fruits[1] = "Grapes";

console.log(fruits);

Before:

["Apple", "Banana", "Mango"]

After:

["Apple", "Grapes", "Mango"]

Arrays are mutable — meaning values can be changed.

📏 The length Property

To know how many elements are in an array, use .length.

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

console.log(fruits.length);

Output:

3

Useful when looping through arrays.

🔁 Looping Over Arrays

To print all elements, we can use a simple for loop.

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

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

How it works:

1. Start from index 0

2. Continue until i < fruits.length

3. Print each element

🧠 Memory-Style Block Diagram

Think of array storage like this:

fruits
   ↓
 -------------------------
 | Apple | Banana | Mango |
 -------------------------
    0        1        2

Each value occupies a position in memory.

🆚 Individual Variables vs Array

❌ Without Array

let mark1 = 85;
let mark2 = 90;
let mark3 = 78;

Hard to manage.

✅ With Array

let marks = [85, 90, 78];

Cleaner. Scalable. Easier to loop.

💡 Final Thoughts

Arrays are one of the most important data structures in JavaScript.

They are used in:

• Storing API data

• Managing lists

• Working with loops

• Building real-world applications

If you understand:

• Indexing

• Updating

• Length

• Looping

You’re building strong fundamentals.

Advanced array methods (map, filter, reduce) come next — but mastering the basics first is very important.

That’s where Object-Oriented Programming (OOP) helps.

OOP is a programming style where we organize code using objects and classes.

📌 What is Object-Oriented Programming (OOP)?

Object-Oriented Programming is a way of writing code using:

• Classes (blueprints)

• Objects (real instances)

• Properties (data)

• Methods (functions inside objects)

It helps in:

• Organizing code

• Reusing code

• Making programs scalable

🚗 Real-World Analogy: Blueprint → Objects

Think about a car factory.

A company creates a blueprint for a car.

From that blueprint, they manufacture:

• Car 1

• Car 2

• Car 3

Each car has:

• Brand

• Color

• Speed

The blueprint is like a class.
Each manufactured car is an object.

📊 Blueprint → Object Diagram

        Class (Blueprint)
              ↓
        ----------------
        |   Car Class  |
        ----------------
           ↓       ↓       ↓
        Car1    Car2    Car3
       (Object) (Object) (Object)

One blueprint → Multiple objects.

🏛️ What is a Class in JavaScript?

A class is a template used to create objects.

In JavaScript, we use the class keyword.

🔹 Example: Creating a Class

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

Let’s break it down.

🧱 Constructor Method

The constructor is a special method that runs automatically when we create a new object.

It is used to initialize properties.

constructor(name, age) {
  this.name = name;
  this.age = age;
}

this refers to the current object.

🧍 Creating Objects from a Class

Now we create objects using the new keyword.

let person1 = new Person("Ilyas", 21);
let person2 = new Person("Rahul", 22);

Now we have two different objects created from the same class.

🔧 Calling Methods

person1.greet();
person2.greet();

Output:

Hello, my name is Ilyas
Hello, my name is Rahul

Each object has its own data but shares the same structure.

📊 Class → Instance Relationship

Class: Person
   ↓
person1 → { name: "Ilyas", age: 21 }
person2 → { name: "Rahul", age: 22 }

Class defines structure.

Objects store actual data.

🧠 Methods Inside a Class

Methods are functions written inside a class.

Example:

class Car {
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  drive() {
    console.log(this.brand + " is driving.");
  }
}

Here:

• brand and color → properties

• drive() → method

🔒 Basic Idea of Encapsulation

Encapsulation means:

👉 Keeping data and related methods together inside a class.

Instead of writing:

let name = "Ilyas";
let age = 21;

function greet() {
  console.log("Hello " + name);
}

We organize it like this:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello " + this.name);
  }
}

Everything related to a person stays inside the Person class.

That’s cleaner and more organized.

🎯 Why OOP is Powerful

• Code becomes reusable

• Easy to manage large projects

• Clear structure

• Real-world modeling becomes easier

Instead of rewriting logic, we reuse the class.

🎯 Mini Assignment

1️⃣ Create a Student class

class Student {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  printDetails() {
    console.log("Name: " + this.name + ", Age: " + this.age);
  }
}

2️⃣ Create multiple student objects

let student1 = new Student("Aman", 20);
let student2 = new Student("Priya", 21);

student1.printDetails();
student2.printDetails();

You just created reusable student objects.

💡 Final Thoughts

Object-Oriented Programming helps you:

• Structure code properly

• Avoid repetition

• Build scalable applications

• Model real-world systems

Almost all modern frameworks (React, Angular, Node.js apps) rely heavily on OOP concepts.

Master this, and your JavaScript level jumps significantly.