But it doesn't have to be confusing. Once you understand a few core rules, controlling this becomes second nature. In this deep dive, we are going to break down exactly what this means, how it behaves in different scenarios, and how you can forcefully bend it to your will using the built-in methods: call(), apply(), and bind().

1. What Exactly is this in JavaScript?

The simplest way to think about this is to ask yourself one question: "Who is calling the function?"

In JavaScript, functions are executed in a specific context. The this keyword is simply a reference to the object that is currently executing the code. It is not an unchangeable rule established when the function is written; rather, it is a dynamic reference established at the exact moment the function is invoked (or called).

If a person throws a ball, this is the person. If a machine throws a ball, this is the machine. The action (the function) is the same, but the actor (this) changes depending on who triggers it.

2. The this Keyword Inside Normal Functions

Let's look at what happens when you use this inside a standard, standalone function that isn't attached to any specific object.

function greet() {
    console.log(this);
}

greet(); 

What happens here?

Because greet() is called on its own - without a specific object calling it - JavaScript defaults to the global object.

• In a web browser environment, the global object is the window object.

• If you are running JavaScript in "Strict Mode" ("use strict";), the browser stops this default fallback to the window object to prevent accidental global variable modifications. In Strict Mode, this inside a normal function will simply be undefined.

3. The this Keyword Inside Objects

Things start making a lot more sense when we look at methods - functions that live inside objects. When a function is called as a method of an object, this refers to the object that contains the method. Remember our golden rule: Who is calling the function?

const user = {
    username: "Alex",
    role: "Developer",
    introduce: function() {
        console.log(`Hi, my name is \({this.username} and I am a \){this.role}.`);
    }
};

user.introduce(); 
// Output: Hi, my name is Alex and I am a Developer.

In the example above, user is calling the introduce() function. Therefore, inside that function, this equals the user object. this.username is evaluated as user.username.

The "Lost Context" Trap

A common trap occurs when you extract a method from its object and assign it to a standalone variable.

const sayHello = user.introduce;
sayHello(); 
// Output: Hi, my name is undefined and I am a undefined.

Why did this break? Because by extracting it into sayHello, we are now calling it as a normal, standalone function. The user object is no longer calling it. The context has been lost.

To fix lost context, or to intentionally change the context of a function, JavaScript provides three incredibly powerful tools: call(), apply(), and bind().

4. Taking Control: What call() Does

The call() method allows you to execute a function immediately and explicitly dictate what this should point to. It effectively allows an object to "borrow" a method from another object.

Let's say we have two user objects, but only one of them has a greeting method:

const user1 = {
    username: "Sarah",
    greet: function(greeting) {
        console.log(`\({greeting}! I am \){this.username}.`);
    }
};

const user2 = {
    username: "Michael"
};

// user1 calls its own method naturally
user1.greet("Hello"); // Output: Hello! I am Sarah.

// user2 borrows the method using call()
user1.greet.call(user2, "Welcome"); // Output: Welcome! I am Michael.

How call() works:

1. The first argument you pass to call() becomes the new this context (in this case, user2).

2. Any subsequent arguments are passed individually to the function (in this case, "Welcome" is passed as the greeting parameter).

5. Taking Control: What apply() Does

The apply() method is almost completely identical to call(). It executes the function immediately and assigns the this context.

The only difference between the two is how they handle additional arguments. While call() expects arguments to be passed one by one (comma-separated), apply() expects all additional arguments to be bundled inside a single Array.

const flight = {
    airline: "SkyAir",
    book: function(flightNum, passengerName) {
        console.log(`\({passengerName} booked a seat on \){this.airline} flight ${flightNum}.`);
    }
};

const partnerAirline = {
    airline: "Oceanic Express"
};

// Using apply() to borrow the book method
flight.book.apply(partnerAirline, ["OB-415", "John Doe"]);
// Output: John Doe booked a seat on Oceanic Express flight OB-415.

Pro Tip to remember the difference: * Call takes Comma-separated arguments.

• Apply takes an Array of arguments.

6. Taking Control: What bind() Does

Both call() and apply() execute the function immediately. But what if you don't want to run the function right now? What if you are setting up an event listener, or a timer, and you want the function to remember its context for later?

This is where bind() shines. The bind() method does not execute the function immediately. Instead, it creates and returns a brand new function, permanently locking in the this context you provide.

const game = {
    title: "Space Invaders",
    start: function() {
        console.log(`Starting ${this.title}...`);
    }
};

const newGame = {
    title: "Pac-Man"
};

// bind() creates a new function and stores it in a variable
const startPacMan = game.start.bind(newGame);

// We can now call this new function whenever we want
startPacMan(); 
// Output: Starting Pac-Man...

