DEV Community: Harman Panwar

Understanding this, call(), apply(), and bind() in JavaScript

Harman Panwar — Sun, 15 Mar 2026 09:11:41 +0000

In JavaScript, the keyword this is used inside functions to refer to the object that is calling the function.

A simple way to think about it is:

this means “who is calling the function.”

Understanding this helps when working with objects, methods, and advanced function behaviors.

What `this` Means in JavaScript

The value of this depends on how a function is called.

Example:

let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet();

Output:

Hello, my name is Alice

Here:

this refers to the person object
this.name accesses the object's property

`this` Inside Normal Functions

In a normal standalone function, this usually refers to the global object (or undefined in strict mode).

Example:

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

showThis();

Since the function is not called by any object, this does not refer to a specific object.

`this` Inside Objects

When a function is called as a method of an object, this refers to that object.

Example:

let car = {
  brand: "Toyota",
  showBrand: function() {
    console.log(this.brand);
  }
};

car.showBrand();

Output:

Toyota

Here:

this refers to the car object
this.brand accesses its property

What `call()` Does

The call() method allows us to call a function and specify what this should refer to.

Example:

let person1 = {
  name: "Alice"
};

let person2 = {
  name: "Bob"
};

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

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

Output:

Hello Alice
Hello Bob

Here, call() lets us borrow a function and run it with a different object.

What `apply()` Does

apply() works almost the same as call().

The difference is how arguments are passed.

call() passes arguments individually
apply() passes arguments as an array

Example:

function introduce(city, country) {
  console.log(this.name + " lives in " + city + ", " + country);
}

let person = {
  name: "Alice"
};

introduce.apply(person, ["Paris", "France"]);

Output:

Alice lives in Paris, France

What `bind()` Does

bind() does not immediately call the function.

Instead, it creates a new function with this permanently set.

Example:

let person = {
  name: "Alice"
};

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

let greetAlice = greet.bind(person);

greetAlice();

Output:

Hello Alice

Here:

bind() creates a new function
this will always refer to person

Difference Between `call()`, `apply()`, and `bind()`

Method	Executes Immediately	Arguments	Result
call()	Yes	Passed individually	Calls function with specified `this`
apply()	Yes	Passed as array	Calls function with specified `this`
bind()	No	Passed individually	Returns a new function

Example comparison:

function greet(city) {
  console.log(this.name + " from " + city);
}

let person = { name: "Alice" };

greet.call(person, "London");
greet.apply(person, ["London"]);

let greetBound = greet.bind(person);
greetBound("London");

Assignment

Questions

Create an object with a method that uses this.
Borrow that method using call().
Use apply() with array arguments.
Use bind() and store the function in a variable.

Answers

1. Create an Object with a Method

let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet();

2. Borrow the Method Using `call()`

let person2 = {
  name: "Bob"
};

person.greet.call(person2);

Output:

Hello, my name is Bob

3. Use `apply()` with Array Arguments

function introduce(city, country) {
  console.log(this.name + " lives in " + city + ", " + country);
}

let person = {
  name: "Alice"
};

introduce.apply(person, ["Paris", "France"]);

4. Use `bind()` and Store the Function

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

let person = {
  name: "Alice"
};

let boundGreet = greet.bind(person);

boundGreet();

Output:

Hello Alice

Conclusion

The keyword this helps functions access the object that is calling them. Methods like call(), apply(), and bind() allow us to control what this refers to.

Understanding these concepts makes it easier to reuse functions, borrow methods between objects, and manage function behavior in JavaScript.

Introduction to Object-Oriented Programming (OOP) in JavaScript

Harman Panwar — Sun, 15 Mar 2026 09:06:39 +0000

As programs grow larger, organizing code becomes more important. Object-Oriented Programming (OOP) is a programming approach that helps structure code using objects and classes.

OOP focuses on modeling real-world entities in code and encourages reusability, organization, and clarity.

What is Object-Oriented Programming?

Object-Oriented Programming (OOP) is a programming style where we organize code around objects rather than just functions and variables.

An object represents something in the real world and contains:

Properties → data about the object
Methods → actions the object can perform

Example:

A person may have:

name
age
city

And actions like:

introduce themselves
walk
speak

OOP allows us to represent these structures in code.

Real-World Analogy: Blueprint → Objects

A good way to understand OOP is through a blueprint analogy.

Imagine a car factory.

A blueprint defines how a car should be built.
Many cars can be created from the same blueprint.

In programming:

Real World	Programming
Blueprint	Class
Car	Object

A class defines the structure, and objects are created from that structure.

What is a Class in JavaScript?

A class is a template used to create objects.

It defines:

what properties objects will have
what methods objects can use

Example:

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

Here:

Person is the class
name and age are properties

Creating Objects Using Classes

Objects are created from classes using the new keyword.

Example:

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

let person1 = new Person("Alice", 25);
let person2 = new Person("Bob", 30);

console.log(person1.name);
console.log(person2.age);

Output:

Alice
30

Each object gets its own data.

Constructor Method

The constructor is a special method used when creating objects from a class.

It is used to initialize properties.

Example:

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

let car1 = new Car("Toyota", "Corolla");

console.log(car1.brand);

Output:

Toyota

The constructor runs automatically when a new object is created.

Methods Inside a Class

Classes can also contain methods, which define actions for objects.

Example:

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

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

let person1 = new Person("Alice", 25);

person1.greet();

Output:

Hello, my name is Alice

Here:

greet() is a method
this.name refers to the object's name

Basic Idea of Encapsulation

Encapsulation means keeping data and related behavior together inside an object.

Instead of spreading data and functions across the program, OOP groups them inside classes.

Example:

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

  introduce() {
    console.log("I am " + this.name + " and I am " + this.age + " years old.");
  }
}

Here:

The data (name, age)
And the behavior (introduce())

are kept together inside the class.

This makes code easier to understand and maintain.

Why Use OOP?

Object-Oriented Programming helps developers:

Organize large programs
Reuse code efficiently
Model real-world systems
Keep code cleaner and easier to maintain

Many modern applications rely heavily on OOP concepts.

Assignment

Questions

Create a class called Student.
Add properties such as:

name
age

Add a method that prints the student details.
Create multiple student objects using the class.

Answers

1. Create the Student Class

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

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

2. Create Student Objects

