That's why the error handling is important skills for every Javascript developer. Good error handling makes applications more stable, easier to debug, and much more user-friendly.

In this article we will understand how error works in Javascript and learn more about how to tackle those scenarios using try, catch and finally.

What Are Errors in JavaScript?

Errors are problems that occur while the code is running. These problems can stop the normal execution of the program.

For example:

console.log(userName);

// ReferenceError: userName is not defined

Here, JavaScript throws an error because of the variable does not exist.

Another example:

const user = null;

console.log(user.name);

// TypeError: Cannot read properties of null

These are called runtime errors because they happen while the program is running.

Common Types of JavaScript Errors

1. ReferenceError
   Occurs when a variable does not exist.

   console.log(age);
   

2. TypeError
   Occurs when a value is used incorrectly.

   const num = 10;
   
   num.toUpperCase();
   

   Numbers do not have toUpperCase().

3. SyntaxError
   Occurs when JavaScript syntax is invalid.

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

   Missing closing bracket.

Why Error Handling Matters

Imagine a shopping website where a single error can crash the entire website. Once crashed, the user will immediately leaves the website without purchasing.

To handle this, developer has to handle the error gracefully. This means:

• Showing a meaningful message

• Prevent app crashes

• If once part of website is crashed, should be handled that it will not crash entire website

• For developers, make debugging easier. Error handling also helps developers quickly identify problems during development.

Without proper error handling, debugging large applications becomes extremely difficult.

Using try and catch in JavaScript

JavaScript provides try and catch blocks to safely handle errors.

Basic syntax:

try { 
// risky code 
} catch(error) { 
// handle error 
}

The code inside try block will get execute first. If any error occurs, the execution of try block code immediately stops and the control move to the catch block.

The error object now contains the error that occurred in the try block.

Example:

try {
  const user = null;

  console.log(user.name);
} catch(error) {
  console.log("Something went wrong");
  console.log(error.message);
}

// Output
// Something went wrong
// Cannot read properties of null

Instead of crashing the application, the error is handled properly.

Understanding Graceful Failure

Graceful failure means handling errors in a controlled way.

• Displaying the message "App Crashed!" to the user is a bad practice.

• "Unable to load your profile. Please try again later." - Displaying a custom message like this is a good user experience. The user should never see the technical errors.

That’s why developers use error handling to improve user experience.

Understanding Error Object

Inside catch, JavaScript provides an error object.

Example:

try { 
    console.log(data);
} catch(error) {
    console.log(error);
}

The error object contains useful information like:

1. name

2. message

3. stack

Example:

console.log(error.name); 
// ReferenceError

console.log(error.message);
// data is not defined

This information is very useful while debugging applications.

The finally Block

Sometimes we want code to run in both cases, whether an error occurs or not.

That’s where finally is used.

Syntax:

try {
    // code 
} catch(error) {
    // handle error 
} finally {
    // always runs
} 

Example:

try {
    console.log("Trying...");
    riskyFunction(); 
} catch(error) {
    console.log("Error handled"); 
} finally {
    console.log("Execution completed");
}

// Trying...
// Error handled
// Execution completed

The finally block always runs.

Where is finally useful

The finally block is commonly used for:

1. Closing database connections

2. Stopping loaders/spinners

3. Cleaning resources

4. Resetting states

Example:

try {
    console.log("Fetching data...");
} catch(error) {
    console.log("API failed");
} finally {
    console.log("Hide loading spinner");
}

Even if the API fails, the loading spinner will still stop.

Throwing Custom Errors

JavaScript also allows developers to create their own errors using throw. This is useful when we want to validate data manually.

Example" of throw const age = -5;

try {
    if(age < 0) {
        throw new Error("Age cannot be negative"); 
    }
    console.log("Valid age"); 
} catch(error) {
    console.log(error.message); 
}

Output:

Age cannot be negative

Here, we manually created a custom error.

Why Custom Errors Are Useful

Custom errors help developers:

1. Validate user input

2. Create meaningful messages

3. Improve debugging

4. Control application flow

For example:

throw new Error("Password must contain 8 characters");

This message is much clearer than a generic error.

Conclusion

Errors are a normal part of programming. What matters is how we handle them.

JavaScript provides powerful tools like:

try catch finally throw

These features help developers build reliable and user-friendly applications.

Good error handling prevents crashes, improves debugging, and creates a smoother experience for users.

Instead of fearing errors, developers should learn how to handle them gracefully. That’s what makes applications truly production-ready.

In this article, we’ll understand:

• What this means in JavaScript

• How this behaves in functions and objects

• What does call(), apply(), and bind() do and their differences

• Simple real-world examples

Let’s make it simple.

What is this in JavaScript?

The easiest way to understand the concept of this. Just remember one thing:

This refers to the object that is calling the function.

In simple words, whoever calls the function becomes this for the function.

Inside Object

Example:

const user = {
    name: 'Rahul',
    greet: function (){
        console.log(`Hello ${this.name}`)
    }
}

user.greet();

Here, user calls the greet function.

So, this -> user for greet function.

const person1 = {
    name: "Rahul",
    greet() {
        console.log(`Hello ${this.name}`);
    }
};

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

person2.greet = person1.greet;

person2.greet();

Here, as the person2.greet is initialized with person1.greet.

But still, as the person2 is calling the greet function, the output will be 'Hello Aman'

Inside Normal Functions

Let’s understand with a regular function example.

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

show();

In browsers, this usually prints window, because the show function is directly called from the global object (i.e. window for browser).

But in strict mode:

"use strict"

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

show();

The output becomes undefined.

That’s because strict mode prevents JavaScript from automatically attaching this to the global object.

What is call() in JavaScript?

call() lets you manually decide what this should be.

Syntax:

functionName.call(thisValue, arg1, arg2)

functionName.call(thisValue, arg1, arg2)

Example:

const user = { name: "Ashish", }

function greet(city) {
    console.log(`Hello \({this.name} from \){city}`) 
}

greet.call(user, "Delhi")

Output: Hello Ashish from Delhi

Here what happened, you can see the greet is not attached to the user object, but if I want to pass the user as a context to the greet, we can use call().

call() is commonly used for:

• Function borrowing

• Reusing methods

• Setting custom this

Example:

const person1 = {
    name: "Rahul",
    introduce() {
        console.log(`Hi, I am ${this.name}`)
    },
};

const person2 = { name: "Aman" };

person1.introduce.call(person2);

Output: Hi, I am Aman

Here, person2 borrowed the method from person1.

What is apply() in JavaScript?

apply() works almost exactly like call().

The only difference is that apply() it accepts arguments as an array.

Syntax:

functionName.apply(thisValue, [args]);

Example:

const user = { name: "Ashish" };

function greet(city, country) {
    console.log(`Hello \({this.name} from \){city}, ${country}`) 
}

greet.apply(user, ["Delhi", "India"]);

Output: Hello Ashish from Delhi, India

call() vs apply()

Both do the same thing:

• They immediately invoke the function

• They manually set this

The difference is only in how arguments are passed.

• call:

  greet.call(user, "Delhi", "India");
  

• apply:

  greet.apply(user, ["Delhi", "India"]);
  

What is bind() in JavaScript?

bind() is slightly different than call and apply.

Instead of immediately calling the function, bind() returns a new function.

Syntax:

functionName.bind(thisValue);

Example:

const user = { name: "Ashish" };

function greet() {
    console.log(`Hello ${this.name}`);
}

const newFunction = greet.bind(user);

newFunction();

Output: Hello Ashish

Why is bind() Useful?

bind() is useful when you want to:

• Store a function

• Pass functions around

• Keep the correct this

Example:

const user = {
    name: "Ashish",
    greet() {
        console.log(this.name) 
    },
}

const button = user.greet;

button();

This may lose the correct this.

Using bind():

const button = user.greet.bind(user)

button()

Now this always points to user.

Real Difference Between call, apply, and bind

Simple Visual Understanding

Function → Caller Relationship:

• this

  user.greet()
  
  caller -> user
  this -> user
  