You can also pre-set arguments using bind(), a concept known as partial application, but its primary use case is simply ensuring your methods don't lose their context when passed around in your code.

Example:

const person = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  },
  farewell: () => {
    // Arrow function, 'this' is inherited from global context (or outer scope)
    // If run in browser, this.name would be undefined.
    // If run in Node.js, this would be empty object {}, so this.name is undefined.
    console.log(`Goodbye from ${this.name}`);
  }
};

person.greet();    // Output: Hello, my name is Alice ('this' is person)

person.farewell(); // Output: Goodbye from undefined (if in global scope)

// Example with call/apply/bind
function introduce(age, city) {
  console.log(`Hi, I'm \({this.name}, \){age} years old from ${city}.`);
}

const anotherPerson = { name: "Bob" };

introduce.call(anotherPerson, 30, "New York"); // Hi, I'm Bob, 30 years old from New York.
introduce.apply(anotherPerson, [25, "London"]); // Hi, I'm Bob, 25 years old from London.

const bobIntro = introduce.bind(anotherPerson, 40);
bobIntro("Paris"); // Hi, I'm Bob, 40 years old from Paris.

7. Summary Table: call vs apply vs bind

Keep this quick reference chart handy when deciding which method to use:

8. Your Assignment / Challenge

To truly solidify this knowledge, the best approach is to write the code yourself. Open up your favorite code editor or a browser console and complete the following steps:

1. Create an object with a method: Create a developer object with properties like name and primaryLanguage. Add a method called writeCode() that prints a string using this (e.g., "Alice is writing HTML").

2. Borrow that method using call(): Create a second object called designer with different properties. Use call() to make the designer object borrow the writeCode() method from the developer.

3. Use apply() with array arguments: Modify the writeCode method to accept a few arguments (like projectType and deadline). Borrow the method again for another object, but this time use apply() and pass those arguments as an array.

4. Use bind() and store the function: Create a completely detached variable. Use bind() to lock the designer context to the writeCode method, store it in the variable, and then invoke that variable a few lines later.

Arrow functions provide a more concise way to write function expressions. They strip away the boilerplate, making your code cleaner and much easier to read. Let's break down exactly how they work, how to write them, and why they are a staple of modern web development.

What Are Arrow Functions?

At their core, arrow functions are just a shorter syntax for writing function expressions. Before ES6, creating a function always required the function keyword. Arrow functions allow you to drop that keyword entirely, relying on the "fat arrow" (=>) to separate the function parameters from the function body.

Here is a quick comparison showing how arrow functions reduce boilerplate:

The Old Way (Normal Function)

const greet = function() {
  return "Hello, World!";
};

The Modern Way (Arrow Function)

const greet = () => {
  return "Hello, World!";
};

Basic Arrow Function Syntax

Writing an arrow function is straightforward. You define your parameters in parentheses, add the arrow =>, and then open your curly braces for the function body.

Arrow Functions with Multiple Parameters

When you have two or more parameters, you must wrap them in parentheses.

const addNumbers = (a, b) => {
  return a + b;
};

console.log(addNumbers(5, 10)); // Output: 15

Arrow Functions with One Parameter

If your function only takes exactly one parameter, JavaScript allows you to drop the parentheses entirely. This makes the code incredibly sleek.

const square = x => {
  return x * x;
};

console.log(square(4)); // Output: 16

Implicit Return vs. Explicit Return

One of the most powerful features of arrow functions is the implicit return.

In a standard function, if you want to send a value back, you must explicitly use the return keyword. This is called an explicit return.

// Explicit return
const multiply = (a, b) => {
  return a * b; 
};

However, if your function body consists of only a single expression, you can remove the curly braces {} and the return keyword. JavaScript will automatically return the result of that expression. This is an implicit return.

// Implicit return
const multiply = (a, b) => a * b;

console.log(multiply(3, 4)); // Output: 12

Implicit returns are fantastic for keeping your code readable, especially when doing simple math operations or manipulating arrays.

Basic Difference Between Arrow Functions and Normal Functions

While arrow functions are great for shortening your code, they are not just "syntactic sugar" - they do have some functional differences compared to traditional functions.

• Syntax: Arrow functions are noticeably shorter and omit the function keyword.

• Implicit Returns: Normal functions always require the return keyword to pass a value back. Arrow functions can return values implicitly on a single line.

• The this Keyword: Without getting too deep into execution contexts, normal functions create their own this binding based on how they are called. Arrow functions do not have their own this. They inherit this from the surrounding code where they were defined. For basic math operations and greetings, this won't affect you, but it becomes important later when building complex web applications.

Your Assignment

Ready to practice? Try completing the following steps in your code editor or console:

1. Write a normal function (using the function keyword) that calculates the square of a number.

2. Rewrite that exact same logic using an arrow function.