let student1 = new Student("Rahul", 20);
let student2 = new Student("Anita", 22);

3. Call the Method

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

Output:

Student Name: Rahul
Age: 20

Student Name: Anita
Age: 22

Conclusion

Object-Oriented Programming helps structure code using classes and objects. A class acts as a blueprint, and objects are created from that blueprint.

By using constructors and methods, we can represent real-world entities clearly in code. Learning OOP is an important step toward writing organized, reusable, and scalable JavaScript programs.

Objects in JavaScript

Harman Panwar — Sun, 15 Mar 2026 08:26:06 +0000

In many programs, we need to represent real-world entities such as a person, a student, a product, or a car. These entities often have multiple related properties.

JavaScript provides objects to organize this type of data in a clear and structured way.

What Are Objects and Why Do We Need Them?

An object is a data structure that stores information as key-value pairs.

Each piece of data has:

a key (also called a property name)
a value (the data stored in that property)

Example:

let person = {
  name: "Alice",
  age: 25,
  city: "London"
};

Here:

Key	Value
name	"Alice"
age	25
city	"London"

Objects help us:

Represent real-world data
Organize related information together
Access and update data easily

Array vs Object

It is helpful to understand the difference between arrays and objects.

Array

Arrays store ordered values and are accessed using indexes.

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

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

Object

Objects store named values and are accessed using keys.

let person = {
  name: "Alice",
  age: 25
};

console.log(person.name); // Alice

Summary:

Feature	Array	Object
Structure	Ordered list	Key-value pairs
Access	Index (0,1,2)	Key name
Use case	Lists of values	Structured data

Creating Objects

Objects are created using curly braces {}.

Example:

let person = {
  name: "John",
  age: 30,
  city: "New York"
};

Each property is written as:

key: value

Multiple properties are separated by commas.

Accessing Properties

There are two ways to access object properties:

Dot notation
Bracket notation

Dot Notation

This is the most common way.

let person = {
  name: "John",
  age: 30
};

console.log(person.name);
console.log(person.age);

Output:

John
30

Bracket Notation

Properties can also be accessed using brackets.

let person = {
  name: "John",
  age: 30
};

console.log(person["name"]);
console.log(person["age"]);

Output:

John
30

Bracket notation is useful when the property name is stored in a variable.

Example:

let key = "name";
console.log(person[key]);

Updating Object Properties

You can update the value of an existing property.

Example:

let person = {
  name: "John",
  age: 30
};

person.age = 31;

console.log(person);

Output:

{ name: "John", age: 31 }

Adding New Properties

New properties can be added easily.

Example:

let person = {
  name: "John",
  age: 30
};

person.city = "Paris";

console.log(person);

Output:

{ name: "John", age: 30, city: "Paris" }

Deleting Properties

Properties can be removed using the delete keyword.

Example:

let person = {
  name: "John",
  age: 30,
  city: "Paris"
};

delete person.city;

console.log(person);

Output:

{ name: "John", age: 30 }

Looping Through Object Keys

To go through all properties of an object, we can use a for...in loop.

Example:

let person = {
  name: "Alice",
  age: 25,
  city: "London"
};

for (let key in person) {
  console.log(key, person[key]);
}

Output:

name Alice
age 25
city London

Explanation:

key represents each property name
person[key] retrieves its value

Assignment

Questions

Create an object representing a student.
Add properties such as:

name
age
course

Update one property.
Print all keys and values using a loop.

Answers

1. Create a Student Object

let student = {
  name: "Rahul",
  age: 20,
  course: "Computer Science"
};

2. Update One Property

student.age = 21;

console.log(student);

Output:

{ name: "Rahul", age: 21, course: "Computer Science" }

3. Print All Keys and Values

for (let key in student) {
  console.log(key, student[key]);
}

Output:

name Rahul
age 21
course Computer Science

Conclusion

Objects are an essential part of JavaScript because they allow us to represent structured data using key-value pairs. They are commonly used to represent real-world entities such as users, products, or students.

By learning how to create objects, access properties, update values, and loop through keys, you build a strong foundation for working with more complex data in JavaScript applications.

Arrow Functions in JavaScript

Harman Panwar — Sun, 15 Mar 2026 06:29:34 +0000

Modern JavaScript introduced arrow functions to make writing functions shorter and cleaner. They reduce unnecessary syntax and help developers write more readable code.

Arrow functions are commonly used in modern JavaScript, especially when working with arrays, callbacks, and functional programming patterns.

Why Arrow Functions?

Sometimes normal functions require extra boilerplate code.

Example using a normal function:

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

The same function written with an arrow function:

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

The arrow syntax removes the need for the function keyword and makes the code more compact.

Basic Arrow Function Syntax

The general syntax of an arrow function looks like this:

const functionName = (parameters) => {
  // code
};

Example:

const greet = () => {
  console.log("Hello!");
};

greet();

Output:

Hello!

Arrow Functions with One Parameter

If an arrow function has only one parameter, the parentheses are optional.

Example:

Normal function:

function square(num) {
  return num * num;
}

Arrow function:

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

Both functions do the same thing.

Arrow Functions with Multiple Parameters

When there are multiple parameters, parentheses are required.

Example:

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

console.log(multiply(3, 4));

Output:

Implicit Return vs Explicit Return

Arrow functions support two styles of returning values.

Explicit Return

This works just like normal functions.

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

You explicitly write the return keyword.

Implicit Return

If the function body has only one expression, you can remove the braces {} and the return keyword.

Example:

const add = (a, b) => a + b;

console.log(add(3, 5));

Output:

This is called an implicit return because JavaScript automatically returns the result.

Arrow Function Example with Greetings

Normal function:

function greet(name) {
  return "Hello " + name;
}

Arrow function:

const greet = name => "Hello " + name;

console.log(greet("Alice"));

Output:

Hello Alice

Basic Difference Between Arrow Functions and Normal Functions

Feature	Normal Function	Arrow Function
Syntax	Uses `function` keyword	Uses `=>`
Code length	More verbose	Shorter and cleaner
Modern usage	Older style	Preferred in modern JS
Return behavior	Always explicit	Can be implicit

Arrow functions are widely used in modern JavaScript because they reduce boilerplate code and improve readability.

Arrow Functions with map()

Arrow functions are often used with array methods like map().