• call

  greet.call(user, 'Pankaj', 26);
  
  Caller manually set to user2
  this = user2
  

• apply

  greet.apply(user, ["Delhi", "India"])
  
  Caller manually set to user2, arguments passed as array
  this = user2
  

• bind

  const fn = greet.bind(user)
  
  Creates a new function
  this = user
  

Final Thoughts

Understanding this is one of the biggest turning points in JavaScript.

Once you understand the concept of who is calling the function, how call(), apply() , and bind() control this

JavaScript becomes much easier to read and debug.

The best way to master these concepts is to practice small examples repeatedly.

Start simple, experiment with different callers, and everything will begin to click naturally.

Follow the series to learn more about Javascript.

Think of a constructor function like a blueprint, and new as the tool that builds an actual object from that blueprint.

function User(name, age) {
  this.name = name;
  this.age = age;
}

const user1 = new User("Rahul", 22);

console.log(user1.name); // Rahul
console.log(user1.age);  // 22

Here, User is a constructor function, and user1 is an object created from it.

When we write:

const user1 = new User("Rahul", 22);

JavaScript does a few things behind the scenes:

1. Creates a new empty object.

2. Sets this to point to that new object.

3. Links the object to the constructor’s prototype.

4. Runs the constructor function.

5. Returns the newly created object.

So internally, it feels something like this:

const user1 = {};
user1.name = "Rahul";
user1.age = 22;

But new does this in a proper JavaScript way, including prototype linking.

Constructor Functions

Constructor functions are normal functions, but they are usually written with a capital first letter.

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

Now we can create multiple car objects:

const car1 = new Car("Toyota", "Fortuner");
const car2 = new Car("Honda", "City");

console.log(car1.brand); // Toyota
console.log(car2.brand); // Honda

Each object gets its own values, but both are created from the same constructor.

How new Links Prototypes

Every function in JavaScript has a prototype object.

When we create an object using new keyword, that new object gets linked to the constructor’s prototype.

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person("John");

person1.sayHello(); // Hello, my name is John

Here, sayHello is not directly inside person1. It comes from Person.prototype.

So the relation looks like this:

Person constructor -> Person.prototype -> person1 object

Or in simple words:

Constructor Function -> Prototype -> Instance Object

Why This Is Useful

Using prototypes helps us avoid repeating the same method inside every object.

Instead of creating a new copy of sayHello for every person, JavaScript stores it once in the prototype, and all instances can use it.

const person2 = new Person("Rahul");

person1.sayHello();
person2.sayHello();

Both objects can use the same method from the prototype.

new keyword with Classes in JavaScript

Classes in JavaScript are a cleaner and more modern way to create constructor functions.

Behind the scenes, classes still work using prototypes and the new keyword.

Creating Objects with Classes

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

const user1 = new User("Pankaj", 22);

console.log(user1.name); // Pankaj
console.log(user1.age);  // 22

Here:

• User is a class

• constructor() runs automatically when new is used

• user1 becomes an instance of the class

Without new, classes cannot create instances.

const user1 = User("Pankaj");

This throws an error:

Class constructor User cannot be invoked without 'new'

Because classes are designed specifically for object creation through new.

Final Thought

The new keyword is mainly responsible for creating object instances from constructor functions.

It creates a fresh object, connects it with the constructor’s prototype, and sets this to that object, and returns it.

So whenever you see this:

const obj = new Constructor();

You can read it as:

Create a new object using this constructor blueprint.

Follow the series to learn more about Javascript.

Honestly, almost every JavaScript developer gets confused about this at first. You don’t need to learn complicated internals or memorize weird rules to understand it.

A simple way to think about this is:

this usually refers to whoever is calling the function.

That is it.

Once this idea clicks, most examples start making sense.

What does this actually represent?

this is a special keyword in JavaScript. The value of this depends on how the function is being called, instead of where it is written.

Only who is calling matters most of the time. The output changes based on the context.

this in the global context

Let’s start simple. Try to run the code below at different places:

console.log(this);

If you run this inside the browser, you’ll see:

window

Because in the browser, the global object is window.

So basically:

this === window; // true

At the global level, this points to the global object.

this inside an object

Now, let’s look at the most common use case of this

const user = {
  name: "John",

  greet() {
    console.log(this.name);
  },
};

user.greet(); // John

Are you wondering why the output is "John"? Because user is calling greet().

So inside that function, this represents the user.

Remember, this refers to whoever is calling, and again, the user here is calling the greet function.

Also, a very easy trick is to look to the left of the dot.

user.greet()

The thing before the dot is usually what this becomes.

this inside a normal function

Now, let's see how this behaves inside the usual functions.

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

showThis();

Here, no object is calling the function.

It’s just being called directly.

So, the output of this would be undefined. Because nobody is calling the function.

There’s no object connected to it.

Same function, different this

This is where things become interesting.

function sayName() {
  console.log(this.name);
}

const student = {
  name: "Rahul",
  sayName,
};

const teacher = {
  name: "Priya",
  sayName,
};

student.sayName();
teacher.sayName();

Output:

Rahul
Priya

The function is exactly the same for both objects.

But the caller changes.

So this changes too.

student.sayName(); // this = student

teacher.sayName(); // this = teacher

This is the most important thing to remember about this.

this in classes

If you have understood the above behaviour, this will be easier to understand in classes.

Example:

class User {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello ${this.name}`);
  }
}

const user1 = new User("John");

user1.greet(); // Hello John

Here, when a new object of the User class has been created with the arguments "John", a new this has been created.

So, this line:

this.name = name

becomes

user1.name // John

Easiest way to understand this

Whenever you see this, ask:

“Who is calling this function?”

That question solves most confusion.

Example:

user.login(); // this -> user;

user is calling the function.

But, if only login function is called:

login(); // this -> undefined

Nobody is calling it an object method.

So this becomes undefined in strict mode.

Simple diagram idea

You can visualize it like this:

user  ─────► greet()

Inside greet():
this = user

Another one:

No object ─────► showThis()

Inside showThis():
this = undefined

Final thoughts

The reason this feels confusing because its value changes.

But once you stop thinking about where the function is written and start focusing on who is calling the function, things become much clearer.

So remember this one line:

this is usually the caller of the function

And that single idea will help you understand most this examples in JavaScript.

After this blog, you will get a crystal clear idea about expanding vs combining values using these operators.

What is spread operator?

The spread operator (...) is used to expand the values from the array, objects, or iterables into individual values.

• Expanding objects:

  const user = {id: 101, name: 'John', age: 22};
  
  const updatedUser = {...user, city: 'Delhi'};
  
  console.log(user);
  // {id: 101, name: 'John', age: 22}
  
  console.log(updatedUser);
  // {id: 101, name: 'John', age: 22, city: 'Delhi'}
  

  Here, we have expanded user details into another object using the spread operator.

  So, a updatedUser will have user + city values.

  But, if the user already contains the city value, then updatedUser will have the override value.

  const user = {id: 101, name: 'John', age: 22, city: 'Delhi'};
  
  const updatedUser = {...user, city: 'Jaipur'};
  
  console.log(user);
  // {id: 101, name: 'John', age: 22, city: 'Delhi'}
  
  console.log(updatedUser);
  // {id: 101, name: 'John', age: 22, city: 'Jaipur'}
  

• Expanding arrays:

  const nums = [1, 2, 3];
  
  const newNums = [...nums, 4, 5];
  
  console.log(newNums); // [1, 2, 3, 4, 5]
  

  Here, ...nums expands into 1, 2, 3. So, newNums will contain both nums values and new values (4, 5).

What is the Rest Operator?

The rest operator (...) is used to collect multiple values into a single array or object.

Example with Function Parameters

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

Here, ...numbers collects all arguments into the array

Example with Destructuring

const [first, ...restValues] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest);  // [20, 30, 40]

The remaining elements are collected into restValues.

Differences between Spread vs Rest

Practical Use Cases

1. Copying the Arrays (Immutable Updates)

   const original = [1, 2, 3];
   const copy = [...original];
   

2. Merging the Arrays

   const numbers1 = [1, 2];
   const numbers2 = [3, 4];
   
   const merged = [...numbers1, ...numbers2]; // [1,2,3,4]
   

3. Cloning and Updating the objects

   const user = {name: 'John', age: 21};
   
   const updatedUser = {...user, age: 22};
   

4. Flexible Functions Arguments

   function print(...args){
       console.log(args); // print all the values -> 1, 2, 4
   }
   
   print(1, 2, 4);
   

5. Extract/Remove any properties using rest

   const user = {name: 'John', age: 21, email: 'abc@email.com'};
   
   const {email, ...remainingProperties} = user;
   
   console.log(remainingProperties); 
   // {name: 'John', age: 21};
   

Visual Understanding

Spread Operator
[1, 2, 3] -> ...nums -> 1, 2, 3

Rest Operator
1, 2, 3 -> ...nums -> [1, 2, 3]

When to Use What?

Use the spread operator when you want to

• Copy or merge arrays/objects

• Pass multiple values

Use the rest operator when you want to:

• Handle an unknown number of arguments

• Extract remaining values

Final Thoughts

Even though spread and rest share the same syntax (...).

Their purpose is opposite:

• Spread → breaks things apart

• Rest → groups things together

Mastering this distinction will make your JavaScript code cleaner, more flexible, and easier to maintain.

Follow series to learn more about Javascript.

If you have ever written code like this:

const user = { name: "Ashish" age: 22 };

const name = user.name;
const age = user.age;

You already know the pain of writing the same object while extracting each value from the object

Let’s fix that.

What is destructuring?

Destructuring is a syntax which is introduced in ES6 (ECMAScript 2015), that allows to extract values from arrays or objects into variables in a simple, shorter, and cleaner way.

Update the same example using destructuring:

const user = { name: "Ashish" age: 22 };

const {name, age} = user;

Now JavaScript does the work for you. You do not have to write user.name over.

Destructuring Objects

Object destructuring is based on keys (property names).

Before ES6,

const user = {
  name: "Ashish",
  age: 22
};

const name = user.name;
const age = user.age;

After (Destructuring):

const { name, age } = user;

Renaming Variables: We can also rename the variables on the go, while destructuring.

const { name: username } = user;

Default Values: We can also assign the default values while destructuring objects

const user = {
  name: "Ashish"
};

const { name, age = 18 } = user;

console.log(age); // 18

Destructuring Arrays

Array destructuring works based on position (also called index).

Before ES6,

const colors = ['red', 'blue', 'pink'];

const first = colors[0];
const second = colors[1];
const third = colors[2];

After ES6, destructuring is much easier.

const colors = ['red', 'blue', 'pink'];

const [first, second, third] = colors;

Just in case, we do not want a second color:

const colors = ['red', 'blue', 'pink'];

const [first, , third] = colors;

This is fine for one or a maximum of 2 indexes, but we should not skip multiple indexes by keeping empty for so many positions in between. In that case, we can use the older approach const color = colors[10];

Why Use Destructuring?

• Less Repetitive Code

• Cleaner and more readable

Final Thoughts

Destructuring is one of those features that:

• Reduces boilerplate

• Improves readability

• Makes your code feel more modern

Start using it in small places, and soon it’ll become second nature.

Follow series to learn more about Javascript.

Let's break it down.

Function as values

Javascript is one of the language which supports functions as values.

In programming, a language is said to treat functions as values when it supports first class functions. This means functions can be assigned to variables, passed as arguments to other functions, and returned from other functions, just like any other data type.

Examples:

• Stored in variables

  // Regular functions
  function message(name){
      return `Hey ${name}!`;
  }
  
  const greet = message;
  console.log(greet('Rahul')); // Hey Rahul!
  
  //Arrow functions
  const sum = (a, b) => {
      return a + b;
  }
  
  console.log(sum(1, 2)); // 3
  

• Pass them in arguments

  function calculate(num1, num2, action){
      return action(num1, num2)
  }
  
  function sum(value1, value2){
      return value1 + value2;
  }
  
  function difference(value1, value2){
      return value1 - value2;
  }
  
  calculate(3, 2, sum);       // return 5
  calculate(3, 2, difference) // return 1
  

• Return functions from another functions

  function greet(name){
      function message(){
          return `Welcome ${name}!`;
      }
      
      return message;
  }
  
  const messageFunction = greet('Rahul'); 
  messageFunction(); // Welcome Rahul
  

What is a callback function?

A callback function is a simple function that is passed to another function to be executed later.

// functio
function processAction(callback){
    const message ='Machine is  ';
    callback(message);    
}

function brewCoffee(message){
    console.log(`${message}: brewing coffee!`)
}

function startingMachine(message){
    console.log(`${message}: starting!`)
}


processAction(startingMachine); // Machine is starting!
processAction(brewCoffee);      // Machine is brewing coffee!

In the above example, what happened is

• processAction -function accepting another function as a callback.

• brewCoffee - a function that will be passed later as a callback

• startingMachine - a function that will be passed later as a callback

Now,

• when processAction(startingMachine) is called with startingMachine as callback, it has been called with 'Machine is'. That string is passed to startMachine function argument and printed as 'Machine is starting!'.

• Same for processAction(brewCoffee)

Why Do We Use Callbacks?

Callbacks are specially used in asynchronous programming.

Javascript has a behaviour of not waiting for long operations until we program them to wait (Example: API calls). Callbacks are used in such cases that when the execution is completed/failed, callbacks are fired.

console.log('Start')

setTimeout(() => {
  console.log("This runs later");
}, 2000);

console.log('End');

/*
* Output
*
*
*    Start
*    End
*    This runs later
*
*/

Here, setTimeout has a callback function that is executed after 2 seconds.

Common use cases

1. Array Methods
   You have seen the callbacks in the pre-defined methods of the array. One of them is array.map.

   const arr = [1, 2, 3, 4, 5];
   
   const doubledArr = array.map((num)=> num * 2);
   
   console.log(doubledArr); // [2, 4, 6, 8, 10]
   

   Here, num => num * 2 is a callback.

2. Event Handling
   If you have worked with DOM event handlers, you must have seen addEventHandler.

   const button = document.getElementById('btn');
   
   button.addEventHandler('click', () => {
       console.log('Button clicked!');
   });
   

   In above example, when the button is clicked, 'Button clicked!' will be printed. Here, two arguments has been passed to addEventHandler

   • 'click' -> string

   • callback with console.log('Button clicked!')

3. Async Operations
   In JS, we fetch data from an API, which is also an example of asynchronous programming.

   const fetchData = (callback) => {
       fetch('api-endpoint')
           .then((data) => callback(data))
   }
   
   const callAfterComplete = (data) => {
       console.log(data);
   }
   
   fetchData(callAfterComplete);
   

Understanding Problem: Callback Hell

Callback hell is nothing, just nested callbacks. When callbacks depend on each other, they can become deeply nested and hard to manage.

getData(function(x){
    getMoreData(x, function(y){
        getMoreMoreData(y, function(z){ 
            ...
        });
    });
});

Here,

• getData will execute and will be called with the callback having x argument.

• Only if the getData is executed successfully, the inner function getMoreData will execute with arguments - x and a function with y.

• Only if the getMoreData is executed successfully, the inner function getMoreMoreData will execute with arguments - y and a function with z.

Issues in callback hell

1. Structure grows horizontally like a pyramid, which reduces code readability.

2. Make debugging complex and error handling difficult.

Final Thoughts

Callbacks are simple in concept but incredibly powerful:

• They enable async behavior

• They make functions reusable

• They form the base for modern JS patterns

But like any tool, they need to be used wisely—especially when nesting starts to grow.

When you call a method like .toUpperCase() on a string primitive, JavaScript creates a temporary wrapper object (using the String constructor) so the method can be executed. Once the operation is done, that object is immediately discarded, and the result is returned as a primitive.

What Are String Methods?

String methods are the built-in functions that are used to manipulate and update the string.

Here are some of the string methods:

• toUpperCase()

• toLowerCase()

• slice()

• substring()

• includes()

• split()

• trim()

These methods don’t modify the original string (because strings are immutable). Instead, they return a new string.

How string method work internally?

Let's take an example toUpperCase and understand how it works.

When you call string.toUpperCase()

const str = 'Hello';

str.toUpperCase();

1. Javascript iterate over each character

2. Convert that character into uppercase

3. Build a new string

Think of execution like this

Input String → Process Each Character → Apply Logic → Return New String

What are polyfills?

Polyfills are a custom implementation of the built-in functions. It is mostly used to create the same functionality that built-in functions offer.

Why Developers Write Polyfills?

• Provide support for new methods in older browsers

• Understanding internal logic

• To practice the built-in methods logic by creating them of their own

Polyfill Examples

Let's implement some polyfills for string methods

1. string.toLowerCase()
   Here I will be writing a custom polyfill for toLowerCase.

   if(!String.prototype.toLowerCase){
       String.prototype.toLowerCase = function () {
           let result = "";
   
           // this refer to string on which method is called
           for (let char of this) {
               const code = char.charCodeAt(0);
   
               // a-z → A-Z
               if (code >= 97 && code <= 122) {
                   result += String.fromCharCode(code - 32);
               } else {
                   result += char;
               }
           }
   
           return result;
       };
   }
   

   This will only work if the browser doesn't support string.toLowerCase, it will use the polyfill toLowerCase

2. string.includes

   if(!String.prototype.includes){
       String.prototype.myIncludes = function(searchString) {
           return this.indexOf(searchString) !== -1;
       };
   }
   

Common String Interview Questions

If you're preparing for interviews, these are must-practice:

1. Reverse a String function without using built-in methods
   Logic: Iterate over the string and append the new string with each character in an order so that the last character comes first.

2. Check Palindrome
   Logic: Reverse and create a new string. Check if both strings are equal or not.

3. Count Characters
   Logic: Use a "Map" or an object to store counts as you iterate through the string.

4. Anagram Detection: Do two strings contain the same characters?
   Logic: Sort both strings and compare them.

Why Understanding Built-in Behavior Matters

Most developers stop at using methods. But in an interview, the interviewer tests:

• How things work internally

• Your problem-solving ability

• Your understanding of edge cases

Understanding internals helps you in writing better code, debugging faster, and performing well in interviews.

Example questions:

1. How does slice() differ from substring()?

2. Why are strings immutable?

3. How would you optimize a string search?

Conclusion

If you want to stand out as a developer:

Don’t just use methods — understand them, practice writing polyfills, and solve real interview problems.

That’s where real growth happens.

Follow the series to learn more about Javascript.

Problems in Objects

• Object must have a key as a string. If you use a number, it will automatically be used as a string.

• Objects inherit properties from their prototypes. For example: Object.keys is a predefined property that should not be used as a key. This may lead to unexpected bugs.

• You cannot directly iterate over the object's values/keys. You have to use object.keys() or object.entries() to do iteration.

• Order of insertion is not maintained.

Problems with Arrays

• Removing a specific value from an array requires another iteration to find the position of the value in the array.

• The array might have duplicate values. In some cases the developer doesn't want to insert duplicate values into the array. To achieve the same, they need to iterate over the whole array to check if the value already exists.

Understanding Map and Set

What is Map?

Map is a built-in datatype in Javascript. It is used to store key-value pairs. It is like an object with some extra powers.

1. Key can be of any type (string, number, array...)

2. Key should be unique

3. Maintain insertion order. This means if you iterate over a map, it will be the same order in which they are inserted.

Map Methods:

1. Insert value,
   To insert a value in map, use map.set(key, value).
   Examples:

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   

2. Get a value
   To get a value, use map.get(key)

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   
   const employeeName = employee('name');
   
   console.log(employeeName); // Rahul
   

3. Check if value exisits, use map.has(key), return boolean state.

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   
   console.log(employee.has('name'));   // true
   console.log(employee.has('salary')); // false
   

4. Delete a value, use map.delete(key)

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   
   employee.delete("id");
   
   console.log(employee.has("id")); // false
   

What is Set?

A set is also a built-in datatype in Javascript used to store unique values. It is more like an array, but with the power of uniqueness.

• Store unique values

• Store only values, not keys

• Maintain insertion order

Set methods:

1. Insert a value, use set.add(value).

   const set = new Set();
   
   set.add(42);
   set.add(42);
   set.add(13);
   
   for (const item of set) {
     console.log(item);
     // Expected output: 42
     // Expected output: 13
   }
   

2. Check if the value exists, use set.has(key), return a boolean state.

   const set = new Set();
   
   set.add(42);
   set.add(13);
   
   console.log(set.has(42));   // true
   console.log(set.has(40)); // false
   

3. Delete a value, use set.delete(value), returns a boolean value indicating if the value is deleted successfully.

   const set = new Set();
   
   set.add(42);
   set.add(13);
   
   console.log(set.delete(42)); // true
   console.log(set.delete(40)); // false
   
   console.log(set) // Set(1) {13}
   

Both Map and Set have other methods like values, entries, size and forEach for iteration. Here I have explained to you the necessary methods for insertion and deletion of values.

Comparison between Map and Object

Comparison between Set and Array

When to Use Map?

Use Map when:

• You need key-value storage

• Keys are not just strings

• Frequent add/remove operations

• You care about insertion order

Example:

• Caching data

• Storing user sessions

• Mapping objects to values

When to Use Set?

Use Set when:

• You need unique values

• You want to remove duplicates

• Fast lookup is required

Example:

• Unique tags

• Removing duplicate IDs

• Tracking visited items

Conclusion

• Use Map when you need a better version of objects

• Use Set when you need uniqueness without extra logic

• Avoid forcing everything into Objects & Arrays

Follow Javascript series for more updates 🙂

const name = "Vishal";

const age = 30;

const message = "My name is " + name + " and I am " + age + " years old.";

console.log(message); // My name is Vishal and I am 30 years old.

But there are various difficulties or problems developers face while performing string concatenations:

• Hard to read strings

• String gets too long

• Cluttered code

• Difficulty in managing dynamic values

As the application grows, it becomes messier and increases the risk of errors.

After ES6, this has been resolved using Template Literals.

What Are Template Literals?

Template literals are the modern way to work with string concatenations in JavaScript. They use backticks (`` ) instead of quotes (''/"").

Example:

const name = "Vishal";

const age = 30;

const message = `My name is \({name} and I am \){age} years old.`;

console.log(message); // My name is Vishal and I am 30 years old.

Use of template literals instead of quotes allows:

• multi-line strings
  Example:

  const message = `This is a 
                   string to show template literals
                   multiline.`;
  
  console.log(message);
  // This is a string to show template literals multiline.
  

• Embedding variables or operations. Instead of using the + operator, you can inject a variable using ${}.
  Example:

  const number = 3;
  const message = `Square of \({number} is \){ number ** 2 }.`;
  
  console.log(message); // Square of 3 is 9.
  

Benefits of using Template Literals

• Cleaner and more readable

• No need for +

• Easier to maintain

Before vs After (Comparison)

❌ Old Way (Concatenation) const product = "Laptop"; const price = 50000;

const text = "The price of " + product + " is Rs. " + price + "."; ✅ New Way (Template Literals) const text = The price of \({product} is Rs. \){price}.;

👉 Clearly more readable and modern!

📄 Multi-line Strings Made Easy

Before template literals, multi-line strings were awkward:

❌ Old Way const text = "This is line one.\n" + "This is line two."; ✅ Template Literals const text = This is line one. This is line two.;

🎯 No special characters, no concatenation—just write naturally.

Real-World Use Cases

1. Dynamic Messages const user = "Ashish"; console.log(Welcome back, ${user}!);

2. HTML Templates (Very Common) const title = "JavaScript Basics";

   const html = `${title}`;
   

3. Logging and Debugging

   const count = 5;
   
   console.log(`Total items: ${count}`); 
   

4. Expressions Inside Strings: You can even run JavaScript inside ${}:

   const a = 5;
   const b = 10;
   
   console.log(Sum is ${a + b});
   

Why Template Literals Matter?

• Improves code readability

• Reduces syntax noise

• Makes dynamic strings easy to write

• Widely used in modern frameworks (React, Node.js)

Final Thoughts

Template literals are one of the simplest yet most powerful features in modern JavaScript.

Once you start using them: 👉 You’ll rarely go back to + concatenation.

Check out more blogs and follow our Javascript series to learn more.

An object is a combination of

1. Properties

2. Methods

Instead of writing separate variables and functions, we bundle them together.

Real-World Analogy: Blueprint → Objects

Let’s understand object-oriented programming with a simple example:

Imagine you are a car manufacturer.

You first create a blueprint (design)

• Then you use that blueprint to create multiple cars

👉 In JavaScript:

• Blueprint = Class

• Car = Object (Instance)

So instead of rewriting code again and again, we define a class once and reuse it.

🧱 What is a Class in JavaScript?

A class is a blueprint used to create objects.

It defines:

• What properties an object will have

• What actions it can perform

Example:

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

  greet() {
    console.log(`Hi, my name is ${this.name}`);
  }
}

🧪 Creating Objects (Instances)

We use the new keyword to create objects from a class.

const person1 = new Person("Ashish", 25);
const person2 = new Person("Rahul", 30);

person1.greet(); // Hi, my name is Ashish
person2.greet(); // Hi, my name is Rahul

👉 Each object:

• Has its own data

• Shares the same structure and methods

⚙️ Understanding the Constructor

The constructor is a special method inside a class.

Key Points:

• It runs automatically when an object is created

• It initializes object properties

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

👉 this refers to the current object.

🔧 Methods Inside a Class

Methods define what an object can do.

greet() {
  console.log(`Hi, my name is ${this.name}`);
}

👉 Methods are shared across all instances (memory efficient).

🔒 Basic Idea of Encapsulation

Encapsulation means:

👉 Keeping data and methods together and controlling access

Real-world example:

Think of a car:

• You don’t directly control the engine

• You use steering, brakes, accelerator

Same in code:

• Internal data is hidden

• Access is controlled via methods

Simple Example:

class BankAccount {
  constructor(balance) {
    this.balance = balance;
  }

  deposit(amount) {
    this.balance += amount;
  }

  getBalance() {
    return this.balance;
  }
}

👉 We interact using methods instead of directly modifying data.

♻️ Why Use OOP?

OOP helps you write better code:

• ✅ Reusable (write once, use many times)

• ✅ Organized (structured code)

• ✅ Scalable (easy to expand)

• ✅ Maintainable (easy to debug and update)

🧠 Class vs Object (Quick Comparison)

🎯 Assignment

Try this yourself 👇

Task:

Create a Student class with:

• Properties: name, age

• Method: printDetails()

Example Solution:

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

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

const student1 = new Student("Aman", 20);
const student2 = new Student("Neha", 22);

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

🧩 Visual Understanding (Conceptual)

Class (Blueprint)
      ↓
Create using new
      ↓
Objects (Instances)

Example:

Car (Class)
  ↓
car1, car2, car3 (Objects)

📌 Common Mistakes Beginners Make

❌ Forgetting new keyword ❌ Not using this properly ❌ Thinking each object has separate methods (they are shared) ❌ Confusing class with object

🧠 Final Thoughts

OOP is not just a concept—it’s a way of thinking.

Once you understand:

• Class

• Object

• Constructor

• Methods

You can build real-world applications much more easily 🚀

Happy Coding! 💻

But have you ever wondered what would happen if an array contained another array? How are we going to handle this?

Understanding nested arrays and handling operations on them is an important skill, especially for problem-solving and is usually asked in interviews as well.

What are nested arrays?

If an array contains a nested array, it is called a nested array.

Example:

const nestedArray = [1, 2, 3, [4, 5, 6], 7, [8, [9, 10]]];

The above example might be confusing to see. Let me break it down to see multiple array properly.

const nestedArray = [
    1,
    2,
    3,
    [4, 5, 6],
    7,
    [
        8, 
        [9, 10]
    ]
]

Now the values on each index can be seen clearly.

Values with respective index:

• 0 -> 1 (number)

• 1 -> 2 (number)

• 2 -> 3 (number)

• 3 -> [4, 5, 6] (array)

• 4 -> 7 (number)

• 5 -> [8, [9, 10]] (nested array)

Why is flattening an array used?

Flattening an array means converting a multidimensional array to a single-dimensional array.

• Extracting values from all nested arrays

• Arrange them in a single array

This is an important concept needed when:

1. Easier data processing

2. Useful in APIs and transforming data

3. Common in real-world scenarios (e.g., comments, categories with products)

Example:

const categories = [
    ["p1", "p2", "p3"],
    ["p4", "p5"]
];

After flattening:

const products = ["p1", "p2", "p3", "p4", "p5"];

Different approaches to flatten arrays

There are multiple ways to flatten an array:

Using in-build flat() method

An array has an in-built method flat(). This is the most common and simple approach.

const array = [1, 2, [3, 4], [5, 6]];

const flatArr = arr.flat(Infinity);

console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7]

Using Recursion

Recursion is a way to call the same function repeatedly.

const array = [1, 2, [3, 4], [5, 6]];

function flattenArray(arr) {
    let result = [];

    for (let item of arr) {
        if (Array.isArray(item)) {
            result = result.concat(flattenArray(item));
        } else {
            result.push(item);
        } 
    }

    return result; 
};

console.log(flattenArray([1, [2, [3, 4], 5]])); // [1, 2, 3, 4, 5]

Using reduce()

const array = [1, 2, [3, 4], [5, 6]];

const flattenArray = (arr) => {
    return arr.reduce((acc, item) => {
        if (Array.isArray(item)) {
            return acc.concat(flattenArray(item));
        }
        
        return acc.concat(item); 
    }, []); 
};

console.log(flattenArray([1, [2, [3, 4]]])); // [1, 2, 3, 4, 5]

Common Interview Scenarios

You may be asked:

1. Flatten only one level arr.flat(1);

2. Flatten up to depth n

3. Don’t use built-in methods. Use recursion or a stack approach.

Try to practice in any Javascript code editor.

Conclusion

Flattening arrays is a fundamental concept in JavaScript that helps you:

• Work with complex data structures

• Improve problem-solving skills

• Prepare for coding interviews

Start with flat() for simplicity, but master recursion for interviews.

1. name

2. age

3. salary

That’s where objects come in.

What Are Objects?

An object is a collection of data stored in key-value pairs.

Think of it like a real-world entity.

Example: A person has:

• name

• age

• city

In JavaScript, we represent this using an object:

const person = {
  name: "Ashish",
  age: 25,
  city: "Delhi"
};

Here:

• name, age, city are keys

• "Ashish", 25, "Delhi" are their values

Why Do We Need Objects?

Arrays store data using indexes:

const user = ["Ashish", 25, "Delhi"];

But this is confusing. What if I don't know on which index the value actually exists?

Objects solve this by using keys:

person.name

You can directly access the value by using its key name.

Creating Objects

You can create an object using curly braces {}:

const student = {
  name: "John",
  age: 20,
  course: "BCA"
};

Accessing Properties

1. Dot Notation

The object values can be accessed using . (dot) notation:

console.log(student.name); // John

2. Bracket Notation

The object values can also be accessed using [] (bracket) notation. Inside the bracket, the key name will be specified as a string.

console.log(student["age"]); // 20

Dot notation vs Bracket notation

• Dot notation → simple and common

• Bracket notation → useful when the key is dynamic

const key = "course";
console.log(student.course) // BCA
console.log(student[key]);  // BCA

Updating Object Properties

Updating object value is simple and uses only dots. Just specify the . and keyname with the assignment operator and value

student.age = 21;
console.log(student.age); // 21

Breakdown:

• age -> key

• = -> assignment operator

• 21 -> value

Adding New Properties

New properties can also be added using the same approach for updating the object.

student.city = "Mumbai";

console.log(student);

If the city doesn't exisits in object, it will add new property. Otherwise update exisiting.

Deleting Properties

Object properties can be deleted using delete keyword following with object property name.

delete student.course;

console.log(student);

Looping Through Object Keys

To loop through an object, we use for...in:

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

// Output:
// name Rahul
// age 21
// city Mumbai

Array vs Object (Simple Comparison)

Visual Representation (Mental Model)

Think of an object like a labeled box:

person = {
  name → "Ashish"
  age  → 25
  city → "Delhi"
}

Each value is stored with a label (key).

Assignment (Practice)

Create a student object and perform the following:

1. Create an object named "employee"

2. Add name, id, and salary fields

3. Update the salary of the employee object.

4. Loop through the employee object to print all properties.

Practice by converting real-life things (car, phone, user profile) into objects.

Conclusion

Objects are one of the most important concepts in JavaScript.

They help you:

• Organize data in key-value format

• Make code more readable

• Represent real-world entities

Once you’re comfortable with objects, you’ll find it much easier to work with APIs, JSON data, and real applications.

Follow and learn more about Javascript!

Before arrow functions, writing a function felt like writing duplicate code again and again.

Function Before Arrow Functions:

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

Arrow function syntax:

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

Benefits of using arrow functions:

1. Clear Syntax

2. Easier to read

3. Less Code than normal functions

That's why you can see arrow functions are widely used in modern Javascript.

What Are Arrow Functions?

Arrow functions were introduced in ES6 (ES2015) to make code easier and more readable. It is a shorter way of writing functions.

Basic Arrow Function Syntax

const functionName = (parameters) => {
    // write function logic here  
};

Example:

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

Arrow Function with One Parameter

If there is only one parameter, you can skip the parentheses.

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

Arrow Function with Multiple Parameters

If there are multiple parameters, parentheses are required.

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

Implicit Return vs Explicit Return

Explicit Return (using return)

Explicit return in arrow functions means it uses the return keyword inside the function body to return the final result. It is used when the function's body requires multiple statements to calculate the result.

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

Implicit Return (no return keyword)

The function result can also be returned without the return keyword by removing the function curly braces. This approach will only be applicable where the function will calculate the value in a single statement.

const multiply = (a, b) => a * b;

Converting Normal Function → Arrow Function

Normal Function:

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

Arrow Function:

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

Arrow Function vs Normal Function

For beginners: Use arrow functions for short and simple tasks

Simple Examples

• Greeting

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

• Addition

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

• Square

const square = num => num * num;

Using an Arrow Function with map()

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

const squares = numbers.map(num => num * num);

console.log(squares); // [1, 4, 9, 16]

Assignment

Try these on your own 👇

1. Write a normal function to calculate the square of a number

2. Rewrite it using an arrow function

3. Create an arrow function that checks if a number is even or odd

4. Use an arrow function inside map() on an array

Arrow Function Breakdown

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

• const add → function name

• (a, b) → parameters

• => → arrow syntax

• a + b → returned value

Conclusion

• Arrow functions make your code.

• Cleaner

• Shorter

• More modern

Follow the series for more blogs!

That’s where functions come in.

What are functions? Why we need functions?

Functions are a piece of code written that can perform a specific task. There are a code blocks which can be reusable at multiple places.

Instead of writing same logic to separate places you can it inside a function and use it where ever you need it.

Real life analogy

Imagine a coffee machine ☕️

Actions perform in a coffee machine:

1. Press the button

2. Grinding

3. Brewing

4. Filtering

5. Gives coffee

These are all the separate methods done by the coffee machine.

Examples: Without function:

const sum1 = 1 + 2; // 3
const sum2 = 2 + 3; // 5
const sum3 = 3 + 4; // 7
const sum4 = 4 + 5; // 9

You can see we have the write the logic to add the number multiple times. Instead of this we can write a function sum which can return the sum of two number. We just had to provide the two numbers to the functions.

Examples: With function:

function sum (number1, number2){
    return number1 + number2;
}

const sum1 = sum(1, 2); // 3
const sum2 = sum(2, 3); // 5
const sum2 = sum(3, 4); // 7
const sum2 = sum(4, 5); // 9

How to create functions?

We can create functions by different ways:

1. Function Declaration Syntax

2. Function Expression Syntax

Let's discuss them one by one:

Function Declaration Syntax

This is the most common way of creating the functions:

function sum (number1, number2) {
    return number1 + number2
}

Key points:

1. function keyword

2. name of the functions (sum)

3. Can be called anywhere (explained more later in this blog)

Function Expression Syntax

In this approach, a function is stored in a variable:

const sum = function (number1, number2) {
    return number1 + number2
}

Key points:

1. Function is declared using function keyword.

2. Function has no name.

3. Function reference is stored in a variable. A variable should have a name.

4. Can be called using the variables. In this case, you can call sum() as it stores the reference of the function. Ideally, the function is called

Declaration vs Expression (Side-by-Side)

Hoisting in Functions

Let's first understand what hoisting is:

Hoisting means: javascript moves declarations to the top before execution.

Example:

console.log(number1); // undefined

var number1 = 10;

You might be wondering that console.log(number1) should give an error instead of printing undefined. In Javascript, this is possible because of the concept of hoisting.

Now try to run the logic below in the browser console dev tool or by creating a JS file and running it using node <filename.js>.

console.log(number2);
// ReferenceError: Cannot access 'number2' before initialization

const number2 = 20;

console.log(number3);
// ReferenceError: Cannot access 'number3' before initialization


const number3 = 30;

Now, you can see the error while executing this code.

Same applicable on the function.

Hoisting works in declaration syntax:

const result = sum(1, 2);
console.log(result); // 3

function sum (number1, number2){
    return number1 + number2;
}

Hoisting doesn't work in declaration syntax:

const result = sum(1, 2);
console.log(result);
// ReferenceError: Cannot access 'sum' before initialization

const sum = function (number1, number2){
    return number1 + number2;
}

When to Use What?

Use Function Declaration when:

• You want simple, reusable functions

• You need to call it anywhere in your code

• You want a cleaner structure

Use Function Expression when:

• You’re passing functions as arguments (callbacks)

• You want more control over execution

• You’re working with modern patterns (like arrow functions) (Arrow functions we can study in the next blog)

Execution flow of function call

You can also read about Javascript code execution in detail in the blog "Understanding JavaScript Global & Local Execution Context".

For functions, we can understand it stepwise. When a JS code is been executed:

1. Javascript scans all the code

2. Hoist function declaration on top

3. Start execution line by line

4. When executing the code, if the function called is hoisted, it will execute that function.

Assignment (Try It Yourself)

1. Write a function declaration that multiplies two numbers and returns the result.

2. Write the same logic using a function expression approach.

3. Call both the functions and try to re-run the logic by updating the values passed to the variable.

4. Call both the functions before they are defined and try to observe the output (error/result).

Conclusion

Functions are the building blocks of any program. You should know that the functions are used for:

1. Reusability

2. Combining Logic

3. Make code clean and readable

Follow my Javacript series to learn more!

JavaScript has built-in array methods that simplify these tasks.

In this article, we will explore some of the most useful array methods with simple examples:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce()

• forEach()

You can try all examples directly in your browser console or Node.js.

Lets first understand the methods which are used to add or remove the data in an array:

push()

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

Example:

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

const newLength = fruits.push("Mango");

console.log(newLength) // 3
console.log(fruits); // ["Apple","Banana","Mango"]

It returns the updated length of array.

Push is generally used when adding a new item to a list, such as adding a task to a to-do list.

pop()

The pop() is used to remove the last element from the array.

Example:

const items = ["Shoe", "Tshirt", "Trouser"];

const popItem = items.pop();

console.log(popItem); // 'Trouser'
console.log(items);   // ["Shoe", "Tshirt"]

It returns the element that is removed.

shift()

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

Example:

const items = ["Shoe", "Tshirt", "Trouser"];

const shiftItem = items.shift();

console.log(shiftItem); // "Shoe"
console.log(items);     // ["Tshirt", "Trouser"]

It returns the item which is removed. This works same as Queues in real life

unshift()

The unshift() method adds an item to the start of the array.

Example:

const items = ["Shoe", "Tshirt", "Trouser"];

const popItem = items.unshift("Shirt");

console.log(popItem); // 4
console.log(items);   // [ 'Shirt', 'Shoe', 'Tshirt', 'Trouser' ]

It returns the new length of the array.

Let's understand the methods that are used to perform iteration (loop) on an array

forEach()

forEach() is used to perform an action on each element of an array.

It accepts a callback function that accepts three arguments, provided by forEach itself.

• value: element of array

• index: position of element in array

• array: complete array

forEach() runs a function for every item in the array.

Example:

const numbers = [1, 2, 3]

numbers.forEach((num) => {
    console.log(num);
});

Output:
1
2
3

Traditional Loop vs forEach()

for loop:

let numbers = [1, 2, 3];

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

vs

forEach:

let numbers = [1, 2, 3];

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

As we can see in the above example, forEach is more cleaner and easier to read and use.

map()

map() creates a new array by updating each element based on the logic inside the callback.

Assume map() to be turning a crate of fruit into a crate of juices.

The number of juice will remain same as the number of fruits.

It accepts a callback function that accepts three arguments, provided by map itself.

• value: element of array

• index: position of element in array

• array: complete array

Example:

const numbers = [1, 2, 3];

const doubledNumbers = numbers.map((num) => {
    return num * 2;
});

console.log(doubledNumbers);

Output: [2, 4, 6] // updated values

console.log(numbers);

Output: [1, 2, 3] // remains same

map() returns an updated elements array. Also, it doesn't update the original array.

filter()

filter() creates a new array that only includes elements that satisfy the condition inside the callback function.

It accepts a callback function that accepts three arguments, provided by filter itself.

• value: element of array

• index: position of element in array

• array: complete array

Example:

const numbers = [3, 7, 10, 2];

const filteredNumbers = numbers.filter((num) => {
    if(num > 5){
        return true;
    }
    
    return false;
});

console.log(filtersNumbers);

Output: [7, 10]

So, returned array only includes those values for which callback return true.

How filter() work?

Here:

• For 3, the callback returns false. filteredNumbers doesn't contain 3

• For 7, the callback returns true. filteredNumbers contain 7

• For 10, the callback returns true. filteredNumbers contain 10

• For 2, the callback returns false. filteredNumbers doesn't contain 2

reduce()

reduce() combines all values of an array into a single value.

Reduce is like combining flour, eggs, and sugar to bake one single cake.

Common use cases include:

• total sum

• calculating totals

• combining data

Example:

let numbers = [5, 10, 20];

let total = numbers.reduce((accumulator, value) => {
 return accumulator + value; 
}, 0);

console.log(total);

Output: 35

Returns the single value after the final calculation.

How reduce() works?

Sometimes, reduce is very confusing for beginners.

Visual Idea for reduce()
[5, 10, 15]

Step 1 → 0 + 5 = 5
Step 2 → 5 + 10 = 15
Step 3 → 15 + 15 = 30

Final Result = 30

Assignment for Practice

Try this in your browser console.

• Try map()

  1. Create an array

  2. Double each number using map()

  3. Console the output and observe by updating the array.

• Try filter()

  1. Apply filter() method on map() output

  2. Filter numbers greater than 10

• Try reduce()

  1. Create an array

  2. Add those numbers using reduce() method.

  3. Check the output and retry after updating the values and number of values in array.

Final Thoughts

Array methods make JavaScript more powerful and readable.

Instead of writing long loops, you can use:

• map() to change data

• filter() to select data

• reduce() to combine data

• forEach() to loop through items

These methods are commonly used in modern JavaScript, React, and backend development.

The best way to learn them is simple: open your console and experiment with them.

Follow Javascript Series to learn more!

Imagine a wooden furniture factory that manufactures different types of furniture. To better understand the process, let’s see how the factory works internally.

The factory uses several types of wood. For simplicity, let’s assume the following types are used:

1. Sagwan

2. Mango

3. Sheesham

Inside the factory, the work is divided into multiple departments

1. Cutting

2. Framing

3. Polishing

4. Cushion

5. Quality Assurance

There is a centralized execution chain of the factory on which the departments work, and each department performs its task in a specific order in the execution chain.

The entire factory has a central board on which it is mentioned:

• The order of departments working inside the factory

• What needs to be done

Inside the department, there will definitely be so many works which are working one by one for their individual task. So, each department also has its own board (or blackboard) where two things are written:

• The order of individual tasks to be done inside the department

• The actual tasks that need to be performed in that department

There is also a manager in the factory whose job is to:

• Monitor the progress of the work

• Ensure that each department performs its task in the correct order

Let's combine the diagrams to see the full factory view:

Now the factory receives an order to build a wooden sofa with Sagwan wood.

Steps:

1. The very first step is to analyze the wood that has been received.

2. On the central factory blackboard:

   • What to be done: Build a sofa with a specific size mentioned

   • Order of work done: Cutting -> Framing -> Polishing -> Cushion -> QA

3. Wood comes to the Cutting department. On the Cutting department blackboard:

   • What to be done: Cut the wood into a smaller size as mentioned

   • Order of work: Cut big wood logs -> Cutting into smaller chunks

4. Chunks of wood come to the Framing department. On the Framing department blackboard:

   1. What to be done: Frame the received pieces of wood into the given size

   2. Order of work: Smoothen the wood -> Frame into the size of the sofa -> Finishing

5. A framed sofa comes to the Polishing department. On the Polishing department blackboard:

   1. What to be done: Polish the received sofa frame

   2. Order of work: Apply polish -> Rubbing

6. A polished sofa comes to the Cushion department. On the Cushion department blackboard:

   1. What to be done: Apply a cushion on the sofa frame

   2. Order of work: Cutting cushion -> Stitching and pasting

7. A final piece comes to the QA department. On the QA department blackboard:

   1. What to be done: Check the quality and overall sofa

   2. Order of work: Checking the quality

All of these steps are done under the supervision of the manager and if any process fails in between, the manager can ask the department to do the work again properly.

Things to remember:

1. The tasks done are executed on the execution chain. The execution chain is inside the factory

2. There are some sub-tasks inside the department, which are inside the department. But the space allotted to the department is inside the factory, So those subtasks are also belong to the factory.

Javascript program execution works the same way. To understand this, let's replace a few terms with Javascript terminology.

Here,

• Wood types -> Data types

• Factory -> Global Execution Context

• Global Execution has two phases:

  • Code Phase / Thread Phase

  • Memory Phase

• Departments -> Functions, Functions has its own Local Execution Context, which further has two phases:

  • Code Phase / Thread Phase

  • Memory Phase

• Manager -> Call Stack, who is responsible for maintaining the order of execution of the functions.

So, whenever a JS code has been executed:

1. A global execution context is created (also known as the Creation Phase).

2. Declare the variables and store the definition of functions inside the Memory of the Global Execution Context (also known as Memory Phase).

3. Now the execution of code starts line by line, which checks the current value of the variables in the memory and reads the definitions of the functions from the memory (also known as Code Phase).

4. If there is any function in the code:

   1. Create the Local Execution Context for the function.

   2. Declare the variables in Local Execution Context (also known as Memory Phase for Local Context).

   3. Execute the code of the function line by line.

   4. Once all the code inside the function is executed completely, it returns the value to the Global Context

5. Global Execution Context executes the remaining code until all the code is executed.

Let's take an example to understand the flow:

Here is a small code snippet:

var value1 = 10;
var value2 = 20;

function sum(sumNum1, sumNum2, sumNum3) {
    return sumNum1 + sumNum2 + sumNum3;
}

function calculate(calcNum1, calcNum2) {
  	var calcNum3 = 30;
    var total = sum(calcNum1, calcNum2, calcNum3);
    return total;
}

var result = calculate(value1, value2);
console.log(result);

Steps in which JS code is executed:

Global Execution context (Factory)

1. Creation Phase
   Global Execution Context is created
   (Blackboard for the factory is ready)

   global is assigned to this (Global can vary depending on the environment in which the code is running. In the browser, it will be a window object.)

   Global Execution Context Memory
   ________________________________________________________
   | window: global object                                |
   | this: window                                         |
   --------------------------------------------------------
   

2. Memory Phase: Variable and Function Definition get stored in Global Memory
   (What to be done, the size, and the material of the sofa are now mentioned on the blackboard)

   value1 is declared in memory with a value undefined
value2 is declared in memory with a value undefined
   The declaration of the sum function is stored in memory.
   The declaration of the calculate function is stored in memory.
   result is declared in the memory with a value undefined

   Global Execution Context Memory
   ________________________________________________________
   | window: global object                                |
   | this: window                                         |
   |                                                      |
   | value1: undefined                                    |
   | value2: undefined                                    |
   | sum: fn()                                            |
   | calculate: fn()                                      |
   | result: undefined                                    |
   --------------------------------------------------------
   

3. Execution Phase: Execution of code line by line. Execution is done by the JS engine on main thread.
   (Sofa building process starts now)

   The value of value1 is initialized as 10.
   The value of value2 is initialized as 20.
   The calculate function is called, so a new Local Execution Context is created and pushed onto the Call Stack.

   Global Execution Context Memory
   ________________________________________________________
   | window: global object                                |
   | this: window                                         |
   |                                                      |
   | value1: 10                                           |
   | value2: 20                                           |
   | sum: fn()                                            |
   | calculate: fn()                                      |
   | result: undefined                                    |
   --------------------------------------------------------
   

   1. Creation Phase: Local Execution Context is created for calculate
      (Blackboard for the Department is ready)

      calcNum1 is declared in memory with a value 10
calcNum2 is declared in memory with a value 20

      Global Execution Context Memory
      ________________________________________________________
      | window: global object                                |
      | this: window                                         |
      |                                                      |
      | value1: 10                                           |
      | value2: 20                                           |
      | sum: fn()                                            |
      | calculate: fn()                                      |
      |                                                      |
      | Local Execution Context Memory for calculate()       |
      | ---------------------------------------------------- |
      | | this: window                                     | |
      | | calcNum1: 10                                     | |
      | | calcNum2: 20                                     | |
      | | total: undefined                                 | |
      | ---------------------------------------------------- |
      |                                                      |
      | result: undefined                                    |
      --------------------------------------------------------
      

   2. Memory Phase: Variable and Function Definition get stored in Local Memory
      (What to be done and the used things are now mentioned on the department blackboard)

      calcNum3 is declared in memory with a value undefined
total is declared in memory with a value undefined

      Global Execution Context Memory
      ________________________________________________________
      | window: global object                                |
      | this: window                                         |
      |                                                      |
      | value1: 10                                           |
      | value2: 20                                           |
      | sum: fn()                                            |
      | calculate: fn()                                      |
      |                                                      |
      | Local Execution Context Memory for calculate()       |
      | ---------------------------------------------------- |
      | | this: window                                     | |
      | | calcNum1: 10                                     | |
      | | calcNum2: 20                                     | |
      | | calcNum3: undefined                              | |
      | | total: undefined                                 | |
      | ---------------------------------------------------- |
      |                                                      |
      | result: undefined                                    |
      --------------------------------------------------------
      

   3. Execution Phase: Execution inside calculate function. Execution of code line by line on main thread.

      The value of calcNum3 is initialized as 30.
      The sum function is called, so a new Local Execution Context is created and pushed onto the Call Stack.

      Global Execution Context Memory
      ________________________________________________________
      | window: global object                                |
      | this: window                                         |
      |                                                      |
      | value1: 10                                           |
      | value2: 20                                           |
      | sum: fn()                                            |
      | calculate: fn()                                      |
      |                                                      |
      | Local Execution Context Memory for calculate()       |
      | ---------------------------------------------------- |
      | | this: window                                     | |
      | | calcNum1: 10                                     | |
      | | calcNum2: 20                                     | |
      | | calcNum3: undefined                              | |
      | | total: undefined                                 | |
      | ---------------------------------------------------- |
      |                                                      |
      | result: undefined                                    |
      --------------------------------------------------------
      

      Local Execution Context (Departments)

      1. Creation Phase: Local Execution Context is created for sum
         (Blackboard for the Sub-Department is ready)

         sumNum1 is declared in memory with a value 10
sumNum2 is declared in memory with a value 20
sumNum3 is declared in memory with a value 30

         Global Execution Context Memory
         ________________________________________________________
         | window: global object                                |
         | this: window                                         |
         |                                                      |
         | value1: 10                                           |
         | value2: 20                                           |
         | sum: fn()                                            |
         | calculate: fn()                                      |
         |                                                      |
         | Local Execution Context Memory for calculate()       |
         | ---------------------------------------------------- |
         | | this: window                                     | |
         | | calcNum1: 10                                     | |
         | | calcNum2: 20                                     | |
         | | calcNum3: undefined                              | |
         | | total: undefined                                 | |
         | |                                                  | |
         | | Local Execution Context Memory for sum()         | |
         | | ________________________________________________ | |
         | | | this: window                                 | | |
         | | | sumNum1: 10                                  | | |
         | | | sumNum2: 20                                  | | |
         | | | sumNum3: 30                                  | | |
         | | ------------------------------------------------ | |
         | ---------------------------------------------------- |
         |                                                      |
         | result: undefined                                    |
         --------------------------------------------------------
         

      2. Memory Phase: SInce there is no variable value needs to be assigned to memory. Nothing will happen for sum function in this phase.

      3. Execution Phase: Sum of 3 variables has been returned by sum function.

      4. The execution context for sum is now destroyed.

   4. Execution Phase: Back to execution of calculate function
      The value of total is now been updated to 60

      Global Execution Context Memory
      ________________________________________________________
      | window: global object                                |
      | this: window                                         |
      |                                                      |
      | value1: 10                                           |
      | value2: 20                                           |
      | sum: fn()                                            |
      | calculate: fn()                                      |
      |                                                      |
      | Local Execution Context Memory for calculate()       |
      | ---------------------------------------------------- |
      | | this: window                                     | |
      | | calcNum1: 10                                     | |
      | | calcNum2: 20                                     | |
      | | calcNum3: undefined                              | |
      | | total: 60                                        | |
      | ---------------------------------------------------- |
      |                                                      |
      | result: undefined                                    |
      --------------------------------------------------------
      

   5. Execution Phase: The value of total is now been returned and the Local Context for calculate is now destroyed.

4. Execution Phase: Back to execution of global context
   The value of result is now been updated to 60

   Global Execution Context Memory
   ________________________________________________________
   | window: global object                                |
   | this: window                                         |
   |                                                      |
   | value1: 10                                           |
   | value2: 20                                           |
   | sum: fn()                                            |
   | calculate: fn()                                      |
   |                                                      |
   | result: 60                                           |
   --------------------------------------------------------
   

5. Execution Phase: console.log reads result from memory and prints 60

Call Stack (Manager)

The Call Stack works like a stack of tasks.

When a function is called, its execution context is pushed onto the stack.

When the function finishes execution, it is popped from the stack.

Single thread

You have heard about that Javascript is single thread language.

That means:

• Global code runs on main thread

• When execution of code contains a function

  • A local context is created

  • That context is pushed into Call stack

  • The main thread now start executing the function logic

  • After execution, the local context is removed and destroyed

• No other thread is created while execution other than main thread.

Function create execution context, not threads

Assignment for practice

Install Node.js (runtime environment) and VSCode (code editor)

Open VSCode, create a file practice.js and copy the above code into that file.

Click on Terminal -> New Terminal from the menu bar on top.

From select terminal, selected "Javascript Debug Terminal".

Add breakpoints by clicking on the gutter (the space). Red dot indicate that the breakpoint is added on that line.

Now, run node practice.js . Make sure you are in the same folder inside the terminal.

Try to play around with the next breakpoint button and observe the values of the context section.

Conclusion

JavaScript executes code using Execution Contexts and the Call Stack.

The Global Execution Context runs first, and every function call creates a new Local Execution Context.

These contexts are managed by the Call Stack to ensure that code executes in the correct order.

Follow the series to learn more about Javascript.