3. Create an arrow function that accepts a number and returns a string stating whether the number is "even" or "odd".

4. Use an arrow function inside the map() method to double every number in this array: const numbers = [1, 2, 3, 4];

The END :).

Today, we are going to break down the two most common ways to create functions: Function Declarations and Function Expressions. We'll look at their syntax, explore a quirky JavaScript behavior called "hoisting," and figure out when you should use each one.

What Are Functions and Why Do We Need Them?

Imagine you are building a house. Instead of building every single door from scratch using raw wood and nails right at the doorframe, you build a door-making machine. You feed the machine wood, and it gives you a finished door anywhere you need it.

In programming, a function is exactly that: a reusable block of code designed to perform a specific task. We need them because they keep our code clean, organized, and DRY (Don't Repeat Yourself). Instead of writing the same logic over and over, you write it once inside a function and call it whenever you need it.

Let's look at the two main ways to build these "machines" in JavaScript.

1. Function Declaration Syntax

A function declaration is the standard, traditional way of writing a function. You start with the function keyword, followed by the name you want to give it, parentheses (), and curly braces {} holding your logic.

Here is a simple example that adds two numbers:

function addNumbers(a, b) {
  return a + b;
}

console.log(addNumbers(5, 10)); // Output: 15

It is straightforward and clearly announces, "Hey, I am creating a function named addNumbers!"

2. Function Expression Syntax

A function expression takes a different approach. Instead of declaring a standalone function, you create a function and store it inside a variable.

Here is the exact same addition logic, written as an expression:

const addNumbers = function(a, b) {
  return a + b;
};

console.log(addNumbers(5, 10)); // Output: 15

Notice that the function itself doesn't have a name between the function keyword and the parentheses (this is often called an anonymous function). The function is simply treated as a value that gets assigned to the addNumbers variable.

The Key Difference: A High-Level Look at Hoisting

At first glance, declarations and expressions look like two different flavors of the exact same thing. But there is a crucial difference in how JavaScript handles them behind the scenes, and it comes down to a concept called hoisting.

Hoisting is JavaScript's default behavior of moving declarations to the top of their scope before the code actually runs.

• Function Declarations are fully hoisted. You can successfully call the function before you even define it in your code. JavaScript reads the whole file, pulls the declaration to the top, and then executes your code.

• Function Expressions are NOT hoisted. (More accurately, the variable might be hoisted, but its assignment as a function is not). If you try to call a function expression before you define it, JavaScript will throw an error.

Let's see this in action.

The Declaration Way (Works!)

// Calling the function before defining it
console.log(greet("Divyanshu")); // Output: "Hello, Divyanshu!"

function greet(name) {
  return `Hello, ${name}!`;
}

The Expression Way (Breaks!)

// Calling the function before defining it
console.log(greet("Divyanshu")); // ReferenceError: Cannot access 'greet' before initialization

const greet = function(name) {
  return `Hello, ${name}!`;
};

Side-by-Side Comparison

When to Use Each Type

• Use Function Declarations when you want to create utility or helper functions that you want to be available anywhere in your file, regardless of where they are written. It can make your code easier to read if you want to put your main logic at the top of the file and hide the helper functions at the bottom.

• Use Function Expressions when you want to enforce a strict, predictable top-to-bottom execution flow. Because they aren't hoisted, you are forced to define your functions before you use them, which can prevent confusing bugs. They are also heavily used in modern JavaScript frameworks and when writing callbacks.

Practice Assignment

The best way to solidify this concept is to write it out yourself! Open up your code editor and try this:

1. Write a Function Declaration that takes two numbers and multiplies them.

2. Write the exact same logic using a Function Expression.

3. Call both functions with some test numbers and console.log the results to make sure they work.

4. The Hoisting Test: Try calling both functions above the lines where you defined them. Observe the behavior and the error messages in your console.

When you first get into tech, writing code often feels like just trying to get the computer to do what you want, line by line. But as your projects grow from simple scripts to full-fledged applications, having a massive file full of disconnected variables and standalone functions quickly becomes a nightmare to manage.

This is where OOP comes in to save the day. Object-Oriented Programming is a programming paradigm - a specific style of writing code - that organizes software design around data (objects) rather than just functions and logic. It allows us to group related data and behaviors together into neat, manageable packages.

Let’s break down exactly what that means in JavaScript and how you can start using it today.

The Blueprint Analogy: Classes vs. Objects

To truly grasp OOP, you need to understand the relationship between a Class and an Object. The easiest way to visualize this is by looking at how a car is manufactured.

Imagine a team of engineers designing a brand-new car. Before a single piece of metal is cut, they draw up a highly detailed blueprint. This blueprint dictates that the car will have a specific brand, a certain color, four wheels, and behaviors like driving and braking.

However, you cannot hop into a blueprint and drive it to the grocery store. It is just a concept- a set of rules. To actually drive, the factory needs to build physical cars based on that exact blueprint.

• The Class is the blueprint: It defines the structure, properties, and abilities that the final product will have.

• The Object is the physical car: It is the actual, tangible thing built from the blueprint.

From one single blueprint (the Class), a factory can produce millions of distinct cars (the Objects). One might be a red Honda, while another is a black Ford, but they both share the exact same underlying architecture.

What is a Class in JavaScript?

In modern JavaScript, we create our blueprints using the class keyword. A class acts as a template for creating objects.

Let's look at how we might write the basic structure for our Car blueprint:

class Car {
  // The blueprint logic goes here
}

Right now, our blueprint is empty. To make it useful, we need to define what properties a car should have when it is built. We do this using a special method called the constructor.

The Constructor Method: Setting Up Your Object

The constructor is a special function that lives inside your class. It runs automatically the exact moment you create a new object from your class. Its entire job is to set up the initial state of your new object.

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

Let's break down the magic happening here:

1. When we eventually build a car, we will pass in a specific brand and color.

2. The this keyword is incredibly important. It refers to the specific instance of the object being created right at that moment.

3. this.brand = brand; basically translates to: "Take the brand name provided, and attach it to this specific car that is rolling off the assembly line right now."

Adding Behaviors: Methods Inside a Class

A car isn't very useful if it just sits there. It needs to do things. In OOP, the functions that belong to an object are called methods.

Let's give our car the ability to drive and announce itself:

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

  // This is a method 
  drive() {
    console.log(`Vroom! The \({this.color} \){this.brand} is hitting the road!`);
  }

  // Another method
  brake() {
    console.log(`The ${this.brand} is safely slowing down.`);
  }
}