Example:

let numbers = [1, 2, 3, 4];

let doubled = numbers.map(num => num * 2);

console.log(doubled);

Output:

[2, 4, 6, 8]

Using arrow functions makes this code short and easy to read.

Assignment

Questions

Write a normal function that calculates the square of a number.
Rewrite the same function using an arrow function.
Create an arrow function that returns whether a number is even or odd.
Use an arrow function inside map() on an array.

Answers

1. Normal Function to Calculate Square

function square(num) {
  return num * num;
}

console.log(square(5));

Output:

2. Arrow Function Version

const square = num => num * num;

console.log(square(5));

Output:

3. Arrow Function to Check Even or Odd

const checkEvenOdd = num => {
  if (num % 2 === 0) {
    return "Even";
  } else {
    return "Odd";
  }
};

console.log(checkEvenOdd(6));
console.log(checkEvenOdd(7));

Output:

Even
Odd

4. Arrow Function with map()

let numbers = [1, 2, 3, 4];

let squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers);

Output:

[1, 4, 9, 16]

Conclusion

Arrow functions provide a shorter and more modern way to write functions in JavaScript. They improve readability, reduce unnecessary syntax, and work especially well with array methods like map() and filter().

As you continue learning JavaScript, you will frequently see arrow functions used in modern codebases.

Common Array Methods in JavaScript

Harman Panwar — Sun, 15 Mar 2026 06:16:15 +0000

Arrays become much more powerful when we use built-in array methods. These methods allow us to easily add, remove, or transform elements without writing complex loops.

In this article, we will learn some commonly used array methods:

push()
pop()
shift()
unshift()
map()
filter()
reduce()
forEach()

These methods help make code shorter, clearer, and easier to maintain.

push() and pop()

push()

The push() method adds an element to the end of an array.

Example

Before:

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

fruits.push("Orange");
console.log(fruits);

After:

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

pop()

The pop() method removes the last element from an array.

Example

Before:

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

fruits.pop();
console.log(fruits);

After:

["Apple", "Banana"]

shift() and unshift()

shift()

The shift() method removes the first element from an array.

Example

Before:

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

fruits.shift();
console.log(fruits);

After:

["Banana", "Mango"]

unshift()

The unshift() method adds an element to the beginning of an array.

Example

Before:

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

fruits.unshift("Apple");
console.log(fruits);

After:

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

forEach()

The forEach() method runs a function once for every element in an array.

Example array:

let numbers = [1, 2, 3];

Example:

numbers.forEach(function(num) {
  console.log(num);
});

Output:

1
2
3

forEach() is often used when you simply want to perform an action for each element.

map()

The map() method creates a new array by transforming each element of the original array.

Example array:

let numbers = [1, 2, 3];

Example:

let doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);

Output:

[2, 4, 6]

Original array remains unchanged:

console.log(numbers);

[1, 2, 3]

Traditional Loop vs map()

Using a for loop

let numbers = [1, 2, 3];
let doubled = [];

for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

Using map()

let doubled = numbers.map(function(num) {
  return num * 2;
});

map() is usually shorter and easier to read.

filter()

The filter() method creates a new array containing only elements that meet a condition.

Example:

let numbers = [5, 10, 15, 20];

let result = numbers.filter(function(num) {
  return num > 10;
});

console.log(result);

Output:

[15, 20]

Original array:

[5, 10, 15, 20]

filter() keeps elements that return true from the condition.

reduce() (Basic Explanation)

The reduce() method reduces an array to a single value.

It is often used for tasks like:

Calculating totals
Summing numbers
Combining values

Example array:

let numbers = [1, 2, 3, 4];

Example:

let sum = numbers.reduce(function(total, num) {
  return total + num;
}, 0);

console.log(sum);

Output:

Explanation:

total keeps the running result
num is the current element
0 is the starting value

The function runs for each element until the final result is produced.

Try These Examples Yourself

A good way to understand array methods is to run them in the browser console or Node.js.

Experiment by changing numbers, adding elements, or modifying conditions.

Assignment

Questions

Create an array of numbers.
Use map() to double each number.
Use filter() to get numbers greater than 10.
Use reduce() to calculate the total sum of the numbers.

Answers

1. Create an Array

let numbers = [5, 10, 15, 20];

2. Use map() to Double Each Number

let doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);

Output:

[10, 20, 30, 40]

3. Use filter() for Numbers Greater Than 10

let greaterThanTen = numbers.filter(function(num) {
  return num > 10;
});

console.log(greaterThanTen);

Output:

[15, 20]

4. Use reduce() to Calculate the Sum

let sum = numbers.reduce(function(total, num) {
  return total + num;
}, 0);

console.log(sum);

Output:

Conclusion

Array methods such as push(), pop(), map(), filter(), reduce(), and forEach() make working with arrays much easier and more expressive.

Learning these methods allows developers to write cleaner code and handle data more efficiently. As you continue learning JavaScript, these methods will become essential tools for solving real-world problems.

Arrays in JavaScript: Storing Multiple Values Efficiently

Harman Panwar — Sun, 15 Mar 2026 05:42:36 +0000

In programming, we often need to work with multiple related values. For example, a list of fruits, student marks, or daily tasks. Storing each value in a separate variable quickly becomes messy and hard to manage.

This is where arrays become useful. Arrays allow us to store multiple values in a single variable and access them easily using their position.

What Are Arrays and Why Do We Need Them?

An array is a data structure used to store a collection of values in a specific order.

Instead of creating many variables like this:

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

We can store them in a single array:

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

Benefits of using arrays:

Store multiple related values in one place
Easier to manage and organize data
Simplifies looping through data
Makes code cleaner and more scalable

How to Create an Array

Arrays are created using square brackets [].

Example

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

Another example with numbers:

let marks = [85, 90, 78, 92];

Each value inside the array is called an element.

Accessing Elements Using Index

Every element in an array has a position, called its index.

Important rule:

Array indexing starts from **0, not 1.

Example array:

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

Index	Value
0	Apple
1	Banana
2	Mango

Accessing elements:

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

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

The number inside the brackets tells JavaScript which position to retrieve.

Updating Elements

Array elements can be updated by assigning a new value to a specific index.

Example:

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

fruits[1] = "Orange";

console.log(fruits);

Output:

["Apple", "Orange", "Mango"]

Here we replaced "Banana" with "Orange".

Array Length Property

The length property tells us how many elements are in the array.

Example:

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

console.log(fruits.length);

Output:

The length property is also useful when working with loops.

Basic Looping Over Arrays

Often we want to process every element in an array. The easiest way to do this is using a for loop.

Example:

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

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

Output:

Apple
Banana
Mango

Explanation:

i starts at 0 (first index)
The loop runs until i reaches the array length
Each iteration prints the element at position i

Assignment

Try the following exercises to practice working with arrays.

Questions

Create an array containing 5 of your favorite movies.
Print the first element and last element of the array.
Change one value in the array and print the updated array.
Loop through the array and print all elements.

Answers

1. Create an Array of Movies

let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];

2. Print the First and Last Element

let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];

console.log(movies[0]); // first movie
console.log(movies[movies.length - 1]); // last movie

3. Change One Value

let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];

movies[2] = "Your Name";

console.log(movies);

4. Loop Through the Array

let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];

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

Conclusion

Arrays are an essential part of JavaScript because they allow us to store and manage collections of data efficiently. By understanding how to create arrays, access elements, update values, and loop through them, you build a strong foundation for working with larger datasets in real-world applications.

Functions in JavaScript: Declarations, Expressions, and Hoisting

Harman Panwar — Sun, 15 Mar 2026 04:42:13 +0000

Functions are one of the most important building blocks in programming. They allow developers to organize code into reusable units that perform specific tasks. In JavaScript, functions help reduce repetition, improve readability, and make programs easier to maintain.

This article explains what functions are, why they are needed, how to declare them, how function expressions work, and the basic concept of hoisting.

What Are Functions and Why Do We Need Them?

A function is a reusable block of code designed to perform a specific task. Instead of writing the same code repeatedly, you can place it inside a function and call it whenever needed.

Functions help with:

Code reuse — write once, use many times
Better organization — divide large programs into smaller pieces
Maintainability — easier to update or fix code
Readability — makes code easier to understand

Example: Adding Two Numbers

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

let result = add(3, 4);
console.log(result); // 7

Here:

add is the function name
a and b are parameters
return sends the result back to where the function was called

Instead of rewriting addition logic multiple times, we simply call add() whenever needed.

Function Declaration Syntax

A function declaration defines a function using the function keyword followed by a name.

Syntax

function functionName(parameters) {
  // code to execute
}

Example

function greet(name) {
  return "Hello " + name;
}

console.log(greet("Alice"));

Output:

Hello Alice

Characteristics of function declarations:

Must have a name
Defined using the function keyword
Can be called before or after their definition due to hoisting

Function Expression Syntax

A function expression is when a function is assigned to a variable.

Syntax

const variableName = function(parameters) {
  // code
};

Example

const greet = function(name) {
  return "Hello " + name;
};

console.log(greet("Alice"));

In this case:

The function does not need a name
It is stored inside a variable
It behaves like any other variable

Function expressions are commonly used when functions are passed around as values.

Declaration vs Expression (Side-by-Side Comparison)

Function Declaration

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

console.log(add(2, 3));

Function Expression

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

console.log(add(2, 3));

Both versions produce the same output. However, they behave differently internally.

Key Differences

Feature	Function Declaration	Function Expression
Syntax	Uses `function name()`	Assigned to a variable
Name	Must have a name	Often anonymous
Hoisting	Fully hoisted	Only variable is hoisted
Use Case	General reusable functions	Flexible usage, callbacks

Basic Idea of Hoisting

Hoisting is JavaScript's behavior where certain declarations are moved to the top of their scope during execution.

For functions, this affects whether they can be called before they appear in the code.

Example: Function Declaration

sayHello();

function sayHello() {
  console.log("Hello!");
}

This works because the function declaration is hoisted.

Example: Function Expression

sayHello();

const sayHello = function() {
  console.log("Hello!");
};

This causes an error because the variable exists but the function is not yet assigned when it is called.

In simple terms:

Function declarations work before definition
Function expressions do not

When to Use Each Type

Use Function Declarations When

You want a clear, reusable function
The function is a core part of the program
You want the ability to call it before it appears in the file

Example:

function calculateTotal(price, tax) {
  return price + tax;
}

Use Function Expressions When

Assigning functions to variables
Passing functions as arguments
Creating functions inside other functions
Writing callbacks

Example:

const numbers = [1, 2, 3];

numbers.forEach(function(num) {
  console.log(num);
});

Assignment Practice

1. Function Declaration

Write a function that multiplies two numbers.

function multiply(a, b) {
  return a * b;
}

console.log(multiply(3, 4));

2. Function Expression

Write the same logic using a function expression.

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(3, 4));

3. Experiment With Hoisting

Try calling them before they are defined.

Example:

console.log(multiply(3, 4));

function multiply(a, b) {
  return a * b;
}

Now try the same with a function expression and observe the difference.

Conclusion

Functions are essential for writing clean, reusable, and maintainable JavaScript code. Understanding the difference between function declarations and function expressions helps developers choose the right approach depending on the situation. Additionally, knowing the basic idea of hoisting prevents common mistakes when calling functions before they are defined.

Mastering these fundamentals builds a strong foundation for more advanced JavaScript concepts such as callbacks, arrow functions, and asynchronous programming.

Understanding Control Flow in JavaScript

Harman Panwar — Wed, 11 Mar 2026 15:13:13 +0000

When writing programs, the computer normally executes code line by line from top to bottom.
However, real programs often need to make decisions.

For example:

Should a user be allowed to log in?
Did a student pass or fail?
What day of the week should be displayed?

The way programs control the order in which code runs is called control flow.

JavaScript provides several control flow structures that help us make decisions in code.

Real-Life Example of Control Flow

Think about a simple real-life decision.

You want to go outside.

If it is raining → take an umbrella
Else → go outside normally

Programming works in the same way. The program checks a condition, then decides what code to run.

The `if` Statement

The if statement runs a block of code only if a condition is true.

Syntax

if (condition) {
    // code runs if condition is true
}

Example

let age = 20;

if (age >= 18) {
    console.log("You are an adult");
}

Step-by-Step Execution

JavaScript checks the condition age >= 18

Since 20 >= 18 is true

The message "You are an adult" is printed

