DEV Community: Subhrangsu Bera

JavaScript OOP: From Blueprints to Reality

Subhrangsu Bera — Sun, 15 Mar 2026 18:12:15 +0000

Up until now, you’ve likely been writing code "procedurally"—writing a line, then another, then another. It’s like keeping a recipe on a loose scrap of paper. But what happens when you want to open a global chain of restaurants? You can't rely on scraps of paper. You need a System.

In JavaScript, Object-Oriented Programming (OOP) is that system. It allows us to model our code after the real world.

1. The Big Idea: Blueprint vs. Reality

The best way to understand OOP is the Car Factory analogy.

Imagine you are the CEO of a car company. You don't sit down and design every single car from scratch. Instead, you hire engineers to create one perfect Blueprint.

The Blueprint (The Class): This defines that every car must have 4 wheels, a color, and an engine. It also says cars can "Drive" and "Brake."
The Actual Car (The Object/Instance): This is the physical car that rolls off the assembly line. One might be a Red Tesla, another a Blue Ford. They both followed the same blueprint, but they are individual "objects."

2. What is a Class in JavaScript?

A Class is a reserved keyword in JavaScript (introduced in ES6) that acts as the template for creating objects. It groups data (properties) and behavior (methods) together so they don't get lost.

Before Classes, our code was "scattered":

let student1Name = "Veer";
let student1Age = 20;

let student2Name = "Ansh";
let student2Age = 22;
// This gets messy fast!

3. The "Constructor": The Setup Phase

Every class has a special method called a constructor. Think of this as the Assembly Line. The moment you decide to create a new object, the constructor runs to set the initial values.

Creating the Student Blueprint

class Student {
    // The constructor is the 'Setup' function
    constructor(name, age, course) {
        this.name = name; // 'this' refers to the specific student being built
        this.age = age;
        this.course = course;
    }

    // This is a Method (Action)
    introduce() {
        console.log(`Hi, I'm ${this.name}, a ${this.age}-year-old studying ${this.course}.`);
    }
}

Why use this?
Inside a class, this is like a pointing finger. It says, "Take the name I just gave you and stick it onto this specific student object."

4. Creating Objects: The `new` Keyword

Now for the magic. To create an actual object from your blueprint, you use the new keyword. This process is called Instantiation.

// Manufacturing two unique students from one blueprint
const student1 = new Student("Veer", 20, "Web Dev");
const student2 = new Student("Ansh", 22, "Data Science");

// They both have the same "actions"
student1.introduce(); // Hi, I'm Veer...
student2.introduce(); // Hi, I'm Ansh...

5. The Power of Encapsulation

One of the "Four Pillars" of OOP is Encapsulation.

Think of a Capsule (like a medicine pill). Inside the pill is the medicine (data) and the formula (logic). You don't need to know how the formula works to take the pill; you just need to know it works.

In our code, Encapsulation means we hide the complex logic inside the class. The rest of your program doesn't need to know how introduce() works; it just calls the method. This makes your code:

More Organized: Everything related to a "Student" is in one place.
Easier to Debug: If the introduction is broken, you only have one place to look (the Class).
Reusable: You can create 1,000 students with three lines of code.

6. Procedural vs. Object-Oriented Style

Feature	Procedural (Old Way)	OOP (The Modern Way)
Logic	Functions and data are separate.	Data and logic are bundled together.
Scaling	Hard to manage as the app grows.	Designed for large, complex apps.
Analogy	A list of instructions.	A collection of interacting "things."

7. Summary Challenge: Build Your Library

To really let this sink in, open your console and try this "Blueprint" challenge:

Create a Class called Book.
Add a Constructor that takes title, author, and year.
Add a Method called getAge that calculates how old the book is (Current Year - Year).
Create 2 Objects (two of your favorite books).
Log the result of .getAge() for both.

Final Thought

OOP is more than just syntax; it’s a mindset. It teaches you to stop thinking about your code as a list of tasks and start thinking about it as a world of "Objects" that interact with each other.

Once you master this, you can build anything—from a simple Todo app to a massive social media platform.

The Magic of `this`, `call()`, `apply()`, and `bind()` in JavaScript

Subhrangsu Bera — Sun, 15 Mar 2026 18:08:34 +0000

Have you ever been in a conversation where someone said, "This is amazing!" and you had to ask, "Wait, what exactly is 'this'?" In JavaScript, the this keyword faces the same identity crisis. It is a placeholder that changes its meaning depending on who is speaking.

If you can master the simple rule of "Who is calling the function?", you will master the most confusing part of the language.

1. What does `this` actually mean?

In the simplest terms: this refers to the object that is currently executing the code.

Think of it like a person's name tag. If I wear the tag, this refers to me. If you wear it, this refers to you. The tag doesn't change, but the person wearing it does.

`this` inside a Normal Function

If a function is called by itself, this does not belong to any object.
In browsers it usually refers to the global object (window), but in strict mode it becomes undefine

function showThis() {
    console.log(this); // Logs the Window object
}
showThis();

`this` inside an Object (The Home Owner)

When a function lives inside an object, we call it a Method. Here, this is very happy because it knows exactly who its owner is: the object it lives in.

const student = {
    name: "Veer",
    greet() {
        console.log("Hi, I am " + this.name);
    },
};

student.greet(); // Output: Hi, I am Veer

Since student called the function, this.name becomes student.name.

2. Hijacking the Context: Method Borrowing

Sometimes, a chef has a great recipe (a method), and another chef wants to use it without rewriting it. JavaScript gives us three "magic" tools to change who this refers to, effectively allowing one object to borrow a method from another.

Tool 1: `call()`

The call() method runs a function and explicitly tells it: "Forget your usual owner; for this one time, this object is your boss." You pass arguments one by one.

const person1 = {
    name: "Ansh",
    greet() {
        console.log("Hello, I am " + this.name);
    },
};

const person2 = {
    name: "Ravi",
};

person1.greet.call(person2);

Output:

Hello, I am Ravi

Tool 2: `apply()`

apply() is the twin sibling of call(). It does the exact same thing, but it’s a bit more organized. Instead of passing arguments one by one, it expects them in a single Array.

function introduce(city, country) {
    console.log(`${this.name} from ${city}, ${country}`);
}

const user = { name: "Ravi" };

introduce.apply(user, ["Mumbai", "India"]);

Output:

Ravi from Mumbai, India

Tool 3: `bind()` - The "Save for Later" Button

bind() is fundamentally different. It doesn't run the function immediately. Instead, bind() creates a new function with this permanently set to the object you provide.

It’s like recording a recipe and handing the tape to a specific chef to use whenever they want.

const student = { name: "Veer" };

function study(subject) {
    console.log(`${this.name} is studying ${subject}`);
}

// This doesn't run the function yet! It creates a new one.
const veerStudies = study.bind(student);

// Later in your code...
veerStudies("JavaScript"); // Output: Veer is studying JavaScript

3. The Comparison Table