Notice that we don't need to write the word function before drive() or brake(). When functions live inside a class, we just write their name. Additionally, because the method is inside the class, it has full access to this.brand and this.color.

Creating Objects (Instantiation)

Now that our factory blueprint is complete, let's build some actual cars. We do this using the new keyword, which tells JavaScript to execute the class constructor and create a fresh object.

// Building our first car object
const dailyCommuter = new Car("Honda", "Red");

// Building a completely separate car object
const weekendCruiser = new Car("Ford", "Black");

// Making them perform their behaviors
dailyCommuter.drive();      
// Output: Vroom! The Red Honda is hitting the road!

weekendCruiser.drive();     
// Output: Vroom! The Black Ford is hitting the road!

dailyCommuter.brake();
// Output: The Honda is safely slowing down.

By using the new keyword, we have "instantiated" two separate objects. They share the same methods, but they hold their own unique data.

The Power of Code Reusability

This is where you start to see the incredible value of OOP. Imagine you are building a racing game and need 50 different cars on the track.

If you were writing standard, procedural code, you might have to write 50 different variables for brand, 50 variables for color, and 50 different functions to make them drive. It would be hundreds of lines of repetitive code.

With our Car class, the complex logic is written exactly once. We can then stamp out as many new Car() objects as we want in a single line of code each. This makes your code highly reusable, incredibly easy to read, and much simpler to fix. If you find a bug in the way cars drive, you only have to fix it in one place: inside the class blueprint.

A Basic Idea of Encapsulation

As you dive deeper into web development cohorts and advanced tutorials, you will hear the term Encapsulation.

Encapsulation is one of the core pillars of OOP. At its most basic level, it simply means bundling the data (the properties like brand and color) and the methods that operate on that data (drive()) together inside a single unit (the class).

Think of encapsulation like a medicinal pill capsule. All the active ingredients (data and methods) are safely packed inside the shell. This keeps everything highly organized and prevents the internal workings of the car from spilling out and getting tangled up with the rest of the code in your application. It acts as a protective shield around your object's logic.

Your Assignment: Put it into Practice

Reading about OOP is one thing, but writing it is where the concepts truly click. Fire up your code editor and try this challenge:

1. Create a class called Student.

2. Set up a constructor method that accepts name and age as parameters and assigns them to the object using the this keyword.

3. Add a method inside the class called printDetails() that logs a formatted string to the console. For example: "Student Name: Divyanshu, Age: 25".

4. Below your class, use the new keyword to create at least three distinct student objects.

5. Call the printDetails() method on each of your new student objects to verify they work correctly.

Object-Oriented Programming might require a shift in how you think about structuring your code, but once you master classes and objects, you'll be well on your way to writing professional, scalable JavaScript.

Simply put, operators are symbols that tell the computer to perform specific mathematical, relational, or logical tasks. They are the engines that make your code actually do things.

Let's break down the everyday operators you will use constantly in your JavaScript projects.

1. Arithmetic Operators

These are the most familiar ones. They perform basic math operations just like the calculator on your phone.