If the condition were false, the code inside the block would not run.

The `if-else` Statement

Sometimes we want two possible outcomes.

For example:

If marks ≥ 40 → pass
Otherwise → fail

This is where if-else is used.

Syntax

if (condition) {
    // runs if condition is true
} else {
    // runs if condition is false
}

Example

let marks = 35;

if (marks >= 40) {
    console.log("You passed");
} else {
    console.log("You failed");
}

Execution

JavaScript checks marks >= 40

35 >= 40 is false

The else block runs

Output:

You failed

The `else if` Ladder

Sometimes we need multiple conditions.

Example:

Marks ≥ 90 → Grade A
Marks ≥ 75 → Grade B
Marks ≥ 50 → Grade C
Otherwise → Fail

This is called an else-if ladder.

Example

let marks = 78;

if (marks >= 90) {
    console.log("Grade A");
} 
else if (marks >= 75) {
    console.log("Grade B");
} 
else if (marks >= 50) {
    console.log("Grade C");
} 
else {
    console.log("Fail");
}

How It Works

JavaScript checks conditions one by one:

marks >= 90 → false

marks >= 75 → true

JavaScript prints Grade B

The remaining conditions are skipped

The `switch` Statement

A switch statement is useful when you want to compare one value against multiple possible cases.

Syntax

switch(value) {
    case option1:
        // code
        break;

    case option2:
        // code
        break;

    default:
        // code if no match
}

Example: Day of the Week

let day = 3;

switch(day) {
    case 1:
        console.log("Monday");
        break;

    case 2:
        console.log("Tuesday");
        break;

    case 3:
        console.log("Wednesday");
        break;

    case 4:
        console.log("Thursday");
        break;

    default:
        console.log("Invalid day");
}

Output:

Wednesday

Why `break` Is Important in Switch

The break statement stops execution after a case runs.

Without break, JavaScript will continue executing the next cases.

Example without break:

let day = 1;

switch(day) {
    case 1:
        console.log("Monday");

    case 2:
        console.log("Tuesday");
}

Output:

Monday
Tuesday

This happens because the program falls through to the next case.

Using break prevents this.

When to Use `switch` vs `if-else`

Use `if-else` when:

Conditions involve ranges
Logical comparisons are needed

Example:

marks > 40
age >= 18
temperature < 10

Use `switch` when:

You compare one variable
It has multiple specific values

Example:

day = Monday, Tuesday, Wednesday
menu option = 1, 2, 3
role = admin, user, guest

Assignment Practice

1️⃣ Check if a Number Is Positive, Negative, or Zero

2️⃣ Print the Day of the Week Using switch

Solution to 1.

let num = -5;

if (num > 0) {
    console.log("Positive number");
}
else if (num < 0) {
    console.log("Negative number");
}
else {
    console.log("Zero");
}

Explanation

An else-if ladder is used because we need to check multiple conditions.

Solution to 2.

let day = 5;

switch(day) {
    case 1:
        console.log("Monday");
        break;

    case 2:
        console.log("Tuesday");
        break;

    case 3:
        console.log("Wednesday");
        break;

    case 4:
        console.log("Thursday");
        break;

    case 5:
        console.log("Friday");
        break;

    default:
        console.log("Invalid day");
}

Explanation

A switch statement is used because the variable day can match specific fixed values.

Understanding JavaScript Operators

Harman Panwar — Wed, 11 Mar 2026 08:53:28 +0000

When learning JavaScript, one of the first things you encounter is operators.
Operators allow us to perform calculations, compare values, and build logical conditions in our programs.

In this article, we'll explore the most commonly used JavaScript operators with simple examples.

What Are Operators?

Operators are symbols used to perform operations on values or variables.

For example:

let a = 10;
let b = 5;

let result = a + b;
console.log(result);

Output: 15

Here, the + symbol is an operator that adds two numbers.

Operators are used constantly in JavaScript programs for tasks like:

Performing mathematical calculations
Comparing values
Building conditions
Assigning values to variables Let's look at the most common types of operators.

Arithmetic Operators

Arithmetic operators perform basic mathematical calculations.

Operator	Meaning	Example
+	Addition	5 + 3
-	Subtraction	5 - 3
*	Multiplication	5 * 3
/	Division	6 / 2
%	Modulus (remainder)	5 % 2

Example

let a = 10;
let b = 3;

console.log("Addition:", a + b);
console.log("Subtraction:", a - b);
console.log("Multiplication:", a * b);
console.log("Division:", a / b);
console.log("Remainder:", a % b);

Output:

Addition: 13
Subtraction: 7
Multiplication: 30
Division: 3.333
Remainder: 1

The % operator returns the remainder after division.

Comparison Operators

Comparison operators compare two values and return either true or false.

Operator	Meaning
==	Equal to
===	Strict equal
!=	Not equal
>	Greater than
<	Less than

Example

console.log(5 > 3);  // true
console.log(5 < 3);  // false
console.log(5 != 3); // true

These operators are mainly used inside conditions.

The Difference Between `==` and `===`

This is one of the most important concepts for JavaScript beginners.

Loose Equality (==)

== compares values after converting data types.

console.log(5 == "5");

Output:

true

JavaScript converts "5" (string) into 5 (number).

Strict Equality (`===`)

=== compares both value and data type.

console.log(5 === "5");

Output:

false

Because:

5 → number

"5" → string

Their types are different, so the result is false.

Because of this behavior, developers usually prefer using ===.

Logical Operators

Logical operators help combine multiple conditions.

 Operator  Description 

   &&      AND   

   ||      OR  

   !       NOT

AND Operator (`&&`)

Both conditions must be true.

let age = 20;

console.log(age > 18 && age < 30);

Output:

true

OR Operator (`||`)

Only one condition needs to be true.

let marks = 40;

console.log(marks > 90 || marks > 35);

Output:

true

NOT Operator (`!`)

Reverses the result.

console.log(!(5 > 3));

Output:

false

Assignment Operators

Assignment operators are used to assign values to variables.

Operator	Meaning
=	Assign value
+=	Add and assign
-=	Subtract and assign

Example

let x = 10;

x += 5;
console.log(x);

x -= 3;
console.log(x);

Output:

15
12

Here:

x += 5

is the same as:

x = x + 5

Practice Assignment