Method	Runs Immediately?	Arguments	Best Use
`call()`	Yes	`call(obj, arg1, arg2)`	When arguments are known individually
`apply()`	Yes	`apply(obj, [arg1, arg2])`	When arguments are in an array
`bind()`	No	`bind(obj)`	When you want to run the function later

4. Why does this matter? (The Practical Side)

You might be wondering, "Why not just write a new function?" 1. DRY (Don't Repeat Yourself): You can write complex logic once and apply it to many different data objects. 2. Callbacks: When you pass a method into something like a setTimeout or an event listener, JavaScript often "loses" the original this. bind() allows you to "tether" the function so it doesn't get lost.

5. Summary Challenge: The "Method Hijack"

Try this in your browser console to see the magic in real-time:

Create a teacher object with a subject property and a method that says "I teach [subject]".
Create a student object with a subject property but no method.
Use teacher.teach.call(student) to make the student "borrow" the teacher's ability to speak.
Notice how the student now talks about their subject using the teacher's code!

Mastering this is the gateway to advanced JavaScript. By understanding that the "owner" is decided at the moment of the call, you gain the power to write flexible, reusable, and professional-grade code.

JavaScript Objects: Your Code's "Labeled Storage Unit"

Subhrangsu Bera — Sun, 15 Mar 2026 16:55:46 +0000

Imagine you’re building a student profile. If you use separate variables like studentName, studentAge, and studentCourse, you’re just carrying around a handful of loose papers. If you have 50 students, you’ll be buried in paperwork.

In the real world, we use a Student File or a Folder to keep all that info together. In JavaScript, that folder is an Object.

1. What is an Object?

An object is a collection of properties. Think of it as a dictionary where you have a word (the key) and its definition (the value).

Structure:

{
    key: value;
}

Why do we need objects?

Logical grouping – Keeps related data (like a student’s name and marks) in one place.
Readability – student.age is clearer than random variables like age1.

2. Creating an Object

The most common way to create an object is using an Object Literal with curly braces {}.

// Creating a student "folder"
const student = {
    name: "Veer",
    age: 20,
    course: "Web Development",
    isGraduated: false,
};

3. Accessing Properties: Two Ways

Once you’ve stored your data, how do you access it?

Dot Notation (`.`)

This is the most common and readable approach.

console.log(student.name); // "Veer"

Bracket Notation (`[]`)

This is like looking up a word in a dictionary using a string. It’s useful if your key name is stored in a variable.

const query = "course";
console.log(student[query]); // "Web Development"

4. Updating, Adding, and Deleting Properties

Objects in JavaScript are dynamic, meaning you can modify them even after creation.

You can update, add, or delete properties using dot notation or bracket notation.

Updating a Property

Dot Notation

student.age = 21; // Veer had a birthday

Bracket Notation

student["age"] = 21;

Both update the value of age.

Adding a New Property

Dot Notation

student.city = "Delhi";

Bracket Notation

student["city"] = "Delhi";

This creates a new property called city.

Deleting a Property

Dot Notation

delete student.isGraduated;

Bracket Notation

delete student["isGraduated"];

This removes the property completely.

When Should You Use Bracket Notation?

Bracket notation is useful when the property name is dynamic.

const key = "course";

console.log(student[key]); // "Web Development"

Dot notation cannot use variables, but bracket notation can.

Tip:

Use dot notation most of the time because it is cleaner.
Use bracket notation when the key is dynamic.

5. Looping Through an Object

Objects are not accessed by numeric indexes like arrays, so we use the for...in loop.

for (let key in student) {
    console.log(`${key}: ${student[key]}`);
}

key → property name
student[key] → property value

Example output:

name: Veer
age: 20
course: Web Development

6. Objects vs Arrays: Quick Comparison

Summary Challenge: The Student Profile

Try this in your console:

Create a car object with brand, model, and year.
Add a method using an arrow function.
Add a color property after creation.
Delete the year property.
Loop through the object and print the final profile.

Example starter:

const car = {
    brand: "Toyota",
    model: "Fortuner",
    year: 2022,
    start: () => console.log("Engine started!"),
};

By mastering objects, you move from writing simple scripts to managing real‑world data structures in JavaScript.

Arrow Functions: The Modern Chef’s Secret to Clean Code

Subhrangsu Bera — Sun, 15 Mar 2026 15:45:06 +0000

If you’ve been writing JavaScript for a while, you’ve probably seen the => symbol popping up everywhere.It looks like an arrow, it’s called an Arrow Function, and it’s about to make your code look a lot sleeker.

Think of it as a shorthand recipe. Instead of writing out a full, formal instruction card, you’re just jotting down the essentials on a sticky note.

It does the same job, but with much less "boilerplate" (the extra words we usually have to type).

1. The Transformation: From Normal to Arrow

Let’s look at a simple recipe: Squaring a Number.

The Traditional Recipe (Function Expression):

const square = function(n) {
    return n * n;
};

The Modern Arrow Recipe:

const square = (n) => {
    return n * n;
};

We removed the word function and added a => after the parameters. It’s already looking cleaner!

2. One Parameter? No Problem!

The "Chef's shorthand" gets even faster. If your recipe only needs one ingredient (one parameter), you can even drop the parentheses ().

// Look, no parentheses around 'n'!
const square = n => {
    return n * n;
};

3. Multiple Ingredients (Parameters)

If your recipe needs more than one ingredient, you just put the parentheses back.

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

console.log(multiply(5, 4)); // Output: 20

4. The Magic of "Implicit Return"

This is the coolest part of Arrow Functions. If your recipe is so simple that it only has one line of code, you can throw away the curly braces {} and the return keyword entirely. This is called an Implicit Return.

Traditional (Explicit):

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

Arrow Style (Implicit):

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

JavaScript looks at that single line and says, "I get it, you want to return the result of a + b."

5. Arrow Functions in the Real World: Array Methods

Remember our "Data Train" (Arrays)? Arrow functions are the perfect companions for methods like map().

The Goal:

Check an array of numbers and return if they are "Even" or "Odd."

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

const checkNumbers = numbers.map(num => num % 2 === 0 ? "Even" : "Odd");

console.log(checkNumbers); // ["Odd", "Even", "Odd", "Even"]

Imagine how much space you’d waste writing function(num) { return ... } inside that map!

6. Key Differences (High Level)

While they look cool, there are a few things Arrow Functions can't do compared to the "Wall Poster" recipes we learned before:

Feature	Normal Function	Arrow Function
Syntax	Verbose (Wordy)	Concise (Short)
this keyword	Has its own "context."	Does NOT have its own this.
Hoisting	Depends (Declaration = Yes).	No. (Must be defined first).
Arguments	Has an arguments object.	No arguments object.

Chef’s Note:
For now, just remember: arrow functions are perfect for short logic and callbacks.

Summary Challenge: The Square-Off

Try this in your console.

Step 1 — Normal Function

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

Step 2 — Arrow Function

const square = n => n * n;

Step 3 — Call Both

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

Notice how much simpler the arrow version looks.

Final Thoughts

Arrow functions are a standard feature of modern JavaScript (ES6+).

They help make code:

shorter
easier to read
more expressive

Once you start using them, they quickly become your default way to write functions.

Mastering arrow functions doesn't just make you a faster coder — it also makes your code easier for other developers to understand.

Function Declaration vs. Expression: The Secret Life of Your Recipe Book

Subhrangsu Bera — Sun, 15 Mar 2026 15:39:27 +0000

Imagine you're a head chef in a busy kitchen. To keep everything running smoothly, you write down instructions for common tasks so you don’t have to explain them again and again.

In programming, these reusable instructions are called functions.

What is a Function?

A function is simply a block of code designed to perform a specific task. Once defined, we can reuse it whenever we need.

Example: multiply two numbers.

Instead of writing the multiplication logic multiple times, we can wrap it inside a function.

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

console.log(multiply(4, 5)); // 20
console.log(multiply(6, 7)); // 42

Now we can reuse multiply() anywhere.

But in JavaScript, there are two common ways to create functions:

Function Declaration
Function Expression

Understanding the difference will help you write cleaner and more predictable code.

Function Declaration: The "Wall-Mounted Recipe"

A Function Declaration is like a giant recipe for "Tomato Soup" that you’ve permanently painted onto the kitchen wall.

The Definition

You define it using the function keyword followed by a name. Because it’s painted on the wall, it’s official and "public."

function makeTomatoSoup(tomatoes, cream) {
    return `Soup made with ${tomatoes} tomatoes and ${cream}!`;
}

console.log(makeTomatoSoup(5, "1 cup"));

Recipe Logic: Since the recipe is on the wall, any chef can look up from their station and see it. It is a part of the kitchen's structure.

Function Expression: The "Recipe on a Clipboard"

A Function Expression is a bit different. Instead of painting it on the wall, you write the instructions on a piece of paper and clip it to a specific Variable (a clipboard).

The Definition

Here, the function is often "anonymous" (has no name), but we access it through the variable name we gave the clipboard.

const makeTomatoSoup = function(tomatoes, cream) {
    return `Soup made with ${tomatoes} tomatoes and ${cream}!`;
};

console.log(makeTomatoSoup(5, "1 cup"));

The Recipe Logic: This recipe isn't "public" until the clipboard is handed out. It belongs to the variable, and the variable controls when it gets used.

Side-by-Side Comparison

Let's write the same function using both approaches.

Function Declaration

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

Function Expression

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

Both work the same when called:

console.log(multiply(3, 6)); // 18

The diagram above shows how JavaScript executes function calls depending on where the function is defined.

But their behavior differs because of hoisting.

The Hoisting Mystery

JavaScript reads your code in two phases. During the first phase,
it prepares certain declarations before the code actually runs.
This behavior is called hoisting.

You don't need to understand the internal engine deeply yet — just remember this rule:

Function declarations are hoisted
Function expressions are not

// Order the soup!
console.log(makeTomatoSoup(3, "half cup"));

// The recipe is defined later, but it works!
function makeTomatoSoup(t, c) { return "Soup is ready!"; }

Expressions: Wait for the Clipboard

With a Function Expression, JavaScript treats the "clipboard" like any other ingredient (variable). If a chef calls for the soup before the clipboard has been prepared and handed out, the kitchen crashes.

// Order the soup?
console.log(makeTomatoSoup(3, "half cup")); // ERROR!

// The clipboard hasn't been "initialized" yet
const makeTomatoSoup = function(t, c) { return "Soup is ready!"; };

Key Differences

This diagram summarizes the key differences between function declarations and function expressions.

When Should You Use Each?

Use Function Declaration when:

You want reusable functions
The function should be available throughout the file
You want clearer structure

Use Function Expression when

Passing functions as arguments
Creating callbacks
Controlling when the function becomes available

Practice Challenge

Try this in your console.

Step 1 — Function Declaration

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

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

Notice it works.

Step 2 — Function Expression

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

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

Now you should see an error.

Final Thoughts

Both function declarations and function expressions create functions, but they behave differently because of hoisting.

A simple rule to remember:

Declarations → available everywhere
Expressions → available after definition

Mastering this difference will help you avoid confusing bugs
and write more predictable JavaScript.

JavaScript Array Methods You Must Know

Subhrangsu Bera — Sun, 15 Mar 2026 15:32:21 +0000

Welcome back! 👋

In the previous post, we learned that an array is like a train holding your data in neat cars.

If you haven't read it yet, check it out here:

JavaScript Arrays 101 – The Ultimate Guide to Organizing Data

But a train isn't very useful if you can't:

add new cars
remove old ones
transform the cargo inside

JavaScript provides powerful array methods that help us work with data easily and efficiently.

In this guide, we’ll explore six essential array methods every developer should know.

Open your browser console (F12) and try the examples as you read.

1. The Dynamic Duo: `push()` and `pop()`

These methods work at the end of an array.

Think of them like adding or removing a trailer from the back of a truck.

`push()` — Add an element to the end

let cart = ["Milk", "Eggs"];

cart.push("Bread");

console.log(cart);

Before

["Milk", "Eggs"]

After push()

["Milk", "Eggs", "Bread"]

`pop()` — Remove the last element

cart.pop();

console.log(cart);

After pop()

["Milk", "Eggs"]

2. The Front-Runners: `shift()` and `unshift()`

These methods work at the beginning of the array (index 0).

`unshift()`— Add an element to the start

let queue = ["Alice", "Bob"];

queue.unshift("Charlie");

console.log(queue);

Before

["Alice", "Bob"]

After unshift()

["Charlie", "Alice", "Bob"]

`shift()` — Remove the first element

queue.shift();

console.log(queue);

After shift()

["Alice", "Bob"]

Everything moves forward when the first item is removed.

3. The Iterator: `forEach()`

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

It is commonly used when you just want to loop through items.

Traditional for Loop

let tasks = ["Clean", "Code", "Eat"];

for (let i = 0; i < tasks.length; i++) {
  console.log("Task:", tasks[i]);
}

Using `forEach()`

tasks.forEach((task) => {
  console.log("Task:", task);
});

Important note:

forEach() does not return a new array.
It is mainly used for side effects like logging, displaying data, or updating the UI.

4. The Transformer: `map()`

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

It is commonly used when you want to modify every item.

Practical Example: Doubling Numbers

let numbers = [5, 10, 15];

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

console.log(doubled);
console.log(numbers);

Original array

[5, 10, 15]

After map()

[10, 20, 30]

Notice something important: The original array remains unchanged.

5. The Security Guard: `filter()`

filter() checks every item against a condition.

If the item passes the test, it goes into the new array.

Practical Example: Numbers Greater Than 10

let scores = [8, 12, 5, 20, 11];

let highScores = scores.filter(score => score > 10);

console.log(highScores);

Original array

[8, 12, 5, 20, 11]

Filtered result

[12, 20, 11]

Again, the original array is not modified.

6. The Calculator: `reduce()`

reduce() takes an array and reduces it to a single value.

Think of it like a snowball rolling down a hill.
It starts small and gathers more snow as it moves.

Example: Sum of Numbers

let prices = [10, 20, 30];

let totalBill = prices.reduce((total, price) => {
  return total + price;
}, 0);

console.log(totalBill);

Explanation step by step:

Start value = 0

Iteration 1 → 0 + 10 = 10
Iteration 2 → 10 + 20 = 30
Iteration 3 → 30 + 30 = 60

Final result:

Note: Methods like map(), filter(), and reduce() are called higher-order array methods because they take functions as arguments.

Traditional Loop vs `map()` / `filter()`

Why use these methods instead of a regular loop?

Feature	for loop	map / filter
Readability	More verbose	Clean and expressive
Data mutation	Can accidentally modify original array	Returns a new array
Style	Imperative programming	Functional programming

Example comparison

Using 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(num => num * 2);

Much cleaner and easier to read.

Combined Example (Real Workflow)

Let's combine these methods together.

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

let doubled = numbers.map(num => num * 2);
// [10, 20, 30, 40]

let filtered = doubled.filter(num => num > 20);
// [30, 40]

let total = filtered.reduce((sum, num) => sum + num, 0);
// 70

console.log(total);

Steps happening here:

1️⃣ Double each number

2️⃣ Keep numbers greater than 20

3️⃣ Calculate the final sum

Summary Cheat Sheet

Task	Method
Add to end	push()
Remove from end	pop()
Add to start	unshift()
Remove from start	shift()
Loop through array	forEach()
Transform items	map()
Select specific items	filter()
Calculate one value	reduce()

Additional JavaScript Array Methods

1. `find()`

find() returns the first element that matches a condition.

let numbers = [5, 12, 8, 20];

let result = numbers.find(num => num > 10);

console.log(result);

Output

Important points:

Returns only the first match
Returns undefined if nothing matches

2. `findIndex()`

Returns the index of the first matching element.

let numbers = [5, 12, 8, 20];

let index = numbers.findIndex(num => num > 10);

console.log(index);

Output

3. `some()`

Checks if at least one element passes a condition.

let numbers = [1, 3, 5, 8];

let hasEven = numbers.some(num => num % 2 === 0);

console.log(hasEven);

Output

true

4. `every()`

Checks if all elements satisfy a condition.

let numbers = [2, 4, 6, 8];

let allEven = numbers.every(num => num % 2 === 0);

console.log(allEven);

Output

true

5. `includes()`

Checks whether an array contains a specific value.

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

console.log(fruits.includes("Mango"));

Output

true

6. `slice()`

Creates a shallow copy of part of an array.

let numbers = [10, 20, 30, 40, 50];

let part = numbers.slice(1, 4);

console.log(part);

Output

[20, 30, 40]

Note:
The original array is not modified.

7. `splice()`

Used to add, remove, or replace elements in an array.

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

fruits.splice(1, 1);

console.log(fruits);

Output

["Apple", "Mango"]

Explanation

splice(startIndex, deleteCount)

8. `sort()`

Sorts elements in an array.

let numbers = [40, 10, 100, 5];

numbers.sort((a, b) => a - b);

console.log(numbers);

Output

[5, 10, 40, 100]

9. `join()`

Converts an array into a string.

let words = ["Hello", "World"];

let sentence = words.join(" ");

console.log(sentence);

Output

Hello World

JavaScript Array Methods Return Chart

Method	Returns	Description	Mutates Original?
`push()`	New length of array	Adds element(s) to the end	YES
`pop()`	Removed element	Removes the last element	YES
`shift()`	Removed element	Removes the first element	YES
`unshift()`	New length of array	Adds element(s) to the start	YES
`splice()`	Array of removed elements	Adds/removes items at any index	YES
`sort()`	Sorted array (same ref)	Sorts elements in place	YES
`reverse()`	Reversed array (same ref)	Reverses elements in place	YES
`fill()`	Modified array (same ref)	Fills elements with a value	YES
`forEach()`	`undefined`	Executes function for each element	No
`map()`	New array	Transforms each element	No
`filter()`	New array	Returns elements passing a condition	No
`slice()`	New array	Returns a copy of a portion	No
`concat()`	New array	Merges two or more arrays	No
`flat()`	New array	Flattens nested arrays	No
`reduce()`	Single value	Reduces array to one value	No
`find()`	Element or `undefined`	Returns first matching element	No
`findIndex()`	Index or `-1`	Returns index of first match	No
`some()`	`true` / `false`	Checks if any element passes	No
`every()`	`true` / `false`	Checks if all elements pass	No
`includes()`	`true` / `false`	Checks if value exists	No
`join()`	String	Converts array to a string	No

Quick Mental Model (Very Useful)

Returns a single value (or "Not an Array")

reduce() (Accumulator value)
find() (The element itself)
findIndex() (The index number)
indexOf() / lastIndexOf() (The index number)
join() (A string)

Returns a Boolean

some()
every()
includes()
Array.isArray()

Returns a New Array (Non-Mutating)

map()
filter()
slice()
concat()
flat()

Returns the Original Array (Mutated)

sort()
reverse()
fill()

Returns removed element(s)

pop() (Single item)
shift() (Single item)
splice() (Array of items)

Returns array length

push()
unshift()

Returns nothing useful

forEach() (Always undefined)

Practice Challenge

Open your browser console and try this exercise.

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

Step 1

Use map() to add 10 to each number

Step 2

Use filter() to keep numbers greater than 20

Step 3

Use reduce() to calculate the total sum

Experimenting in the console is one of the best ways to learn JavaScript.

If you're learning JavaScript, mastering these array methods will make your code cleaner, shorter, and more powerful.

JavaScript Arrays 101: The Ultimate Guide to Organizing Data

Subhrangsu Bera — Sat, 14 Mar 2026 20:20:42 +0000

Imagine you’re building a simple app to track a Movie Marathon. You have five favorite films you want to watch. Without a smart way to store them, you’d have to create five different variables: movie1, movie2, movie3, and so on.

Now, imagine you have a list of 500 movies. Managing 500 individual variables is not just exhausting—it’s impossible. This is exactly why we use Arrays.

1. What is an Array? (And Why We Need Them)

In simple terms, an Array is a special variable that can hold more than one value at a time.

The diagram below shows how arrays store values with positions called indexes.

Each item in an array has two parts:

Index → the position of the item
Value → the data stored in that position

Think of an array like a bookshelf.

Each shelf slot represents an index, and each book on the shelf represents the value stored in that position.

Why use them?

Grouping: It keeps related data (like a list of fruits, marks, or tasks) in one container.
Order: It remembers the exact sequence in which you added your items.
Scalability: Whether you have 2 items or 2 million, the way you handle them remains the same.

2. How to Create an Array

There are two ways to build your array, but one is much more popular than the other.

The Array Literal (The Best Way)

This uses square brackets [] and is the standard way to write arrays in JavaScript.

// Creating a list of 5 favorite movies
const myMovies = [
    "Inception",
    "Interstellar",
    "The Dark Knight",
    "Tenet",
    "Dunkirk",
];

The Array Constructor

You can also use the new keyword, though it is less common for simple lists:

const passengers = new Array("Alice", "Bob", "Charlie");

3. The "Zero-Based" Indexing Rule

This is the most important rule in programming: Computers start counting at 0, not 1.

Arrays store elements sequentially in memory, and each index points to a specific location.

If you have a list of movies, "Inception" is not at position 1. It is at Index 0.

Accessing Elements

To "read" a specific item from your array, you use its index number inside square brackets:

console.log(myMovies[0]); // Output: Inception (The first element)
console.log(myMovies[2]); // Output: The Dark Knight (The third element)

// To get the very last element:
console.log(myMovies[myMovies.length - 1]); // Output: Dunkirk

4. Updating Elements

Arrays in JavaScript are mutable, meaning you can change them after they are created. If you decide you'd rather watch "The Prestige" instead of "Tenet," you simply target that index.

// Changing the 4th movie (Index 3)
myMovies[3] = "The Prestige";

console.log(myMovies);
// Output: ["Inception", "Interstellar", "The Dark Knight", "The Prestige", "Dunkirk"]

5. The `.length` Property

The .length property is your best friend. It automatically keeps track of how many items are in your array. It’s important to remember that the length is always one higher than the highest index.

Total Items: 5
Last Index: 4

console.log(myMovies.length); // Output: 5

6. Looping: The "Tour" of Your Array

What if you want to print every single movie to the screen? You don't want to type console.log five times. Instead, you use a loop.

The Classic `for` Loop

This is the "old school" way, giving you total control over where the loop starts and ends.

for (let i = 0; i < myMovies.length; i++) {
    console.log(`Movie ${i + 1}: ${myMovies[i]}`);
}

The `forEach` Method

This is the modern, "human-readable" way. It basically says: "For every item in this array, run this code."

myMovies.forEach((movie, index) => {
    console.log(`Now playing at Screen ${index}: ${movie}`);
});

⚠️ Common Beginner Mistakes

Off-by-One Error: Trying to access myMovies[5] when there are only 5 items. Remember, the last index is always length - 1.
Using Parentheses: Beginners often try to access items using myMovies(0). In JavaScript, we always use square brackets [] for arrays.
Confusing Index vs. Value: The index is the address (0, 1, 2), while the value is the data ("Inception").

Summary Cheat Sheet

Feature	Code Syntax	What it does
Creation	`const arr = ["A", "B"];`	Initializes a new array.
Access	`arr[0]`	Grabs the first item.
Update	`arr[1] = "C";`	Changes the second item.
Count	`arr.length`	Tells you how many items are inside.
Looping	`arr.forEach(item => ...)`	Runs a function for every item.

Arrays are the foundation of data in JavaScript. Once you master how to store and access values, you're ready to start building real-world features like shopping carts, user lists, or social media feeds.

When AI Writes the Code… Who Takes Responsibility?

Subhrangsu Bera — Tue, 10 Mar 2026 22:39:46 +0000

Late one night in Kolkata, a developer sat staring at a glowing screen.

That developer was me.

Two years into my journey as an Angular developer, I’ve learned something interesting about software development:

The hardest bugs are not the ones that break loudly.

They’re the ones that quietly pretend everything is fine.

And lately, with AI tools everywhere, I’ve started noticing a strange phenomenon in modern development — the illusion of speed.

Let me tell you a story.

Chapter 1: The Magical Button

I’m currently working on a Property Management System (PMS) SaaS platform.

If you've ever worked on SaaS products, you know one thing:

Data integrity is sacred.

If a small bug appears in a personal project, it's annoying.

If a small bug appears in a SaaS system managing properties, tenants, rent, and financial data…

…it can become a very expensive mistake.

Recently we were tackling a common SaaS problem:

Localization.

Our platform needs to speak multiple languages so property managers and tenants can use it comfortably.

Which sounds like the perfect job for AI.

So one evening I opened my AI chat inside VS Code and typed a very confident command:

“Find all SweetAlerts in the project, extract all user-facing strings into a translation JSON file, and bind the keys back for localization.”

I hit enter.

Five seconds later.

The AI delivered a full solution.

Files created.
JSON structured.
Bindings written.

It looked… perfect.

Like a magician just pulled a rabbit out of a TypeScript file.

But then a thought hit me:

If I didn’t write this code… do I actually understand it?

So I did something boring.

I reviewed it.

Line by line.

That’s when the cracks appeared.

Chapter 2: The “Almost Right” Problem

AI is incredibly good at writing code that looks correct.

But SaaS systems don’t run on looks correct.

They run on exactly correct.

While reviewing the AI's work, I found three small but dangerous problems.

1️⃣ The Context Problem

One alert originally meant:

“Save Lease Agreement.”

The AI translated it into a word that technically meant “Save.”

But in the context of property management…

…it sounded closer to “Rescue the Lease.”

Which is a little dramatic.

Imagine clicking a button and seeing:

“Lease successfully rescued.”

Who kidnapped the lease?

2️⃣ The Template Literal Disaster

Somewhere inside a SweetAlert message was this:

`Rent payment of ${amount} received successfully`

The AI accidentally modified the binding, and it became something like:

"rent_received_message"

But it lost the variable interpolation during the refactor.

Result?

The alert would show:

Rent payment of undefined received successfully.

Congratulations.

The tenant paid undefined rupees.

3️⃣ The Invisible Alert

There was a specific edge-case alert for Overdue Rent.

The AI never touched it.

Why?

Because the AI only had visibility into the files included in the prompt or editor context.

Which means the system would be localized…

except for one critical financial alert.

The worst type of bug.

A silent one.

Chapter 3: The Surprising Realization

After fixing everything, I leaned back and realized something slightly ironic.

Reviewing the AI’s work took almost as long as writing the code myself.

AI saved typing.

But it didn't save thinking.

And in professional SaaS systems, thinking is the expensive part.

Chapter 4: The Ghost Commit

But the bigger lesson came from a colleague's experience.

He was debugging a small issue.

A simple one.

A UI bug.

He used an AI coding agent to fix it.

The AI did exactly what it promised.

The bug disappeared.

Mission accomplished.

Or so it seemed.

What the agent didn't mention was that it also:

Modified code in three other files
Refactored a utility function
“Cleaned up” a permission check

None of which were part of the original task.

But the AI reported:

✅ Issue fixed successfully

My colleague trusted it.

He pushed the code.

Now imagine this happening in a SaaS dashboard.

You could suddenly get:

Data Corruption

Property tax calculations become wrong.

Security Vulnerability

A permission check disappears.

The Butterfly Effect

An analytics chart breaks three pages away.

All because an AI agent tried to be helpful.

Chapter 5: The Truth About AI in Development

AI tools are incredible.

They can:

write boilerplate
generate structures
speed up repetitive tasks
explain complex code

But they have one big limitation.

They lack contextual understanding and ownership of system outcomes.

When production breaks:

The AI doesn’t get paged.

The AI doesn’t get blamed.

The AI doesn’t sit in the emergency meeting.

You do.

Chapter 6: The Co-Pilot Rule

So here’s the rule I now follow.

AI is not the captain.

AI is the co-pilot.

A co-pilot can:

Suggest
Assist
Navigate

But the captain still flies the plane.

Because when turbulence hits…

someone needs to understand the entire system.

The Invisible Ripple

Every line of code in a SaaS product creates ripples.

A small change in a localization string can affect UI logic.

A small refactor can break a reporting module.

A tiny missing variable can confuse thousands of users.

That’s the invisible ripple of software development.

AI can generate the change.

But developers must understand how far the ripples travel.

Final Thought

We shouldn’t fear AI.

But we should respect the complexity of the systems we build.

Because in real-world development:

A “fast” push that breaks the dashboard
is the slowest way to build a product.

If you made it this far, thanks for reading.

And if you're using AI to write code (like most of us are now)…

Just remember:

Trust the AI's assistance.
But review the code like your production depends on it. 😄

Have you ever caught a bug introduced by AI-generated code?

I'd love to hear your experience.

Shattering the Ceiling — An Interactive Frontend Experience

Subhrangsu Bera — Mon, 09 Mar 2026 19:25:02 +0000

This is a submission for the 2026 WeCoded Challenge: Frontend Art

My Art

Click the glass to crack it. Keep going to shatter it.

"Shattering the Ceiling" is a fully interactive, chapter-driven story about gender equity in tech — told through a glass ceiling you literally break apart with every click.

Inspiration

The glass ceiling isn't a metaphor you can easily feel — it's invisible by design. I wanted to make it tangible.

This project puts the user inside the story. You're not reading about barriers in tech; you're standing in front of one, pressing against it, watching it crack under pressure, and finally shattering it — chapter by chapter.

Each of the four chapters reflects a real dimension of the problem:

The Room — The silence women face when they walk into spaces not built for them
The Pioneers — Ada Lovelace, Grace Hopper, Margaret Hamilton, and others who built computing and were erased from its history
The Numbers — The data: women went from 37% of CS degrees in 1984 to under 22% today — and gender parity could add $4.3T to global GDP
The World We Build — A manifesto for what tech looks like when everyone gets a seat

The glass ceiling was never inevitable. It was built. And anything built can be shattered.

My Code

codepen.io

Built with

Pure HTML, CSS & vanilla JavaScript — no framework dependencies
GSAP — choreographed animations and procedural crack-drawing sequences
HTML5 Canvas — animated backgrounds that shift per chapter (code rain → circuit nodes → grid → stars)
SVG crack system — fracture lines that radiate procedurally from every click point
Glassmorphism UI — frosted glass overlay that dims and shatters on interaction
Custom cursor with a lagging ring follower
Light / Dark theme toggle — floating pill header
Fully responsive — touch events supported for mobile

This project was built with AI assistance (Claude by Anthropic). The concept, story, design direction, and creative decisions are my own.

Licensed under MIT — feel free to build on it and credit @subhrangsu90.

Control Flow in JavaScript: If, Else, and Switch

Subhrangsu Bera — Thu, 05 Mar 2026 18:16:47 +0000

In the previous blog of this JavaScript series, we explored JavaScript Operators: The Basics You Need to Know and learned how operators help us perform calculations, comparisons, and logical checks.

But once we can compare values, the next question is:

How does a program decide what code should run and what should not?

This is where control flow comes in.

Control flow allows a program to make decisions and execute different code depending on conditions.

Just like in real life, we make decisions based on situations.

For example:

If it rains → take an umbrella
If you are hungry → eat food
If you finish work → relax

Programs work in a similar way.

In this article, we will learn how JavaScript handles decisions using:

if
if...else
else if
switch

What is Control Flow?

Control flow refers to the order in which statements are executed in a program.

Normally, JavaScript executes code line by line from top to bottom.

Example:

console.log("Step 1");
console.log("Step 2");
console.log("Step 3");

Output

Step 1
Step 2
Step 3

But sometimes we want code to run only if a condition is true.

This is where conditional statements help us control the program flow.

The `if` Statement

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

Syntax

if (condition) {
    // code to execute
}

Example

Let's check if someone is eligible to vote.

let age = 20;

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

Output

You are eligible to vote.

Here:

age >= 18

If the condition is true, the code inside the block runs.

The `if...else` Statement

Sometimes we want to run one block of code if the condition is true and another if it is false.

This is where if...else is used.

Syntax

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

Example

let age = 16;

if (age >= 18) {
    console.log("You can vote.");
} else {
    console.log("You are too young to vote.");
}

Output

You are too young to vote.

In JavaScript, you don't always need a comparison operator like age >= 18. JavaScript can evaluate any variable as a boolean. For example:

let username = "Alice";

if (username) {
    // This runs because a non-empty string is "truthy"
    console.log("Welcome, " + username);
}

The `else if` Ladder

Sometimes we need to check multiple conditions.

For that, we use else if.

Example: Checking Marks

let marks = 75;

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

Output

Grade: B

The program checks conditions from top to bottom.

Once a condition is true, the rest are skipped.

Example Program: Positive, Negative, or Zero

Let’s write a simple program to determine the type of a number.

let number = -5;

if (number > 0) {
    console.log("Positive number");
} else if (number < 0) {
    console.log("Negative number");
} else {
    console.log("The number is zero");
}

Output

Negative number

Here we used an if–else if ladder because we had multiple possible conditions.

The `switch` Statement

The switch statement is used when we want to compare one value against multiple possible cases.

Syntax

switch (expression) {
    case value1:
        // code
        break;

    case value2:
        // code
        break;

    default:
    // code
}

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;

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

    case 6:
        console.log("Saturday");
        break;

    case 7:
        console.log("Sunday");
        break;

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

Output

Wednesday

Why `break` is Important

Inside a switch, the break statement stops execution.

Without break, JavaScript will continue running the next cases.

Example without break:

let day = 1;

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

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

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

Output

Monday
Tuesday
Wednesday

This happens because switch keeps executing cases until it finds a break.

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

Situation	Recommended
Checking ranges (age, marks, numbers)	`if...else`
Comparing one value with many fixed options	`switch`

Example:

marks > 80 → if-else
day = Monday/Tuesday/Wednesday → switch

Final Thoughts

Control flow is what makes programs smart and dynamic.

Using if, else, else if, and switch, we can make our programs:

Take decisions
Handle multiple conditions
Execute different logic based on data

These concepts are used everywhere in real applications.

In the next article of this JavaScript series, we will explore another important concept that allows programs to repeat tasks automatically.

JavaScript Operators: The Basics You Need to Know

Subhrangsu Bera — Thu, 05 Mar 2026 18:09:40 +0000

In the previous blog of this JavaScript series, we learned about Variables and Data Types — how JavaScript stores information.

Now the next question is:

How do we actually work with those values?

That’s where operators come in.

Operators allow us to perform calculations, compare values, and create logic in our programs. They are a fundamental part of writing any JavaScript code.

In this article, we'll explore the most common operators you will use every day.

JavaScript operators can be grouped into several categories such as arithmetic, comparison, logical, and assignment operators.

What Are Operators?

An operator is a symbol that performs an operation on values or variables.

For example:

let a = 10;
let b = 5;

let result = a + b;

console.log(result);

Here:

+  → is an operator
a and b → are operands

The operator combines values to produce a result.

Arithmetic Operators

Arithmetic operators are used to perform basic mathematical calculations.

Operator	Description
`+`	Addition
`-`	Subtraction
`*`	Multiplication
`/`	Division
`%`	Modulus (remainder)

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.3333
Remainder: 1

The modulus operator % is commonly used when checking even or odd numbers.

Example:

let number = 10;

console.log(number % 2);

If the result is 0, the number is even.

Comparison Operators

Comparison operators allow us to compare two values.

They always return true or false.

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

Example

let a = 10;
let b = 5;

console.log(a > b);
console.log(a < b);
console.log(a == b);
console.log(a != b);

Output

true
false
false
true

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

This is one of the most important things to understand in JavaScript.

`==` (Loose Equality)

== compares values after converting the type if necessary.

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

Output

true

Because JavaScript converts "5" to a number.

`===` (Strict Equality)

=== compares both value and type.

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

Output

false

Because:

5 → number
"5" → string

Different types → result is false.

Best Practice

Most developers prefer using === because it avoids unexpected type conversions.

Logical Operators

Logical operators help us combine multiple conditions.

Operator	Meaning
`&&`	AND
`\	\
{% raw %}`!`	NOT

AND Operator `&&`

Both conditions must be true.

let age = 20;

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

Output

true

OR Operator `||`

At least one condition must be true.

let age = 16;

console.log(age < 18 || age > 60);

Output

true

NOT Operator `!`

Reverses the result.

let isLoggedIn = false;

console.log(!isLoggedIn);

Output

true

Final Thoughts

Operators are one of the most fundamental parts of JavaScript.

They allow us to:

Perform calculations
Compare values
Build logical conditions
Update variable values

Once you become comfortable with operators, writing real programs becomes much easier.

In the next article of this JavaScript series, we’ll explore another core concept that helps control how our programs run.

If you're learning JavaScript, keep practicing small examples in the console.
That’s the fastest way to build confidence.

Understanding Variables and Data Types in JavaScript

Subhrangsu Bera — Wed, 04 Mar 2026 21:20:19 +0000

If you're starting your JavaScript journey, one of the first concepts you'll encounter is Variables and Data Types.

They are the foundation of everything in programming — from storing a user's name to handling complex application state.

In this guide, we'll break down:

What variables are
How var, let, and const work
JavaScript primitive data types
How JavaScript stores and copies values

All explained with simple examples and real code outputs.

So, let's start...

Imagine you are moving into a brand-new house. You have a truckload of items: furniture, clothes, kitchen gadgets, and some very fragile family heirlooms. To stay sane, you don’t just throw everything into the middle of the living room. You use boxes, and more importantly, you label them.

In the world of JavaScript, Variables are those labeled boxes, and Data Types are the specific items you put inside them. Understanding how to use these boxes correctly is the first step to becoming a master architect of the web.

1. The Labeled Boxes: What are Variables?

In programming, variables are containers used for storing data values. They allow us to give a name to a piece of information so we can refer to it, move it around, or change it later in our code.

Example

let userName = "Subhrangsu";
let age = 25;
let isDeveloper = true;

console.log(userName);
console.log(age);
console.log(isDeveloper);

Output

Subhrangsu
25
true

Here:

userName → stores a string
age → stores a number
isDeveloper → stores a boolean

The Rules of the Label (Naming Conventions)

Before you start labeling your boxes, JavaScript has a few rules you must follow.

Case Sensitivity

let myVariable = "Hello";
let myvariable = "World";

console.log(myVariable);
console.log(myvariable);

Output

Hello
World

These are two different variables.

Characters Allowed

let user_name = "Subhrangsu";
let $price = 100;
let _count = 10;

console.log(user_name, $price, _count);

Output

Subhrangsu 100 10

Note: Reserved keywords cannot be used as variable names.

The Pro Tip: camelCase

let isUserLoggedIn = true;
let totalPriceOfItems = 250;

console.log(isUserLoggedIn);
console.log(totalPriceOfItems);

Output

true
250

This naming style improves readability.

2. Meet the Three Label Makers: `var`, `let`, and `const`

Not all labels are created equal. Depending on which label you use, your variable behaves differently.

The Old Reliable: `var`

The traditional method, var, is function-scoped.
If declared outside a function, it becomes global.

var city = "Kolkata";

console.log(city);

Output

Kolkata

But var has a problem — it ignores block scope.

Example:

if (true) {
    var hobby = "Coding";
}

console.log(hobby);

Output

Coding

Even though it was declared inside the block, it is still accessible outside.

The Modern Standard: `let`

Introduced in 2015 (ES6), Introduced in ES6 (2015), let is used for variables whose values may change. It is block-scoped, meaning the variable only exists within the specific set of curly braces {} where you created it.

let age = 30;

console.log(age);

age = 31;

console.log(age);

Output

30
31

Example with block scope:

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

console.log(message);

Output

Hello
ReferenceError: message is not defined

If a variable is declared but not assigned a value, JavaScript automatically assigns undefined.

let a;
console.log(a); // undefined

a = 45;
console.log(a); // 45

The Permanent Vault: `const`

const is for constants. Once you assign a value to a const box, you cannot reassign it to something else. It is also block-scoped.

Important nuance: While you cannot reassign the entire object or array stored in a const variable, you can still modify the values inside it.

const myCity = "New York";

console.log(myCity);

Output

New York

Trying to change it:

const myCity = "New York";

myCity = "London";

Output

TypeError: Assignment to constant variable

Important Nuance with Objects

const hero = {
    name: "Spider-Man",
    city: "New York",
};

hero.name = "Iron Man";

console.log(hero);

Output

{ name: 'Iron Man', city: 'New York' }

You cannot replace the object, but you can modify its properties.

3. What is Scope? (Your Variable's Neighborhood)

Scope is the context in which a variable is visible.

Global Scope

let greeting = "Hello World";

function showMessage() {
    console.log(greeting);
}

showMessage();

Output

Hello World

The variable is accessible everywhere.

Local / Block Scope

function testScope() {
    let secret = "Hidden Message";
    console.log(secret);
}

testScope();

console.log(secret);

Output

Hidden Message
ReferenceError: secret is not defined

The variable only exists inside the function.

4. Understanding Data Types: What’s in the Box?

JavaScript data types are generally divided into two categories:

Primitive
Non-Primitive

Primitive Data Types

Primitive values are immutable, meaning their values cannot be changed once created.
This means operations on primitive values always produce a new value rather than modifying the original one.

String

let name = "Subhrangsu";

console.log(name);
console.log(typeof name);

Output

Subhrangsu
string

Number

let age = 25;
let price = 199.99;

console.log(age);
console.log(typeof age);

Output

25
number

Boolean

let isStudent = true;

console.log(isStudent);
console.log(typeof isStudent);

Output

true
boolean

Null

let weatherCondition = null;

console.log(weatherCondition);
console.log(typeof weatherCondition);

Output

null
object

Note: typeof null returns "object" due to a historical bug in JavaScript that has been kept for backward compatibility.

Undefined

let userInput;

console.log(userInput);
console.log(typeof userInput);

Output

undefined
undefined

Symbol

const uniqueId = Symbol("user");

console.log(uniqueId);
console.log(typeof uniqueId);

Output

Symbol(user)
symbol

BigInt

const bigNumber = 9007199254740991n;

console.log(bigNumber);
console.log(typeof bigNumber);

Output

9007199254740991n
bigint

Checking the Type with `typeof`

console.log(typeof "Hello");
console.log(typeof 42);
console.log(typeof true);
console.log(typeof null);
console.log(typeof undefined);

Output

string
number
boolean
object
undefined

5. Copying Values: The Beginner's Trap

Understanding how JavaScript copies values is very important because it affects how data behaves when assigned to another variable.

Primitive → Copy by Value

let hero = "Batman";
let copiedHero = hero;

copiedHero = "Superman";

console.log(hero);
console.log(copiedHero);

Output

Batman
Superman

They are independent copies.

Objects → Copy by Reference

let heroStats = { strength: 80 };

let copiedStats = heroStats;

copiedStats.strength = 100;

console.log(heroStats);
console.log(copiedStats);

Output

{ strength: 100 }
{ strength: 100 }

Both variables point to the same object in memory.

Deep Copy Example

let original = { power: 50 };

let clone = { ...original };
clone.power = 90;

console.log(original);
console.log(clone);

Output

{ power: 50 }
{ power: 90 }

Now they are independent objects.
For simple objects, the spread operator can be used. For deep nested objects, structuredClone() is safer.

6. Practical Lab: Observe the Behavior

const studentName = "Subhrangsu";
let studentAge = 25;
let isGraduated = false;

console.log("Name:", studentName, "| Type:", typeof studentName);
console.log("Age:", studentAge, "| Type:", typeof studentAge);

// studentName = "Subha"
// TypeError: Assignment to constant variable.

studentAge = 26;

console.log("New Age:", studentAge);

let graduationYear = null;

console.log("Graduation Year:", graduationYear);

Output

Name: Subhrangsu | Type: string
Age: 25 | Type: number
New Age: 26
Graduation Year: null

Summary Checklist

Final Thoughts

Variables and data types are the building blocks of JavaScript.

Every program — from simple scripts to large applications —
relies on variables to store and manipulate data.

Key takeaways:

Use const by default
Use let when values need to change
Avoid var in modern JavaScript
Understand primitive vs reference types

Once you're comfortable with these concepts,
you can move on to operators, conditions, and functions in JavaScript.

Deepen Your Learning

For the full code examples used in this blog:

Exploring Variables
variables.js
Mastering Data Types
datatypes.js

DEV Community: Subhrangsu Bera

JavaScript OOP: From Blueprints to Reality

1. The Big Idea: Blueprint vs. Reality

2. What is a Class in JavaScript?

3. The "Constructor": The Setup Phase

Creating the Student Blueprint

4. Creating Objects: The new Keyword

5. The Power of Encapsulation

6. Procedural vs. Object-Oriented Style

7. Summary Challenge: Build Your Library

Final Thought

The Magic of `this`, `call()`, `apply()`, and `bind()` in JavaScript

1. What does this actually mean?

this inside a Normal Function

this inside an Object (The Home Owner)

2. Hijacking the Context: Method Borrowing

Tool 1: call()

Tool 2: apply()

Tool 3: bind() - The "Save for Later" Button

3. The Comparison Table

4. Why does this matter? (The Practical Side)

5. Summary Challenge: The "Method Hijack"

JavaScript Objects: Your Code's "Labeled Storage Unit"

1. What is an Object?

Why do we need objects?

2. Creating an Object

3. Accessing Properties: Two Ways

Dot Notation (.)

Bracket Notation ([])

4. Updating, Adding, and Deleting Properties

Updating a Property

Adding a New Property

Deleting a Property

When Should You Use Bracket Notation?

5. Looping Through an Object

6. Objects vs Arrays: Quick Comparison

Summary Challenge: The Student Profile

Arrow Functions: The Modern Chef’s Secret to Clean Code

1. The Transformation: From Normal to Arrow

The Traditional Recipe (Function Expression):

The Modern Arrow Recipe:

2. One Parameter? No Problem!

3. Multiple Ingredients (Parameters)

4. The Magic of "Implicit Return"

Traditional (Explicit):

Arrow Style (Implicit):

5. Arrow Functions in the Real World: Array Methods

The Goal:

6. Key Differences (High Level)

Summary Challenge: The Square-Off

Step 1 — Normal Function

Step 2 — Arrow Function

Step 3 — Call Both

Final Thoughts

Function Declaration vs. Expression: The Secret Life of Your Recipe Book

What is a Function?

Function Declaration: The "Wall-Mounted Recipe"

The Definition

Function Expression: The "Recipe on a Clipboard"

The Definition

Side-by-Side Comparison

Function Declaration

Function Expression

The Hoisting Mystery

Expressions: Wait for the Clipboard

Key Differences

When Should You Use Each?

Use Function Declaration when:

Use Function Expression when

Practice Challenge

Step 1 — Function Declaration

Step 2 — Function Expression

Final Thoughts

JavaScript Array Methods You Must Know

1. The Dynamic Duo: push() and pop()

push() — Add an element to the end

pop() — Remove the last element

2. The Front-Runners: shift() and unshift()

unshift()— Add an element to the start

shift() — Remove the first element

4. Creating Objects: The `new` Keyword

1. What does `this` actually mean?

`this` inside a Normal Function

`this` inside an Object (The Home Owner)

Tool 1: `call()`

Tool 2: `apply()`

Tool 3: `bind()` - The "Save for Later" Button

Dot Notation (`.`)

Bracket Notation (`[]`)

1. The Dynamic Duo: `push()` and `pop()`

`push()` — Add an element to the end

`pop()` — Remove the last element

2. The Front-Runners: `shift()` and `unshift()`

`unshift()`— Add an element to the start

`shift()` — Remove the first element

3. The Iterator: `forEach()`

Using `forEach()`

4. The Transformer: `map()`

5. The Security Guard: `filter()`

6. The Calculator: `reduce()`

Traditional Loop vs `map()` / `filter()`

1. `find()`

2. `findIndex()`

3. `some()`

4. `every()`

5. `includes()`

6. `slice()`

7. `splice()`

8. `sort()`

9. `join()`

5. The `.length` Property

The Classic `for` Loop

The `forEach` Method

The `if` Statement

The `if...else` Statement