• + (Addition)

• - (Subtraction)

• * (Multiplication)

• / (Division)

• % (Modulo / Remainder)

The modulo operator (%) might look new, but it just gives you the remainder of a division. For example, 10 % 3 is 1 because 3 goes into 10 three times, leaving 1 leftover.

Let's see them in action:

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1

2. Comparison Operators

We use comparison operators to compare two values. They always return a boolean: either true or false.

• > (Greater than)

• < (Less than)

• != (Not equal to)

The Big Debate: == vs ===

This is a classic "gotcha" in JavaScript. Both check for equality, but they do it differently:

• == (Loose equality): Checks if the values are the same, even if the data types are different. JavaScript will try to convert the types behind the scenes to make a match.

• === (Strict equality): Checks if both the value AND the data type are exactly the same.

Always use === in your everyday coding. It prevents weird bugs.

let num = 5;
let str = "5";

console.log(num > 3);  // true
console.log(num < 10); // true

// The difference between loose and strict equality
console.log(num == str);  // true (JavaScript converts the string to a number)
console.log(num === str); // false (Number is not the same type as String)

3. Logical Operators

Logical operators are used to connect multiple conditions together. Think of them as the bouncers at a club checking multiple requirements before letting you in.

• && (AND): Returns true only if both conditions are true.

• || (OR): Returns true if at least one condition is true.

• ! (NOT): Flips the boolean value. true becomes false, and vice versa.

let hasTicket = true;
let isVip = false;

// AND (Requires both to be true)
console.log(hasTicket && isVip); // false

// OR (Requires only one to be true)
console.log(hasTicket || isVip); // true

// NOT (Reverses the value)
console.log(!hasTicket); // false

4. Assignment Operators

You use these to assign values to variables. The most basic one is =, but there are handy shortcuts for updating a variable's value based on its current value.

• = (Assign)

• += (Add and assign)

• -= (Subtract and assign)

let score = 10; // Basic assignment

score += 5; // Shortcut for: score = score + 5
console.log(score); // 15

score -= 2; // Shortcut for: score = score - 2
console.log(score); // 13

💻 Practice Assignment

Ready to try it out yourself? Open up your console or a new file and complete these steps:

1. Arithmetic: Create two variables with numbers. Perform addition, subtraction, multiplication, and division, and console.log the results.

2. Comparison: Create a number variable and a string variable holding the same digit (e.g., 9 and "9"). Compare them using both == and === and log the output.

3. Logical: Write a small scenario with two boolean variables (e.g., isWeekend and hasHomework). Write a condition using && or || to determine if you have free time, and log the result.

Wrap Up

You don't need to memorize complex operator precedence charts right now. In everyday usage, JavaScript reads pretty much left-to-right, and if you ever need a specific calculation to happen first, just wrap it in parentheses () exactly like you would in regular math!

Before we dive in, do yourself a favor:
open up your browser's developer console right now (F12 or Right-Click -> Inspect -> Console).

The best way to learn these methods is to type the examples out and see the results for yourself!

Let's break down the most important array methods you need to know.

Adding and Removing Elements: The Basics

Think of these four methods as the doors to your array. They let items in and out of the front and back.

1. push() and pop() (The Back Door)

• push() adds one or more elements to the end of an array.

• pop() removes the last element from an array.

let fruits = ['apple', 'banana'];
console.log('Before push:', fruits); // ['apple', 'banana']

fruits.push('orange');
console.log('After push:', fruits); // ['apple', 'banana', 'orange']

fruits.pop();
console.log('After pop:', fruits); // ['apple', 'banana']

2. unshift() and shift() (The Front Door)

• unshift() adds one or more elements to the beginning of an array.

• shift() removes the first element from an array.

let queue = ['Alice', 'Bob'];
console.log('Before unshift:', queue); // ['Alice', 'Bob']

queue.unshift('Charlie');
console.log('After unshift:', queue); // ['Charlie', 'Alice', 'Bob']

queue.shift();
console.log('After shift:', queue); // ['Alice', 'Bob']

The Modern Way: Array Iteration Methods

In the past, if you wanted to do something to every item in an array, you had to write a traditional for loop. It looked like this:

// Traditional For Loop Example
let numbers = [1, 2, 3];
let doubledNumbers = [];

for (let i = 0; i < numbers.length; i++) {
  doubledNumbers.push(numbers[i] * 2);
}
console.log(doubledNumbers); // [2, 4, 6]

While this works, it's clunky. You have to manage the counter (i), the length condition, and manually push to a new array. Modern JavaScript gives us cleaner, more readable methods. Let's look at them.

3. map(): The Transformer

map() goes through your array, applies a function to every single item, and gives you a brand new array with the modified items. It's perfect for when you want to change data without messing up the original array.