Try running these examples in the browser console or Node.js.

1️⃣ Perform Arithmetic Operations

let a = 12;
let b = 4;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

2️⃣ Compare Values

let num = 10;
let str = "10";

console.log(num == str);
console.log(num === str);

3️⃣ Logical Condition Example

let age = 22;

if (age > 18 && age < 30) {
    console.log("You are a young adult");
}

JavaScript Variables and Data Types (Beginner Guide)

Harman Panwar — Wed, 04 Mar 2026 12:11:50 +0000

1. What Are Variables?

Think of a variable like a box that stores information.

Imagine you have labeled boxes:

One box stores your name

Another stores your age

Another stores whether you are a student

In programming, we store information inside variables so the computer can use it later.

Example:

let name = "Rahul";
let age = 18;

Here:

name stores "Rahul"

age stores 18

So a variable is simply a container for storing data.

2. How to Declare Variables in JavaScript

In JavaScript, we can create variables using three keywords:

var
let
const

Using `var`

var city = "Delhi";

varwas used in older JavaScript versions. It still works but is less recommended today.

Using `let`

let age = 20;

letis commonly used when the value may change later.

Example:

let score = 10;
score = 15;

Now scorebecomes 15.

Using `const`

const country = "India";

constmeans constant, which means the value cannot be changed later.

Example:

const pi = 3.14;

Trying to change it will cause an error.

3. Primitive Data Types in JavaScript

A data type describes what kind of value a variable stores.

JavaScript has several primitive data types.

1. String

A string stores text.

Example:

let name = "Aman";

Other examples:

let city = "Mumbai";
let message = "Hello World";

Strings are written inside quotes ("" or '').

2. Number

A **number **stores numeric values.

Example:

let age = 18;
let price = 99.99;

Numbers can be:

Whole numbers → 20

Decimal numbers → 10.5

3. Boolean

A boolean stores only two values:

true
false

Example:

let isStudent = true;
let isLoggedIn = false;

This type is commonly used for conditions and decisions.

4. Null

nullrepresents an empty value.

Example:

let result = null;

It means the variable exists but currently has no value.

5. Undefined

A variable is undefined when it is declared but not given a value.

Example:

let score;

Since we didn't assign anything, the value is undefined.

4. Difference Between var, let, and const

Keyword	Can Change Value?	Modern Usage
var	Yes	Mostly avoided
let	Yes	Recommended
const	No	Recommended for fixed values

Example:

let age = 18;
age = 19; // allowed

const country = "India";
country = "USA"; // error

5. What is Scope? (Beginner Explanation)

Scope means where a variable can be used in your code.

Think of scope like rooms in a house.

If you keep a box in your bedroom, it can only be accessed in that room.

Similarly, some variables can only be used inside certain parts of the code.

Example:

{
  let message = "Hello";
  console.log(message);
}

Here message works inside the block, but outside it cannot be used.

This helps keep code organized and safe.

6. Practical Example

let name = "Rohan";
let age = 19;
let isStudent = true;

console.log(name);
console.log(age);
console.log(isStudent);

Output in console:

Rohan 19 true

Assignment Practice

Try writing the following code:

let name = "Rahul";
let age = 18;
let isStudent = true;

console.log(name);
console.log(age);
console.log(isStudent);

Now experiment:

Change the value of name
Change the value of age
Try creating a constvariable and change it

Example:

const country = "India";
country = "USA"; // observe the error

Observe how JavaScript behaves.

The Deadly promise dungeon

Harman Panwar — Sun, 01 Mar 2026 13:14:15 +0000

“Are you really going to pay us 10 million zeni?” Takumi exclaimed when the contractor casually mentioned the reward.

“Yeah… kid, I’m a generous man.” The contractor smiled sheepishly.

Takumi and his party bowed immediately. “Thank you so much!”

Ten minutes later — on the way to the dungeon

“You know why he agreed to pay that much, right?” Shiro asked quietly.

Takumi didn’t look at him. “Yeah. I know.”

“The contract says we get paid… if we come back alive.”

“Ehhhhhh?!” Haruka shrieked. “Takumi, you jerk! You didn’t tell me that part!”

“Now, now, calm down,” Mathew said, cracking his knuckles. “We’re already here. No point backing out when retirement money’s waiting.”

“Th-this place looks cursed…” the fifth member muttered.

They stood before a massive stone entrance carved with glowing letters:

Promise Dungeon

The air around it felt heavy.

“This is… super creepy,” Haruka whispered.

They stepped inside.

A long corridor stretched ahead. Five doors stood at the end.

Above the first door glowed:

“.then()”

A board hung beside it.

“This chamber connects to four sequential rooms and one final ‘.catch()’ chamber. Each member must enter a separate room. The first member receives a puzzle. If solved, the result is passed forward to the next chamber. This continues sequentially. If any member fails, they fall into the ‘.catch()’ chamber and perish.”
Silence filled the corridor.

“So it’s like a chain…” Shiro muttered.

“Umm… shall we go?” Mathew said.

“Wait… my stomach hurts,” Shiro whispered, clutching his side.

No one laughed.

They each chose a door.

Takumi entered first.

The First .then() Room

The door shut behind him.

A steel table stood in the center. On it: a thin honey disk and a needle.

A mechanical voice echoed:

“Carve along the outline without breaking the shape. Success allows you to return a new pattern. Failure results in rejection.”

Takumi flipped the disk.

A simple circle.

“Manageable.”

He steadied his breathing. The needle scraped carefully along the line. The candy trembled under pressure.

Minutes passed.

A soft click.

The circle separated perfectly.

The disk glowed.

“Fulfilled. Choose a pattern to return.”

Three shapes materialized:

Star
Umbrella
Dragon silhouette

Takumi frowned.

“So what I return… becomes the next challenge.”

He looked at the dragon. Then the umbrella.

“…Let’s keep it fair.”

He selected the star.

The disk dissolved into golden particles and vanished forward.

A new door opened.

Second .then() Room — Haruka

Haruka caught the glowing candy as it formed into a star.

“Takumi picked this… didn’t he?”

The star wasn’t easy, but it wasn’t cruel either.

Her fingers trembled at first.

“Don’t mess this up… don’t mess this up…”

A small crack formed near one edge.

She froze.

Adjusted her grip.

Carefully traced the final corner.