let prices = [10, 20, 30];
console.log('Before map:', prices); // [10, 20, 30]

let discountedPrices = prices.map(price => price - 5);

console.log('After map (new array):', discountedPrices); // [5, 15, 25]
console.log('Original array is untouched:', prices); // [10, 20, 30]

4. filter(): The Bouncer

filter() looks at every item in your array and checks it against a condition you set. If the item passes the test (returns true), it gets put into a new array. If it fails, it gets left behind.

let scores = [45, 80, 32, 95, 100];
console.log('Before filter:', scores); // [45, 80, 32, 95, 100]

let passingScores = scores.filter(score => score >= 50);

console.log('After filter (new array):', passingScores); // [80, 95, 100]

5. forEach(): The Action Taker

forEach() is the closest cousin to the traditional for loop. It just runs a function for every item in the array. Important note: unlike map() or filter(), forEach() does not return a new array. It just executes code.

let users = ['Divyanshu', 'Sarah', 'Mike'];

// This just prints to the console, it doesn't create a new array
users.forEach(user => {
  console.log('Hello, ' + user + '!');
});
// Output: Hello, Divyanshu! 
// Output: Hello, Sarah! 
// Output: Hello, Mike!

6. reduce(): The Accumulator (Beginner Friendly)

reduce() can look intimidating, but its core job is simple: it takes an array with many items and squishes them down into a single value.

Think of a snowball rolling down a hill, gathering more snow.

• The snowball is your accumulator (the running total).

• The fresh snow it picks up is your current value.

Here is how you use it to find the total sum of an array:

let expenses = [10, 20, 30];

// The '0' at the end is our starting point (an empty snowball).
let totalExpense = expenses.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0); 

console.log('Total Expense:', totalExpense); // 60

Note: As you get more advanced, you can chain these methods together (e.g., array.map().filter()). However, while you are learning, I highly recommend keeping them separate so you can console.log the intermediate steps and see exactly what your data is doing!

Your Assignment 📝

Ready to test your knowledge? Try this exercise in your console:

1. Create an array of numbers: [2, 5, 8, 12, 15].

2. Use map() to create a new array where each number is doubled.

3. Take that new array and use filter() to extract only the numbers that are strictly greater than 10.

4. Finally, use reduce() on the filtered array to calculate the total sum of those remaining numbers.

Let me know in the comments what total sum you ended up with!

If you try to store these values individually, your code might look something like this:

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
let fruit4 = "Orange";

Imagine if you had 100 fruits! Creating a separate variable for every single item quickly becomes messy, hard to manage, and nearly impossible to scale.

This is where arrays come to the rescue.

What Are Arrays and Why Do We Need Them?

An array is a single variable that can store a collection of values in a specific order. Think of an array like a neatly organized pill organizer or a bookshelf. Instead of throwing all your books into a pile (or creating 100 individual variables), you line them up sequentially on one shelf where you can easily find exactly what you need.

Arrays allow us to group related data together, keeping our code clean and giving us powerful ways to interact with that data all at once.

How to Create an Array

Creating an array in JavaScript is straightforward. You just use square brackets [] and separate your items with commas.

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

Just like that, we’ve replaced four separate variables with one clean, organized array.

Accessing Elements Using the Index

Every item inside an array has a specific numbered position called an index.

Here is the most important rule to remember about arrays in JavaScript (and most programming languages): indexing starts at 0, not 1. * The first item is at index 0

• The second item is at index 1

• The third item is at index 2

To access an element, you write the name of the array followed by square brackets containing the index number.

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

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

Updating Elements

Arrays are dynamic, meaning you can change the data inside them after they are created. You can update an element by accessing its index and assigning a new value to it, exactly like you would with a standard variable.

Let's say we want to replace "Banana" with "Strawberry":

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

// "Banana" is at index 1
fruits[1] = "Strawberry"; 

console.log(fruits); 
// Output: ["Apple", "Strawberry", "Mango", "Orange"]

The Array Length Property

Often, you need to know exactly how many items are inside your array. JavaScript provides a built-in property called .length that does the counting for you.

Note: While indexes start at 0, the length property counts items normally, starting from 1.

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

console.log(fruits.length); // Output: 4

Basic Looping Over Arrays

The real power of an array is the ability to run code for every single item inside it without repeating yourself. We can use a basic for loop alongside the .length property to iterate through our collection.

Here is how you can print every fruit in the list:

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

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

// Output:
// I love eating Apple
// I love eating Banana
// I love eating Mango
// I love eating Orange

In this loop, the variable i starts at 0 and increases by 1 each loop, stopping right before it hits the total length of the array. This perfectly matches our 0-based index system!

Your Turn: Try This Assignment!

Ready to write some code yourself? Open up your code editor or console and try this quick assignment to test your knowledge:

1. Create an array containing 5 of your favorite movies.

2. Print the very first and the very last element to the console.

3. Change the value of the 3rd movie in your list to something else, then print the updated array.

4. Write a basic for loop to go through the array and print all the movie names one by one.

Drop your code in the comments below if you want feedback.

As we continue our journey through the Web Dev Cohort 2026, understanding objects is a massive stepping stone toward becoming a full-stack engineer. Let's break down what objects are, why we need them, and how to use them.

What Are Objects and Why Do We Need Them?

Imagine you want to store information about a person. You could use an array:

let personArray = ["Divyanshu", 25, "Delhi"];

But there's a problem here. Looking at personArray[1], how do you know if 25 is the person's age, their lucky number, or their house number? An array is just an ordered list; it doesn't give us context.

An object solves this by storing data in a key-value pair structure. Instead of relying on an index (like 0, 1, or 2), you use a descriptive "key" (a label) to store and access a "value".

Creating Objects

Creating an object is straightforward. We use curly braces {} and define our key-value pairs inside them.

let person = {
  name: "Divyanshu",
  age: 25,
  city: "Delhi"
};

Now, the data is perfectly clear. The key is name and the value is "Divyanshu".

Accessing Properties

To get information out of an object, you have two main options: Dot Notation and Bracket Notation.

1. Dot Notation

This is the most common and easiest way to access a property. You just write the object name, a dot, and the key.

console.log(person.name); // Output: Divyanshu
console.log(person.city); // Output: Delhi

2. Bracket Notation

Sometimes you need to use bracket notation. This is especially useful if your key has a space in it (which isn't recommended, but possible) or if you are using a variable to access the key.

console.log(person["age"]); // Output: 25

let propertyToCheck = "city";
console.log(person[propertyToCheck]); // Output: Delhi

Modifying Objects: Updating, Adding, and Deleting

Objects are dynamic. You can change them even after you've created them.

Updating Properties

To change an existing value, just reassign it using dot or bracket notation.

person.age = 26;
console.log(person.age); // Output: 26

Adding New Properties

Adding a new property is just as easy. Simply assign a value to a key that doesn't exist yet.

person.profession = "Developer";
console.log(person); 
// Output: { name: 'Divyanshu', age: 26, city: 'Delhi', profession: 'Developer' }

Deleting Properties

If you need to remove a property completely, use the delete keyword.

delete person.city;
console.log(person); 
// Output: { name: 'Divyanshu', age: 26, profession: 'Developer' }

Looping Through Object Keys

Sometimes you want to go through all the properties in an object, maybe to print them out to the console. Because objects aren't ordered like arrays, we use a special loop called the for...in loop.

let car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2022
};

for (let key in car) {
  console.log(key + ": " + car[key]);
}

// Output:
// brand: Toyota
// model: Corolla
// year: 2022

Notice how we used car[key] (bracket notation) inside the loop. If we used car.key, JavaScript would look for a property literally named "key", which doesn't exist!

📝 Try It Yourself! (Assignment Idea)

Ready to put this into practice? Here is a quick challenge to test your skills:

1. Create an object representing a student.

2. Add the following properties: name, age, and course.

3. Update the course property to a new subject.

4. Print all the keys and their corresponding values using a for...in loop.

The END :).

Your code needs to make decisions the exact same way. In programming, this is called control flow.

Control flow is the order in which a computer executes instructions. By default, code runs in a straight line, from top to bottom. But with control flow statements, you can tell your code to skip certain lines, run different blocks of code based on specific conditions, or repeat actions.

Let's break down how to give your JavaScript code a brain of its own!

The if Statement

The if statement is the simplest form of decision-making in code. It evaluates a condition, and if that condition is true, the code inside its block runs.

Example: Checking Age

let age = 20;

if (age >= 18) {
  console.log("You are old enough to vote!");
}

Step-by-Step:

1. The program checks the condition: Is the variable age greater than or equal to 18?

2. Since 20 is greater than 18, the condition is true.

3. The program enters the curly braces {} and prints the message to the console.

The if-else Statement

What if the condition is false and you want to do something else? That’s where else comes in. It provides a fallback option.

let age = 15;

if (age >= 18) {
  console.log("You are old enough to vote!");
} else {
  console.log("Sorry, you are too young to vote.");
}

Step-by-Step:

1. The program checks if age (15) is greater than or equal to 18.

2. The condition is false.

3. The program skips the first block and immediately runs the code inside the else block.

The else if Ladder

Sometimes, you have more than two possibilities. The else if ladder lets you chain multiple conditions together.

Example: Checking Marks

let studentMarks = 85;