Click.

The star separated cleanly.

“Fulfilled. Choose a pattern to return.”

Three shapes appeared:

Triangle
Flower
Spider web

She stared at the web.

“Nope. Not today.”

She chose the flower.

The candy dissolved and moved forward.

Third .then() Room — Mathew

The flower formed in Mathew’s hand.

He chuckled.

“A flower? Cute.”

He carved it cleanly, almost effortlessly.

Click.

“Fulfilled. Choose a pattern to return.”

Three shapes appeared:

Square
Heart
Fractured lightning bolt with razor edges

Mathew’s eyes lingered on the lightning bolt.

“So… I decide the difficulty of the next.”

He imagined the others laughing. Competing for attention. For Haruka.

“We split the reward among survivors… right?”

A slow grin formed.

He selected the fractured lightning bolt.

“Let’s see how skilled our unnamed hero really is.”

The shape dissolved forward.

Fourth .then() Room — The Unnamed Member

The lightning bolt appeared before him.

“…Why does mine look insane?”

His palms were already sweating.

“O-Okay… steady…”

The needle touched the candy.

A crack formed instantly.

“No no no no—”

The fracture spread like a spiderweb.

The disk shattered.

The floor beneath him disappeared.

His scream echoed briefly before silence swallowed it.

The .catch() Chamber

In darkness below, broken fragments hovered midair.

A final glowing word appeared:

“Rejected.”

Then nothing.

The chain had failed.

Corridor Reunion

Takumi exited first.

Haruka followed.

Shiro emerged, pale.

Mathew stepped out last.

“…Where’s the other guy?” Haruka asked.

A pause.

Shiro exhaled slowly. “He must’ve failed.”

Mathew shrugged. “Dungeon rules were clear.”

Takumi clenched his fist but said nothing.

Ahead, a new chamber door opened.

Above it glowed:

“.finally()”

The .finally() Room

Unlike the previous chambers, this one held them all together.

In the center stood a furnace.

Beside it were the needles they had used.

A message illuminated the wall:

“Regardless of fulfillment or rejection, this chamber executes.”

“So this runs no matter what,” Shiro said quietly.

They tossed their needles into the furnace.

The flames burned briefly.

Then died.

Nothing changed.

No revival.

No additional punishment.

Their state remained the same:

One rejected.
Four remaining.

The next door slowly creaked open.

Carved deeply into iron:

“Promise.all()”

The “Promise.all()” Chamber

The iron door opened slowly.

The room was circular. No walls dividing them this time.

Four pedestals rose from the ground.

Four honey disks.

Above them, glowing in red:

“Promise.all()”

A board emerged.

“All members must fulfill their puzzle. If even one is rejected, all will perish.”

Silence.

Haruka whispered, “So if one of us fails…”

“We all die,” Shiro said.

Takumi nodded slowly. “This method binds us together.”

Needles slid out from each pedestal.

The honey disks shimmered.

Shapes appeared.

Takumi — a detailed compass.
Haruka — a thin-winged butterfly.
Shiro — a narrow six-point star.
Mathew — a spiral tightening inward.

Different difficulties.

On purpose.

Mathew smirked. “Hope none of you are dead weight.”

Takumi ignored him.

“Don’t rush. If anyone panics, we all die.”

The room vibrated.

“Begin.”

They carved.

No one spoke.

Every scratch of metal sounded like thunder.

Haruka’s hand trembled.

Shiro’s glasses fogged from sweat.

Mathew moved fast — too fast.

“Slow down,” Takumi said without looking at him.

“Worry about yourself.”

A crack echoed.

Everyone froze.

It came from Mathew’s spiral.

A thin fracture forming along the inner curve.

For a moment, something flickered in his eyes.

Fear.

Real fear.

Because this time, if he failed—

Haruka would die too.

Takumi spoke calmly.

“Stop. Breathe. Don’t push through the crack. Trace around it.”

Mathew’s jaw tightened.

He adjusted his angle.

Slowly… slowly…

The fracture stopped spreading.

Haruka finished first.

Click.

Shiro followed.

Click.

Takumi separated the final point of his compass.

Click.

All eyes turned to Mathew.

One last curve remained.

The spiral looked like it could collapse any second.

A drop of sweat fell onto the candy.

Haruka gasped.

Mathew didn’t move.

Then—

Carefully—

He completed the final line.

Click.

For three seconds, nothing happened.

Then all four pedestals glowed at once.

“All fulfilled.”

The door ahead unlocked.

The room did not collapse.

They were alive.

Haruka exhaled shakily. “That was… horrible.”

Shiro adjusted his glasses. “Mutual dependency. One failure equals total rejection.”

Takumi glanced at Mathew.

For the first time, Mathew wasn’t smirking.

He understood now.

In this room, sabotage meant suicide.

Above the next door, new letters burned into existence:

“Promise.race()”

The “Promise.race()” Chamber

The next door opened before they could catch their breath.

This room was smaller.

Four pedestals again.

Four honey disks.

Above them burned in sharp white letters:

“Promise.race()”

A board rose from the floor.

“All members will begin simultaneously. The first member to settle determines the outcome. If the first fulfillment occurs, all proceed. If the first rejection occurs, all perish.”

Haruka blinked.

“So… whoever finishes first decides everything?”

Shiro nodded slowly. “Not everyone. Just the first.”

Takumi’s expression darkened.

He understood immediately.

It didn’t matter what the others did.

Only the fastest result mattered.

Fulfilled or rejected.

The dungeon didn’t care which.

It just cared who settled first.

The shapes appeared.

Takumi — a square.
Haruka — a clover.
Shiro — a triangle.
Mathew — a thin, fragile crescent.

Mathew stared at his crescent.

Then at Haruka.

Then at Takumi.

Something in him finally collapsed.

Ten million zeni.

Haruka choosing Takumi.

Shared survival.

Shared reward.

He laughed quietly.

Takumi noticed.

Too quiet.

Too calm.

“Shiro,” Takumi said without looking away from Mathew.

Shiro adjusted his glasses.

“…Understood.”

The room vibrated.

“Begin.”

Before Mathew could move—

Shiro lunged.

He grabbed Mathew’s arms and slammed him against the pedestal.

“What the—?!”

“You were going to fail on purpose,” Takumi said coldly.

Mathew struggled. “Let me go!”