if (studentMarks >= 90) {
  console.log("Grade: A");
} else if (studentMarks >= 80) {
  console.log("Grade: B");
} else if (studentMarks >= 70) {
  console.log("Grade: C");
} else {
  console.log("Study harder!");
}

The program checks each condition from top to bottom. As soon as it finds a true condition (in this case, studentMarks >= 80), it runs that block and skips the rest of the ladder entirely.

The switch Statement

When you have a single value that you want to check against many specific cases, writing a long else if ladder gets messy. The switch statement is a much cleaner alternative.

let trafficLight = "Green";

switch (trafficLight) {
  case "Red":
    console.log("Stop!");
    break;
  case "Yellow":
    console.log("Slow down.");
    break;
  case "Green":
    console.log("Go!");
    break;
  default:
    console.log("Invalid light color.");
}

Why the break keyword is crucial!

Notice the break at the end of each case. When the program finds the matching case ("Green"), it runs the code. The break tells the program, "We found what we needed, exit the switch statement now."

If you forget to include break, the program will keep running the code for all the following cases, even if they don't match! This is called "fall-through," and it is a very common beginner bug.

When to use switch vs if-else

• Use if-else when you are checking ranges (like age > 18), multiple different variables, or complex true/false conditions.

• Use switch when you are checking a single variable against a list of specific, exact values (like days of the week, menu options, or specific strings).

Your Assignment

Ready to put this into practice? Try writing the following programs in your code editor:

1. Number Checker: Write a program using if-else that takes a number and prints whether it is positive, negative, or zero.

2. Day of the Week: Write a program using switch that takes a number from 1 to 7 and prints the corresponding day of the week (1 = Monday, 2 = Tuesday, etc.).

3. Reflect: Explain in your own words why you chose if-else for the first program and switch for the second.

Today, we are going to look at variables, the different types of data they can hold, and how to use them effectively.

What is a Variable?

Think of a variable as a labeled storage box. When you are moving to a new house, you pack your books in a box and write "Books" on the outside. In JavaScript, you do the exact same thing with information. You create a "box" (the variable), give it a descriptive name (the label), and put data inside it (the value).

Whenever you need that data later, you just call the variable by its name.

Declaring Variables: var, let, and const

In JavaScript, we have three keywords to create (or "declare") these storage boxes: var, let, and const.

1. let (The Flexible Box)

Use let when you know the value inside the box will change later on.

let currentAge = 25;
console.log(currentAge); // Output: 25

// Fast forward a year...
currentAge = 26; 
console.log(currentAge); // Output: 26

2. const (The Locked Box)

Use const (short for constant) when the value should never change. Once you put something in a const box and seal it, you cannot swap it out.

const birthYear = 1998;
// birthYear = 1999; // ❌ This will throw an error!

3. var (The Old School Box)

Before let and const were introduced, var was the only way to declare variables. You will see it in older codebases, but it behaves a bit unpredictably compared to modern standards. For now, stick to let and const for your projects!

Understanding Scope (A Beginner-Friendly View)

The main difference between how variables behave usually comes down to scope. Scope simply defines where your variable is allowed to be used.

Imagine your house:

• Global Scope: A variable declared out in the open. It’s like the WiFi router in your living room - anyone in the house can access it.

• Block Scope (let and const): Variables declared inside a block of code (like inside { } brackets) are stuck in that specific room. If you leave a book in your bedroom, someone in the kitchen can't read it.

Primitive Data Types

Now that we have our boxes, what kind of data can we put inside them? JavaScript has a few basic building blocks called primitive data types:

• String: Text wrapped in quotes.

  let name = "Divyanshu";

• Number: Exactly what it sounds like. No quotes needed!

  let age = 25;

• Boolean: A simple True or False switch. Great for checking states.

  let isLearningReact = true;

• Undefined: A box that has been created but doesn't have anything inside it yet.

  let futureJob; (Value is undefined)

• Null: An intentionally empty box. You are deliberately saying "there is nothing here."

  let emptyValue = null;

Let's Practice! (Your Assignment)

The best way to learn is by doing. Open up your browser console or your favorite code editor and try this:

1. Declare a const variable for your Name.

2. Declare a let variable for your Age.

3. Declare a boolean variable called IsStudent indicating if you are currently studying.

4. Print them all using console.log().

5. Challenge: Try to change the value of your Age, and then try to change your Name. Observe what happens!

// Give it a try before checking the answer below!
const myName = "Divyanshu";
let myAge = 25;
let isStudent = true;

console.log(myName, myAge, isStudent);

myAge = 26; // This works!
// myName = "Alex"; // This will crash!

Core comparison

Here is a comparison table outlining the key differences between var, let, and const in JavaScript. This comparison is primarily based on scope, redeclaration, and reassignment capabilities.

Comparison Table: var, let, and const

Understanding how to store and manage data is your first major step into JavaScript.