“If you shatter that candy first,” Takumi continued, carving calmly, “we all die.”

Haruka froze. “Mathew… you wouldn’t…”

Mathew’s eyes were wild.

“If I can’t have anything—”

Shiro tightened his grip. “Then none of us should? Pathetic.”

Takumi worked quickly now.

This room rewarded speed.

A fast success could override everything.

The square was simple.

Clean edges.

No trembling.

Shiro pinned Mathew completely, preventing him from even touching the needle.

Haruka forced herself to move.

But Takumi was already on the final line.

One wrong move from Mathew—

One sudden break—

It would count as first rejection.

Everything would end.

Takumi pressed carefully along the final edge.

Silence.

Then—

Click.

The square separated perfectly.

The room flashed white.

“First settlement: Fulfilled.”

The pedestals stopped glowing red.

Mathew went still.

The crescent in front of him dissolved without being touched.

All four disks vanished.

The door ahead unlocked.

Haruka exhaled so hard her knees nearly gave out.

Shiro slowly released Mathew.

Mathew didn’t look at anyone.

Takumi stepped forward.

“In this room,” he said quietly, “speed chooses reality.”

No one argued.

Above the final door, carved in deep gold:

“Promise.any()”

The “Promise.any()” Chamber

The final door opened slowly.

The room beyond was quiet.

Too quiet.

Four pedestals rose again.

Four honey disks.

Above them glowed in soft gold:

“Promise.any()”

A final board emerged.

“All members will attempt the puzzle. The first fulfillment grants passage. Rejections will be ignored. If all are rejected, all perish.”

Haruka read it twice.

“So… even if someone fails…”

“It doesn’t matter,” Shiro said. “Unless everyone fails.”

Takumi nodded.

“This room only needs one success.”

Mathew let out a hollow laugh. “So the weak links don’t matter anymore.”

“No,” Takumi said calmly. “Now they’re irrelevant.”

The dungeon hummed.

The shapes appeared.

Takumi — an intricate snowflake.
Haruka — a simple circle.
Shiro — a pentagon.
Mathew — a complex dragon outline.

Cruel design.

The simplest shape was in front of Haruka.

Mathew stared at his dragon and scoffed. “Of course.”

Takumi looked at Haruka.

She understood.

This room didn’t require everyone.

It required someone.

The message burned brighter:

“Begin.”

They carved.

Mathew rushed angrily.

A crack formed instantly in one of the dragon’s wings.

It shattered.

The floor beneath him flickered—

But did not open.

“Rejection recorded.”

He stared at the message.

“That’s it?”

“No punishment,” Shiro muttered. “Not yet.”

He continued carving.

A thin fracture formed on his pentagon.

It snapped.

“Rejection recorded.”

Still, nothing happened.

Now only two remained.

Takumi and Haruka.

Takumi’s snowflake was brutal. One mistake and it would collapse.

Haruka’s circle was steady.

Simple.

Reliable.

Her breathing stabilized.

Slow.

Careful.

Takumi glanced sideways.

“You’ve got this.”

She nodded.

The needle traced the final curve.

One smooth motion.

Click.

The circle separated cleanly.

The room exploded with golden light.

“First fulfillment recorded.”

All remaining honey disks dissolved instantly.

Mathew’s shattered dragon vanished.

Shiro’s broken pentagon disappeared.

Takumi’s unfinished snowflake disintegrated mid-trace.

The door ahead opened fully.

Warm light poured in.

“At least one fulfilled. Passage granted.”

Haruka dropped the needle.

“So… even though they failed…”

“It didn’t matter,” Shiro said.

Takumi smiled faintly.

“This method doesn’t need perfection.”

He looked back at the shattered fragments fading into dust.

“It just needs one success.”

The four of them stepped forward together.

Alive.

The Promise Dungeon had been solved.

DEV Community: Harman Panwar

Understanding this, call(), apply(), and bind() in JavaScript

What this Means in JavaScript

this Inside Normal Functions

this Inside Objects

What call() Does

What apply() Does

What bind() Does

Difference Between call(), apply(), and bind()

Assignment

Questions

Answers

1. Create an Object with a Method

2. Borrow the Method Using call()

3. Use apply() with Array Arguments

4. Use bind() and Store the Function

Conclusion

Introduction to Object-Oriented Programming (OOP) in JavaScript

What is Object-Oriented Programming?

Real-World Analogy: Blueprint → Objects

What is a Class in JavaScript?

Creating Objects Using Classes

Constructor Method

Methods Inside a Class

Basic Idea of Encapsulation

Why Use OOP?

Assignment

Questions

Answers

1. Create the Student Class

2. Create Student Objects

3. Call the Method

Conclusion

Objects in JavaScript

What Are Objects and Why Do We Need Them?

Array vs Object

Array

Object

Creating Objects

Accessing Properties

Dot Notation

Bracket Notation

Updating Object Properties

Adding New Properties

Deleting Properties

Looping Through Object Keys

Assignment

Questions

Answers

1. Create a Student Object

2. Update One Property

3. Print All Keys and Values

Conclusion

Arrow Functions in JavaScript

Why Arrow Functions?

Basic Arrow Function Syntax

Arrow Functions with One Parameter

Arrow Functions with Multiple Parameters

Implicit Return vs Explicit Return

Explicit Return

Implicit Return

Arrow Function Example with Greetings

Basic Difference Between Arrow Functions and Normal Functions

Arrow Functions with map()

Assignment

Questions

Answers

1. Normal Function to Calculate Square

2. Arrow Function Version

3. Arrow Function to Check Even or Odd

4. Arrow Function with map()

Conclusion

Common Array Methods in JavaScript

push() and pop()

push()

Example

pop()

Example

shift() and unshift()

shift()

What `this` Means in JavaScript

`this` Inside Normal Functions

`this` Inside Objects

What `call()` Does

What `apply()` Does

What `bind()` Does

Difference Between `call()`, `apply()`, and `bind()`

2. Borrow the Method Using `call()`

3. Use `apply()` with Array Arguments

4. Use `bind()` and Store the Function

The `if` Statement

The `if-else` Statement

The `else if` Ladder

The `switch` Statement

Why `break` Is Important in Switch

When to Use `switch` vs `if-else`

Use `if-else` when:

Use `switch` when: