Then promises came to solve callback nesting.

But even promises can feel messy sometimes with .then() chains.

So JavaScript introduced async and await to make things cleaner.

In this blog I will share how I understand async await and why it makes async code easier to read and write.

Why async await was introduced

With promises we usually write code like:

fetchData()
  .then((res) => {
    return processData(res)
  })
  .then((data) => {
    console.log(data)
  })
  .catch((err) => {
    console.log(err)
  })

This works fine.

But as things grow it starts looking like a chain.

Harder to read.

So async await was introduced to make this look like normal code.

How async functions work

When you add async before a function:

async function getData() {
  return "hello"
}

This function always returns a promise.

Even if you return a normal value.

getData().then(console.log) // hello

So:

async function → always returns promise

What await does

await is used inside async function.

It pauses the execution until promise resolves.

Example:

async function getData() {
  const res = await fetch("https://api.freeapi.app/api/v1/public/randomusers?page=1&limit=10")
  console.log(res)
}

Here:

JavaScript waits for fetch to finish then moves to next line

So it feels like synchronous code.

How it actually feels

Instead of:

Promise → then → then

You write:

Step 1 wait Step 2

Promise vs async await

Promise style:

fetchData()
  .then((res) => processData(res))
  .then((data) => console.log(data))

Async await style:

async function run() {
  const res = await fetchData()
  const data = await processData(res)
  console.log(data)
}

Same thing.

But second one looks cleaner.

Async function flow

Error handling with async await

With promises:

fetchData()
  .then((res) => console.log(res))
  .catch((err) => console.log(err))

With async await:

async function run() {
  try {
    const res = await fetchData()
    console.log(res)
  } catch (err) {
    console.log(err)
  }
}

Same concept.

Just cleaner.

Why this matters

Async await makes code:

• easier to read

• easier to debug

• easier to write

It looks like normal step by step code even though it is async.

Important thing to remember

• await only works inside async function

• async function always returns promise

Simple real example

async function getUser() {
  try {
    const res = await fetch("https://api.freeapi.app/api/v1/public/randomusers?page=1&limit=10")
    const data = await res.json()
    console.log(data)
  } catch (err) {
    console.log("Error fetching user")
  }
}

Mental model

async await is just:

promise + cleaner syntax

Nothing new under the hood.

Async await does not replace promises.

It is built on top of promises.

It just makes async code look simple and readable.

One step after another.

Simple.

But in real apps things do not always happen instantly.

Sometimes you have to wait:

• fetching data from API

• loading files

• timers

So what happens then?

Does JavaScript just stop and wait?

No.

That is where synchronous and asynchronous behavior comes in.

In this blog I will share how I understand sync vs async in JavaScript.

What synchronous code means

Synchronous means:

one thing at a time

Code runs step by step.

Example:

console.log("Start")
console.log("Middle")
console.log("End")

Output:

Start
Middle
End

each line waits for previous one

How it feels

Straight line execution

What asynchronous code means

Asynchronous means:

do not wait move ahead

Example:

console.log("Start")

setTimeout(() => {
  console.log("Inside timeout")
}, 2000)

console.log("End")

Output:

Start
End
Inside timeout

Even though timeout is in middle it runs later

Why JavaScript needs async

Imagine this:

You call an API that takes 5 seconds.

If JavaScript waits:

everything freezes

• UI stuck

• buttons not working

• bad experience

So instead JavaScript says:

I will start this task and continue other work

Real life example

Think like ordering food:

Synchronous:

order → wait → get food → then do next thing

Asynchronous:

order → do other work → get food later

Blocking vs non blocking

Synchronous:

blocking

It waits.

Asynchronous:

non blocking

It continues.

Problem with blocking code

Let us look at this:

console.log("Start")

setTimeout(() => {
  console.log("Waited 3 seconds")
}, 3000)

console.log("End")

Output:

Start
End
Waited 3 seconds

Now imagine if JavaScript waited for this like synchronous code:

Start
(wait 3 seconds)
Waited 3 seconds
End

everything would pause

nothing else would run

app would feel stuck

Async flow

When async task happens:

JavaScript sends it to background

continues execution

later runs the function

Async mental model

Diagram idea:

Simple async example

setTimeout(() => {
  console.log("Done")
}, 1000)

runs after delay

Where you see async

• API calls

• database queries

• timers

• file operations

Why this matters

Without async:

apps would freeze

With async:

smooth experience

Quick comparison

Synchronous:

• step by step

• blocking

Asynchronous:

• runs in background

• non blocking

JavaScript is single threaded.

So it cannot do everything at once.

Async is how it handles waiting tasks without stopping everything.

But in real world apps, things break.

Maybe:

• API fails

• variable is undefined

• wrong data comes

And when something breaks, JavaScript throws an error and stops execution.

That’s not good for users.

So we need a way to handle errors properly.

In this blog I will share how I understand error handling using try, catch and finally.

What errors are in JavaScript

Errors are situations where something goes wrong during execution.

Example:

console.log(x)

Output:

ReferenceError: x is not defined

Here:

JavaScript stops execution

So if this happens in real app, user experience breaks.

Why error handling matters

Instead of crashing the app, we can handle the error and continue.

show message, log error, fallback behavior

So error handling is about:

graceful failure

Using try and catch

Basic idea:

try the code if error happens → catch it

Example:

try {
  console.log(x)
} catch (error) {
  console.log("Something went wrong")
}

Now:

instead of crash → we handle it

How it actually flows

Accessing the error

try {
  console.log(x)
} catch (error) {
  console.log(error.message)
}

error contains details

Useful for debugging.

The finally block

Finally always runs.

No matter what.

Example:

try {
  console.log("Try running")
} catch (err) {
  console.log("Error")
} finally {
  console.log("Always runs")
}

Output:

Try running
Always runs

Even if error happens:

finally still runs

Why finally is useful

Use it for:

• cleanup

• closing resources

• final steps

Try → Catch → Finally flow

Throwing custom errors

Sometimes we want to create our own error.

function checkAge(age) {
  if (age < 18) {
    throw new Error("Age must be 18+")
  }

  console.log("Access granted")
}

try {
  checkAge(16)
} catch (err) {
  console.log(err.message)
}

Here:

we manually throw error

Why throw is useful

• validate data

• enforce rules

• control flow

Real world feel

Instead of app crashing:

we control what happens when something goes wrong

Common pattern

try {
  // risky code
} catch (err) {
  // handle error
} finally {
  // always run
}

Important thing to remember

• try only catches runtime errors

• syntax errors won’t be caught

Errors will happen.

That’s normal.

What matters is how you handle them.

Using try, catch, and finally helps you:

prevent crashes

debug better

build stable apps

const user = new User()

We use it, but many times we don’t really know what it’s doing internally.

It feels like it just creates an object.

But actually, a lot of things are happening behind the scenes.

In this blog I will share how I understand the new keyword and what really happens when we use it.

What the new keyword does

When you use new, JavaScript creates a new object for you.

But not just that.

It also connects things, sets values and returns that object.

So new is doing multiple steps, not just one.

Constructor functions

To use new, we usually have something called a constructor function.

Example:

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

Now we use:

const user1 = new User("Dhiraj", 20)

Here:

User is a constructor --> user1 is an instance

How it actually feels

constructor = blueprint

instance = real object

Object creation step by step

When we do:

const user1 = new User("Dhiraj", 20)

JavaScript does this internally:

Step 1: create empty object

{}

Step 2: set this to that object

Inside function:

this → {}

Step 3: add properties

this.name = "Dhiraj"
this.age = 20

Now object becomes:

{ name: "Dhiraj", age: 20 }

Step 4: link prototype

user1.__proto__ = User.prototype

so it can access shared methods

Step 5: return object

Final result:

user1

Constructor → instance flow

How prototype is linked

function User(name) {
  this.name = name
}

User.prototype.sayHi = function () {
  console.log("Hi " + this.name)
}

const user1 = new User("Dhiraj")
user1.sayHi()

Why this works?

because user1 is linked to User.prototype

So it can access sayHi

Prototype visual idea

Instances created from constructors

const u1 = new User("A")
const u2 = new User("B")

both are different objects

But:

share same prototype

So methods are not duplicated.

Why new is useful

Without new, you would have to manually:

• create object

• assign values

• link prototype

new does all that automatically.

What happens if we don’t use new

const user = User("Dhiraj", 20)

Now:

this = global object

So it can break things.

That’s why new is important here.

Simple way to remember

new does:

create object --> bind this --> link prototype --> return object

Sometimes they behave like magic.

Same syntax, but different use.

Sometimes it spreads values Sometimes it collects values

So what’s actually happening?

In this blog I will share how I understand spread and rest operators and how to use them properly.

What is spread operator

Spread means:

take something and expand it

Example:

const arr = [1, 2, 3]

console.log(...arr)

Output:

1 2 3

array got expanded

Spread with arrays

const arr1 = [1, 2]
const arr2 = [3, 4]

const newArr = [...arr1, ...arr2]

Result:

[1, 2, 3, 4]

combining arrays becomes easy

Spread with objects

const user = { name: "Dhiraj" }
const updatedUser = { ...user, age: 20 }

copies old object + adds new data

Spread idea

Diagram idea:

[1, 2, 3] → 1, 2, 3

(expanding values)

What is rest operator

Rest means:

collect multiple values into one

Example:

function sum(...nums) {
  console.log(nums)
}

sum(1, 2, 3)

Output:

[1, 2, 3]

values collected into array

Rest in arrays

const arr = [1, 2, 3, 4]

const [first, ...rest] = arr

So:

• first = 1

• rest = [2, 3, 4]

Rest idea

Diagram idea:

1, 2, 3, 4 → [1, ...rest]

(rest collects remaining)

Spread vs Rest (main difference)

Both use ... but:

Spread:

expands values

Rest:

collects values

Simple way:

Spread = open

Rest = gather

When to use spread

Use spread when:

• combining arrays

• copying objects

• adding values

Example:

const arr = [1, 2]
const newArr = [...arr, 3]

When to use rest

Use rest when:

• function arguments

• extracting remaining values

• handling unknown number of inputs

Example:

function log(first, ...others) {
  console.log(first)
  console.log(others)
}

Real world feeling

Spread:

breaking things apart

Rest:

grouping things together

Small practical example

const user = {
  name: "Dhiraj",
  age: 20,
  city: "Kolkata"
}

const { name, ...rest } = user

name separate, rest contains remaining data

Spread and rest look same but do opposite things.

Spread expands

Rest collects

Normally we do something like:

const user = {
  name: "Dhiraj",
  age: 20
}

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

Works fine.

But it feels repetitive.

So JavaScript gives us a cleaner way to do this.

That is destructuring.

In this blog I will share how I understand destructuring and how it makes code simpler.

What destructuring means

Destructuring means:

taking values out of an array or object and assigning them to variables

In short:

extract → assign

Destructuring objects

Instead of this:

const user = {
  name: "Dhiraj",
  age: 20
}

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

We can do:

const { name, age } = user

That’s it.

less code, same result

How it actually feels

Object → variables

Important thing

Variable name must match key:

const { name } = user

takes user.name

Destructuring arrays

Arrays work a bit differently.

const arr = [10, 20, 30]

const [a, b, c] = arr

So:

• a = 10

• b = 20

• c = 30

Here it depends on position.

Array mapping idea

Skipping values

const arr = [10, 20, 30]

const [a, , c] = arr

skips middle value

Default values

Sometimes value may not exist.

const user = {
  name: "Dhiraj"
}

const { name, age = 18 } = user

if age not present → use default

Before vs After

Before:

const title = post.title
const author = post.author
const date = post.date

After:

const { title, author, date } = post

cleaner, less repetition

Benefits of destructuring

• reduces repetitive code

• makes code cleaner

• easier to read

• faster to write

Small real example

function greet(user) {
  const { name } = user
  console.log("Hi " + name)
}

Even shorter:

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

Where you will see it a lot

• React props

• API responses

• function parameters

• arrays from functions

Destructuring is just a cleaner way to take values out of arrays and objects.

Once you start using it, going back feels weird.

It doesn’t add new power, just makes things simpler.

includes(), slice(), toUpperCase() we just use them and move on.

But in interviews or real problem solving, you might get asked:

how does this work internally ?

can you implement it yourself ?

That’s where polyfills come in.

In this blog I’ll share how I understand string methods, how they actually work behind the scenes and how to approach them in interviews.

What string methods are

String methods are just functions attached to strings.

"hello".toUpperCase()

Looks simple.

But internally it’s just:

loop over characters --> change something --> return new string

Nothing magical.

How to think about it

Every string method is basically:

input string --> process --> output string

Why developers write polyfills

Polyfill = writing your own version of built in method.

Why?

• to understand how it works

• interview questions

• improve logic building

So it’s less about code, more about thinking.

Important: where methods actually live

All string methods come from:

String.prototype

So when you do:

"hello".includes("he")

it’s actually using String.prototype.includes

So real polyfills are written like:

adding your own method to prototype

Polyfill example (includes)

String.prototype.myIncludes = function (word) {
  const str = this

  for (let i = 0; i <= str.length - word.length; i++) {
    let match = true

    for (let j = 0; j < word.length; j++) {
      if (str[i + j] !== word[j]) {
        match = false
        break
      }
    }

    if (match) return true
  }

  return false
}

Usage:

"hello".myIncludes("he") // true

What’s happening:

we slide over string match character by character

Polyfill example (startsWith)

String.prototype.myStartsWith = function (word) {
  const str = this

  for (let i = 0; i < word.length; i++) {
    if (str[i] !== word[i]) {
      return false
    }
  }

  return true
}

Why this is important here

Inside prototype:

this = the string calling the method

"hello".myIncludes("he")

this = "hello"

Implementing simple string utilities

Most string utilities are just loops.

Reverse string

function reverse(str) {
  let res = ""

  for (let i = str.length - 1; i >= 0; i--) {
    res += str[i]
  }

  return res
}

Check palindrome

function isPalindrome(str) {
  return str === reverse(str)
}

Count characters

function countChars(str) {
  const map = {}

  for (let char of str) {
    map[char] = (map[char] || 0) + 1
  }

  return map
}

Common interview mindset

When interviewer asks:

“implement includes / slice / reverse”

They are checking:

• can you break problem

• can you use loops

• can you think step by step

Not memorization.

Polyfill behavior

Importance of understanding built in behavior

If you only use methods:

you know usage

If you understand internals:

you know control

That helps in:

• interviews

• debugging

• writing custom logic

One important note

In real projects:

don’t modify String.prototype

But for:

learning, interviews

this is exactly what you should do.

String methods are simple once you break them.

They are just loops + conditions.

Polyfills help you see that clearly.

Objects for key value data, Arrays for lists

But sometimes these are not enough.

Like:

• you want keys that are not just strings

• you want to store unique values only

• you want better control over data

That’s where Map and Set come into the picture.

In this blog I will share how I understand Map and Set and when I actually use them.

Problem with objects and arrays

Before jumping into Map and Set, let’s see the problem.

Objects problem

const obj = {}

obj[1] = "one"
obj["1"] = "string one"

console.log(obj)

Output:

{ '1': 'string one' }

Here:

number 1 and string "1" become same key

So object forces keys to be strings.

Arrays problem

const arr = [1, 2, 2, 3]

Here:

duplicates are allowed

Sometimes we don’t want that.

What is Map

Map is like an object but better.

It stores data in key value pairs, but:

keys can be anything (number, string, object, function)

Example:

const map = new Map()

map.set(1, "one")
map.set("1", "string one")

console.log(map)

Map(1) { 1 => 'one' }
Map(2) { 1 => 'one', '1' => 'string one' }

Here both keys are different.

So:

Map does not convert keys to string

How Map feels

Think like:

Map = advanced key value storage

Getting values from Map

map.get(1)       // "one"
map.get("1")     // "string one"

Map key value visual

What is Set

Set is used to store only unique values.

That’s its main job.

Example:

const set = new Set([1, 2, 2, 3])

console.log(set)

Output:

{1, 2, 3}

duplicates automatically removed

How Set feels

Set = unique collection

No duplicates allowed

Adding values in Set

const set = new Set()

set.add(1)
set.add(2)
set.add(2)

console.log(set)

Still:

{1, 2}

Set visual

Map vs Object

Both store key value, but:

Object:

• keys become string

• limited flexibility

Map:

• keys can be anything

• keeps original type

• better for dynamic data

Simple line:

Object = basic

Map = flexible

Set vs Array

Array:

• allows duplicates

• used for ordered list

Set:

• only unique values

• removes duplicates automatically

Simple line:

Array = list

Set = unique list

When to use Map

Use Map when:

• keys are not just strings

• you need key value structure

• keys can be objects or numbers

• you want more control than object

Example use case:

const user1 = { name: "A" }
const user2 = { name: "B" }

const map = new Map()

map.set(user1, "data1")
map.set(user2, "data2")

When to use Set

Use Set when:

• you want unique values

• removing duplicates

• checking if value already exists

Example:

const nums = [1, 2, 2, 3]

const unique = new Set(nums)

console.log([...unique])

Map and Set are not used everywhere, but when needed, they make things much cleaner.

Map solves key limitations of objects

Set solves duplicate problems of arrays

Then suddenly we see this.

And things start getting confusing.

Sometimes it works, sometimes it doesn’t. Same code, different output.

So what actually is this?

In this blog I will share how I understand this and why it behaves differently in different places.

What this actually represents

The easiest way to think about this is:

this means who is calling this function

Not where the function is written Not where it is defined

But who is calling it

That’s the whole game.

this in global context

If you use this outside any function:

console.log(this)

In browser, this points to:

window

So here:

this === window // true

So global level → this = global object

this inside an object

Now the interesting part.

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

user.greet()

Output:

Dhiraj

Why?

Because:

user is calling greet()

So:

this = user

Simple.

this inside a normal function

Now this is where confusion starts.

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

show()

Here:

No object is calling this function

So in browser:

this = window

Because it falls back to global object.

Same function, different caller

Now see this carefully:

const obj1 = {
  name: "A",
  show() {
    console.log(this.name)
  }
}

const obj2 = {
  name: "B",
  show: obj1.show
}

obj1.show() // ?
obj2.show() // ?

Output:

A
B

Same function.

Different output.

Why?

Because caller changed

So:

• obj1.show() → this = obj1

• obj2.show() → this = obj2

This proves:

this depends on caller, not function

Calling context changes everything

Let’s break it more.

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

const fn = user.greet
fn()

Output:

undefined

Why?

Because now:

function is called directly no object is calling it

So:

this = window window.name is undefined

That’s why output is undefined

Simple way to remember

Just ask:

Who is calling this function?

That’s your this.

One more simple example

const car = {
  brand: "BMW",
  show() {
    console.log(this.brand)
  }
}

car.show()

car is calling → this = car

Where people get confused

Main confusion happens when:

• function is detached from object

• function is passed somewhere

• function is called without object

Because then:

this changes

this is not complicated.

We just overthink it.

Just remember one line:

this = who is calling the function

But in real world apps, things are not always instant.

Sometimes you are fetching data from an API, reading a file or waiting for some operation to finish. These things take time. JavaScript doesn’t want to stop everything and wait for that.

So how does it handle this?

That’s where callbacks come into the picture.

In this blog I will share how I understand callbacks, why they exist and where they are actually used.

Functions as values

Before callbacks, we need to understand one simple thing.

In JavaScript, functions are just values.

That means you can:

• store them in variables

• pass them to other functions

• return them from functions

Example:

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

function greet(fn) {
  fn()
}

greet(sayHello)

Here we are passing a function inside another function.

So this is the base of callbacks.

What is a callback function

A callback is just a function that you pass into another function so it can be called later.

That’s it.

Example:

function greet(name, callback) {
  console.log("Hi " + name)
  callback()
}

function sayBye() {
  console.log("Bye")
}

greet("Dhiraj", sayBye)

Here:

• sayBye is passed as a callback

• greet decides when to call it

So callback means:

“I’ll give you this function, you call it when needed”

Why callbacks exist

Now the important part.

Why do we even need callbacks?

Because some tasks take time.

Example:

• fetching data from server

• reading files

• timers

• database queries

JavaScript is single threaded, so it cannot block everything and wait.

Instead, it says:

“Start this task and when it finishes, call this function”

That function is the callback.

Simple async example

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

console.log("This runs first")

Output:

This runs first
This runs later

Here:

• setTimeout takes a function

• runs it after 2 seconds

That function is a callback.

So flow becomes:

You give a function → JS runs it later

Callback in real use

Let’s say you are fetching data:

function getData(callback) {
  setTimeout(() => {
    console.log("Data received")
    callback()
  }, 2000)
}

getData(() => {
  console.log("Process data")
})

Here:

• first data comes

• then callback runs

So instead of waiting, we say:

“When data is ready, then do this”

How it actually flows

Passing functions as arguments

This is the main thing behind callbacks.

function doSomething(fn) {
  console.log("Doing something")
  fn()
}

doSomething(() => {
  console.log("Callback called")
})

So:

• function goes inside another function

• gets executed when needed

Where you actually see callbacks

You already use callbacks without noticing:

• setTimeout

• event listeners

• API calls (older style)

• array methods like map, filter

Example:

[1, 2, 3].map((num) => num * 2)

That function inside map is also a callback.

The problem with callbacks

Callbacks solve async problem, but they create another problem.

When things get complex, callbacks start going inside callbacks.

Example:

setTimeout(() => {
  console.log("Step 1")

  setTimeout(() => {
    console.log("Step 2")

    setTimeout(() => {
      console.log("Step 3")
    }, 1000)

  }, 1000)

}, 1000)

Now it starts going right → right → right

This is called:

callback nesting or callback hell

Hard to read Hard to debug Hard to maintain

Why this becomes a problem

Because:

• code becomes deeply nested

• flow is hard to understand

• error handling becomes messy

So while callbacks solve async, they introduce complexity.

That’s why later:

Promises came, async/await came

(but that’s for another blog here you can read)

Nested callback flow

Callbacks are simple.

Just functions passed into other functions.

But they exist for a very important reason to handle things that don’t happen instantly

Instead, we get nested arrays.

That means arrays inside arrays.

Example:

const arr = [1, [2, 3], [4, [5, 6]]]

Now this is not a simple array anymore.

It has multiple levels.

So if we want all values in a single list, we need to flatten it.

What are Nested Arrays

A nested array is just an array that contains another array inside it.

Example:

const arr = [1, [2, 3], 4]

Structure looks like:

More complex example:

[1, [2, [3, [4]]]]

Here we have multiple levels.

Why Flattening is Useful

In real programs, nested arrays can make things harder.

For example:

• looping becomes complex

• accessing values is difficult

• data processing becomes messy

Sometimes we just want:

[1, 2, 3, 4, 5, 6]

instead of:

[1, [2, 3], [4, [5, 6]]]

So flattening makes the data easier to work with.

Concept of Flattening

Flattening means:

We remove all nesting and bring everything to a single level.

Flatten Transformation

Approach 1: Using flat()

JavaScript already gives a method called flat().

const arr = [1, [2, 3], [4, [5, 6]]]

const flatArr = arr.flat(2)

console.log(flatArr)

Output:

[1, 2, 3, 4, 5, 6]

Here 2 means how deep we want to flatten.

Approach 2: Using Infinity

If we don’t know the depth, we can use:

const flatArr = arr.flat(Infinity)

This will flatten everything.

Approach 3: Using Recursion

Sometimes in interviews, they expect you to write your own logic.

So let’s think step by step.

We go through each element:

• if it is a number → push it

• if it is an array → go inside it

Example:

function flatten(arr) {
  let result = []

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

  return result
}

const arr = [1, [2, 3], [4, [5, 6]]]

console.log(flatten(arr))

Output:

[1, 2, 3, 4, 5, 6]

How to Think About It

The idea is simple:

If value is array --> go deeper  
If value is normal --> collect it

This thinking works for any depth.

Nested arrays are common in real world data.

Flattening helps simplify the structure and makes it easier to work with.

JavaScript provides flat() for quick use, but knowing how to solve it manually helps in interviews and deeper understanding.

For example showing a user’s name, building messages or printing values.

Before template literals, we used string concatenation.

But that can get messy very quickly.

Let’s see why.

Problem with Traditional String Concatenation

Suppose we want to print a message like this:

const name = "Bruce"
const age = 35

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

console.log(message)

Output:

My name is Bruce and I am 35 years old

This works, but notice:

• lots of +

• harder to read

• messy when string becomes longer

Now imagine doing this in bigger strings. It becomes difficult to manage.

Template Literal Syntax

To solve this problem, JavaScript introduced template literals.

Instead of using quotes (" or '), we use backticks (`).

Example:

const name = "Bruce"
const age = 35

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

console.log(message)

Much cleaner and easier to read.

Embedding Variables

Inside template literals, we can directly insert variables using:

${variable}

Example:

const hero = "Batman"

console.log(`I am ${hero}`)

Output:

I am Batman

No need for + anymore.

Multi line Strings

Another big advantage is multi line strings.

With normal strings:

const text = "Hello\nWorld"

With template literals:

const text = `Hello
World`

console.log(text)

Output:

Hello
World

No need for \n, it works naturally.

Before vs After

Before (concatenation):

const name = "Clark"

const msg = "Hello " + name + ", welcome to Metropolis"

After (template literal):

const name = "Clark"

const msg = `Hello ${name}, welcome to Metropolis`

Cleaner and easier to understand.

Visual Idea

Diagram idea: Before vs After

"Hello " + name + "!"   →   `Hello ${name}!`

Use Cases in Modern JavaScript

Template literals are used everywhere in modern JavaScript.

For example:

Dynamic messages

const score = 95

console.log(`Your score is ${score}`)

Building HTML (frontend)

const name = "Diana"

const html = `<h1>Hello ${name}</h1>`

Logging values

const item = "Laptop"
const price = 50000

console.log(`Item: \({item}, Price: \){price}`)

Why Template Literals Are Better

• More readable

• Less messy

• Easy to write multi line strings

• No need for + everywhere

Template literals make working with strings much simpler.

Instead of joining strings manually, we can directly embed values inside them.

That works fine in the beginning.

But as the project grows, we start adding more functions, more logic and more features.

Slowly, one file becomes very big and difficult to manage.

function add(a, b) { return a + b }
function multiply(a, b) { return a * b }
function divide(a, b) { return a / b }
// many more functions...

Now everything is mixed in one place.

It becomes harder to:

• find code

• reuse code

• maintain code

This is where modules come in.

Why Modules Are Needed

Modules help us split code into multiple files.

Each file can handle a specific responsibility.

For example:

Instead of writing everything in one file, we organize code into smaller pieces.

This makes the code easier to read and manage.

Exporting Code

To use code from one file in another, we need to export it.

Example: math.js

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

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

Here we are exporting two functions.

Now these functions can be used in other files.

Importing Code

To use exported functions, we import them.

Example: app.js

import { add, multiply } from "./math.js"

console.log(add(2, 3))
console.log(multiply(4, 5))

Now app.js can use functions defined in math.js.

Default vs Named Exports

There are two ways to export things.

Named Export

This is what we saw earlier.

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

Importing:

import { add } from "./math.js"

We must use the same name while importing.

Default Export

A file can also have one default export.

export default function subtract(a, b) {
  return a - b
}

Importing:

import subtract from "./math.js"

Here we can use any name while importing.

Module Flow

Data flows from one file to another using import/export.

Benefits of Modular Code

Using modules improves code in many ways.

Better organization Code is split into smaller files.

Reusability Functions can be reused in different files.

Maintainability Changes in one module don’t affect everything.

Readability Each file has a clear purpose.

Small Example

math.js

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

app.js

import { square } from "./math.js"

console.log(square(5))

Output

25

As applications grow, keeping everything in one file becomes difficult.

Modules help us break code into smaller, manageable pieces.

Using export and import, we can share code between files and build better structured applications.

To organize code better, programming languages provide a concept called Object-Oriented Programming, often called OOP.

The idea behind OOP is simple: instead of thinking only about functions, we think about objects that contain both data and behavior.

JavaScript also supports this programming style.

Let’s understand it using an example from Formula 1.

A Real-World Analogy

Think about how an F1 team designs a car.

Before building the car, engineers create a blueprint.

The blueprint defines things like:

• team

• driver

• engine

• top speed

But the blueprint itself is not a car.

From that blueprint, the team can build multiple cars.

Example:

Blueprint → Race Cars

Ferrari Car
Mercedes Car
Red Bull Car

Each car follows the same design but has different drivers or setups.

In programming:

• Blueprint = Class

• Car created from blueprint = Object

What is a Class in JavaScript

In JavaScript, a class is a template used to create objects.

It defines what properties and methods objects should have.

Example:

class F1Car {

}

This class defines the structure for creating F1 car objects.

Constructor Method

Usually we want each car to have specific data.

For example:

• team

• driver

Inside a class we initialize this data using a constructor.

class F1Car {

  constructor(team, driver) {
    this.team = team
    this.driver = driver
  }

}

The constructor runs automatically when a new object is created.

Creating Objects

Now we can create different cars from the same blueprint.

const ferrari = new F1Car("Ferrari", "Charles Leclerc")
const mercedes = new F1Car("Mercedes", "George Russell")
const redBull = new F1Car("Red Bull", "Max Verstappen")

Each object stores its own data.

Example:

ferrari → Ferrari, Charles Leclerc
mercedes → Mercedes, George Russell
redBull → Red Bull, Max Verstappen

Methods Inside a Class

Classes can also contain methods.

Methods are simply functions that belong to the class.

Example:

class F1Car {

  constructor(team, driver) {
    this.team = team
    this.driver = driver
  }

  carInfo() {
    console.log(`\({this.driver} drives for \){this.team}`)
  }

}

Now every object can use this method.

const ferrari = new F1Car("Ferrari", "Charles Leclerc")
const mclaren = new F1Car("McLaren", "Lando Norris")

ferrari.carInfo()
mclaren.carInfo()

Output:

Charles Leclerc drives for Ferrari
Lando Norris drives for McLaren

Basic Idea of Encapsulation

One important concept in OOP is encapsulation.

Encapsulation means keeping data and behavior together inside a single structure.

In our example:

Data

team
driver

Behavior

carInfo()

Both live inside the F1Car class, which keeps the code organized.

Why OOP is Useful

Object-Oriented Programming helps with:

Code organization
Related data and logic stay together.

Code reusability
One class can create many objects.

Better structure
Programs become easier to maintain.

Example Summary

class F1Car {

  constructor(team, driver) {
    this.team = team
    this.driver = driver
  }

  carInfo() {
    console.log(`\({this.driver} drives for \){this.team}`)
  }

}

const ferrari = new F1Car("Ferrari", "Charles Leclerc")
const mercedes = new F1Car("Mercedes", "Kimi Antonelli")

ferrari.carInfo()
mercedes.carInfo()

Object-Oriented Programming helps structure code in a way that models real-world systems.

By using classes and objects, we can create reusable blueprints and generate multiple objects from them.

In JavaScript, classes make it easier to build structured applications just like creating multiple F1 cars from a single design blueprint.

For example imagine we want to store details about a person like their name, age and city.

We could store them in separate variables, but that quickly becomes messy.

const name = "Bruce Wayne"
const age = 35
const city = "Gotham"

These values belong together, but they are scattered.

To organize related data in a better way, JavaScript provides objects.

An object lets us store multiple values inside a single structure.

You can think of an object as a collection of key value pairs.

What an Object Looks Like

Here is a simple example.

const hero = {
  name: "Bruce Wayne",
  heroName: "Batman",
  city: "Gotham"
}

Here:

• name, heroName, and city are keys

• "Bruce Wayne", "Batman", "Gotham" are values

So the object stores information like this:

name → Bruce Wayne
heroName → Batman
city → Gotham

Creating Objects

Objects are created using curly braces {}.

Example:

const hero = {
  name: "Clark Kent",
  heroName: "Superman",
  city: "Metropolis"
}

Each property is written as:

key: value

Accessing Object Properties

There are two ways to access values inside an object.

Dot Notation

This is the most common way.

console.log(hero.name)
console.log(hero.heroName)

Output

Clark Kent
Superman

Bracket Notation

Another way is using square brackets.

console.log(hero["city"])

Output

Metropolis

Both ways work the same, but bracket notation can be useful when property names are dynamic.

Updating Object Properties

We can update values inside an object easily.

hero.city = "Smallville"

console.log(hero.city)

Output

Smallville

The value simply changes.

Adding New Properties

Objects are flexible, so we can add new properties anytime.

hero.power = "Flight"

console.log(hero)

Now the object contains a new property.

Deleting Properties

If we want to remove a property, we can use the delete keyword.

delete hero.city

console.log(hero)

The city property will be removed from the object.

Looping Through Object Keys

Sometimes we want to go through all properties inside an object.

JavaScript provides a simple loop for this.

for (const key in hero) {
  console.log(key, hero[key])
}

Example output

name Clark Kent
heroName Superman
power Flight

The loop goes through every key and prints the value.

Array vs Object

Sometimes beginners confuse arrays and objects.

Arrays store values using index numbers.

Example:

const heroes = ["Batman", "Superman", "Wonder Woman"]

Accessing array values:

heroes[0]
heroes[1]

Objects store values using keys instead of indexes.

Example:

const hero = {
  name: "Diana Prince",
  heroName: "Wonder Woman"
}

Accessing object values:

hero.name
hero.heroName

Array vs Object

Array
["Batman", "Superman", "Wonder Woman"]
   0          1           2

Object
name → Diana Prince
heroName → Wonder Woman

Example: Student Object

Let’s create an object representing a student.

const student = {
  name: "Barry Allen",
  age: 24,
  course: "Forensic Science"
}

Update a property.

student.age = 25

Now print all keys and values.

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

Output

name Barry Allen
age 25
course Forensic Science

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

They allow us to group related information together using key value pairs.

With objects we can store data, update values, add new properties, delete properties and loop through them easily.

For example calculating a number, returning a value or transforming data.

To make function writing simpler and cleaner, JavaScript introduced arrow functions in ES6.

Arrow functions provide a shorter syntax for writing functions and are widely used in modern JavaScript.

Let’s understand how they work.

Normal Function Example

First let’s start with a normal function.

Suppose we want a function that calculates the square of a number.

function square(num) {
  return num * num
}

console.log(square(4))

Output

16

This works perfectly fine.

But for very small functions, this syntax can feel a bit verbose.

Arrow functions provide a simpler way.

Arrow Function Syntax

The same function written using an arrow function looks like this.

const square = (num) => {
  return num * num
}

console.log(square(4))

The arrow => replaces the function keyword.

So instead of writing function, we write an arrow.

Arrow Function with One Parameter

If the function has only one parameter, we can even remove the parentheses.

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

console.log(square(5))

This is very common in modern JavaScript.

Arrow Function with Multiple Parameters

If the function has multiple parameters, we keep the parentheses.

Example:

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

console.log(add(3, 7))

Here both parameters go inside the parentheses.

Implicit Return vs Explicit Return

Arrow functions have a useful feature called implicit return.

If the function body contains only one expression, JavaScript automatically returns the result.

Normal arrow function:

const square = (num) => {
  return num * num
}

Implicit return version:

const square = num => num * num

Here we removed:

• curly braces

• return keyword

JavaScript automatically returns the result.

This makes arrow functions very concise.

Even or Odd Example

Here is a small example that checks if a number is even.

const isEven = num => num % 2 === 0

console.log(isEven(6))

Output

true

Arrow Functions with Arrays

Arrow functions are often used with array methods like map(), filter(), and reduce().

Example using map().

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

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

console.log(squares)

Output

[1, 4, 9, 16]

Here the arrow function makes the code much shorter and easier to read.

Basic Difference from Normal Functions

Arrow functions and normal functions both create functions, but they are used slightly differently.

Normal functions are commonly used for defining main logic.

Arrow functions are often used for:

• short utility functions

• callbacks

• array transformations

One important difference is how they handle this, but that is a deeper topic and we don’t need to go into it right now.

Syntax Breakdown

Arrow functions provide a shorter and cleaner way to write functions in JavaScript.

They reduce boilerplate code and make small functions easier to read.

Because of this, arrow functions are widely used in modern JavaScript, especially when working with arrays, callbacks and functional patterns.

Normal functions are still important, but arrow functions make many everyday tasks much simpler.

But if you think about it for a second, JavaScript originally runs inside the browser. Browsers provide many APIs that JavaScript can use.

So you might wonder:

Does JavaScript itself have all these powers?

Not really.

Inside Node.js there are multiple libraries and components working together that provide these capabilities.

Node.js mainly relies on three important parts:

• V8

• JS Bindings (C++ layer)

• libuv

These pieces work together to allow JavaScript to interact with the system.

V8 (JavaScript Engine)

Node.js runs on V8, which is a JavaScript engine developed by Google.

V8 is responsible for executing JavaScript code.

It does several important things:

• Parses JavaScript

• Compiles JavaScript to machine code (JIT compilation)

• Manages memory (heap and garbage collection)

• Maintains the call stack

So when you run a Node.js program like this:

console.log("Hello Node")

V8 is the component that reads and executes this JavaScript code.

The Limitation of V8

Even though V8 is very powerful, it cannot perform system operations by itself.

For example V8 cannot directly:

• read files

• open network sockets

• perform DNS lookups

• interact with the operating system

So something else is needed to handle these tasks.

This is where Node.js bindings and libuv come in.

JS Bindings (C++ Layer)

Node.js is written mainly in C++ and it exposes many system capabilities to JavaScript through a layer called JS bindings.

This layer works like a bridge between JavaScript and native system code.

When you write JavaScript like this:

const fs = require("fs")

fs.readFile("data.txt", () => {
  console.log("file read")
})

The fs module is not pure JavaScript.

Behind the scenes it connects to C++ code inside Node.js.

So JS bindings do two main things:

• expose system functionality as JavaScript APIs

• convert JavaScript calls into C/C++ calls

You can think of it like a translator between JavaScript and the lower level system code.

libuv (Async I/O Engine)

Now we reach one of the most important parts of Node.js: libuv.

libuv is a large C++ library that handles many of Node.js asynchronous operations.

JavaScript itself is single threaded, meaning it executes one thing at a time.

But Node.js still manages to handle thousands of operations concurrently. This is possible because of libuv.

libuv provides:

• Event loop

• Non-blocking I/O

• Thread pool

• File system operations

• Networking

• DNS operations

• Child processes

For example when you run something like:

const fs = require("fs")

fs.readFile("file.txt", () => {
  console.log("done")
})

The file reading work is handled by libuv, not V8.

libuv processes the operation asynchronously and notifies Node.js when the task is completed.

This is why Node.js can remain fast and handle many requests at the same time.

Full Node.js Architecture

So when you run a Node.js application, these components work together like this:

1. V8 executes JavaScript

2. JS bindings connect JavaScript to native APIs

3. libuv performs asynchronous I/O operations

In simple terms:

JavaScript code runs in V8, Node’s C++ bindings translate JavaScript calls into native operations and libuv interacts with the operating system to perform tasks like networking and file handling.

Diagram idea:

JavaScript Application
        ↓
       V8
(JavaScript Engine)
        ↓
   Node C++ Bindings
        ↓
      libuv
(Event Loop, Thread Pool)
        ↓
   Operating System

Node.js looks simple from the outside because we write JavaScript.

But internally there are multiple layers working together to make everything possible.

• V8 executes JavaScript

• JS bindings connect JavaScript to native code

• libuv handles asynchronous operations and the event loop

Understanding these components gives a clearer picture of how Node.js works under the hood.

For example imagine we need to add two numbers in different parts of a program.

Instead of writing the same code multiple times, we can create a function and reuse it whenever we need it.

Functions are reusable blocks of code that perform a specific task.

Example:

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

console.log(add(2, 3))

Output:

5

Here the function performs the addition and we can call it anytime we need.

We can create functions in many ways in JavaScript, but in this blog we will focus on these two ways:

• Function Declaration

• Function Expression

Let’s understand both.

Function Declaration

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

Example:

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

console.log(multiply(4, 5))

Output:

20

Here we created a function named multiply.

The function is declared using the function keyword and can be called normally in the program.

Function Expression

A function expression is slightly different.

Here the function is stored inside a variable.

Example:

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

console.log(multiply(4, 5))

Output:

20

The function still performs the same task.

The difference is that instead of declaring it directly, we assign the function to a variable.

So the variable now holds the function.

Side by Side Comparison

Function Declaration:

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

Function Expression:

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

Both create functions and both work in almost the same way when we call them.

But there is one important difference between them.

Hoisting

In JavaScript, before the code runs, the engine prepares some things in memory. This behavior is commonly referred to as hoisting.

At a very high level, this means some declarations become available earlier than where they appear in the code.

Function declarations follow this behavior.

Example:

console.log(add(2,3))

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

Even though the function appears later in the code, the program still runs.

Now look at a function expression:

console.log(add(2,3))

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

This will cause an error.

That happens because the variable that holds the function is not ready yet at that point.

So the simple idea is:

Function Declaration → can be called earlier in the code
Function Expression → cannot be called before it is defined

No need to go deep into how JavaScript internally handles this. Just remembering this behavior is enough for now.

When to Use Each Type

Both styles are used a lot in JavaScript.

Function declarations are commonly used when the function represents a main piece of logic in the program.

Function expressions are useful when functions need to be stored in variables, passed around or used inside other functions.

You will see function expressions very often when working with callbacks and modern JavaScript patterns.

Example

Function declaration that multiplies two numbers:

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

console.log(multiply(3, 4))

The same logic using a function expression:

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

console.log(multiplyExp(3, 4))

If you try calling these before their definitions, you will notice something interesting.

Function declarations still work, but function expressions will throw an error.

That small behavior difference is what usually separates these two ways of creating functions.

Sometimes the program needs to make decisions.

Think about a game.

• If a player has enough health, they continue playing.

• If the health reaches zero, the game is over.

• If the player collects a special item, they unlock a new ability.

The game constantly checks conditions and decides what should happen next.

This decision making is called control flow.

Control flow controls which part of the program runs based on conditions.

In JavaScript we mainly use:

• if

• if-else

• else if

• switch

Let’s understand them using simple game examples.

The if Statement

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

Imagine a player trying to enter a special level that requires at least 100 coins.

let coins = 120

if (coins >= 100) {
  console.log("Level unlocked")
}

Output:

Level unlocked

If the player has enough coins, the level unlocks.

If not, nothing happens.

The if-else Statement

Sometimes we want two possible outcomes.

Example: checking player health.

let health = 0

if (health > 0) {
  console.log("Player is still alive")
} else {
  console.log("Game Over")
}

Output:

Game Over

Here the game checks the condition.

If true → player continues
If false → game ends

The else if Ladder

Games often have multiple conditions.

Example: assigning player rank based on score.

let score = 850

if (score >= 1000) {
  console.log("Legend Rank")
}
else if (score >= 800) {
  console.log("Diamond Rank")
}
else if (score >= 500) {
  console.log("Gold Rank")
}
else {
  console.log("Bronze Rank")
}

Output:

Diamond Rank

The program checks conditions from top to bottom.

As soon as one condition is true, the rest are skipped.

The switch Statement

Sometimes we check specific values instead of ranges.

Example: choosing a character class in a game.

let character = "mage"

switch (character) {
  case "warrior":
    console.log("Strong attack and high defense")
    break

  case "mage":
    console.log("Powerful magic abilities")
    break

  case "archer":
    console.log("Long range attacks")
    break

  default:
    console.log("Unknown character")
}

Output:

Powerful magic abilities

The break statement stops execution once a match is found.

Without break, the next cases would also run.

When to Use switch vs if-else

Both structures help us make decisions.

Use if-else when checking conditions or ranges.

Example:

score >= 800
health > 0
coins >= 100

Use switch when checking specific values.

Example:

character type
weapon type
game difficulty

Examples

Check if a player's score is positive, negative or zero.

let score = -10

if (score > 0) {
  console.log("Positive score")
}
else if (score < 0) {
  console.log("Negative score")
}
else {
  console.log("Score is zero")
}

Now choose a game difficulty using switch.

let difficulty = "hard"

switch (difficulty) {
  case "easy":
    console.log("Enemies are weaker")
    break

  case "medium":
    console.log("Balanced difficulty")
    break

  case "hard":
    console.log("Enemies are stronger")
    break

  default:
    console.log("Unknown difficulty")
}

In the first example we used if-else because we are checking conditions.

In the second example we used switch because we are checking specific values.

Control flow is one of the most important concepts in programming.

It allows programs to react to different situations.

For example:

• change values

• remove unwanted values

• calculate totals

JavaScript gives us built in methods to do these tasks easily.

Some of the most useful array methods are:

• map()

• filter()

• reduce()

Let’s understand them one by one.

map()

map() is used when we want to transform every value in an array.

It goes through each element and returns a new array with the updated values.

Example array:

const numbers = [2, 4, 6, 8]

Suppose we want to double each number.

Using a traditional loop

const numbers = [2, 4, 6, 8]

const doubled = []

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

console.log(doubled)

Output:

[4, 8, 12, 16]

Now let’s do the same thing using map().

Using map()

const numbers = [2, 4, 6, 8]

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

console.log(doubled)

Output:

[4, 8, 12, 16]

Original array stays the same:

console.log(numbers)

[2, 4, 6, 8]

map() creates a new array instead of modifying the original one.

filter()

Sometimes we only want some values from an array.

That is where filter() helps.

It returns a new array containing only the values that match a condition.

Example array:

const numbers = [5, 12, 8, 20, 3]

Suppose we want numbers greater than 10.

Using a loop

const numbers = [5, 12, 8, 20, 3]

const result = []

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    result.push(numbers[i])
  }
}

console.log(result)

Output:

[12, 20]

Now using filter().

Using filter()

const numbers = [5, 12, 8, 20, 3]

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

console.log(result)

Output:

[12, 20]

Again, the original array remains unchanged.

reduce()

reduce() is used when we want to combine all values into a single result.

Common examples:

• calculating totals

• counting items

• combining values

Example array:

const numbers = [10, 20, 30, 40]

Suppose we want the total sum.

Using a loop

const numbers = [10, 20, 30, 40]

let total = 0

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

console.log(total)

Output:

100

Now using reduce().

Using reduce()

const numbers = [10, 20, 30, 40]

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

console.log(total)

Output:

100

How it works:

1. Start with sum = 0

2. Add each number

3. Return the final value

Try These Examples Yourself

Create an array of numbers.

const numbers = [5, 10, 15, 20]

Double every number using map().

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

console.log(doubled)

Get numbers greater than 10 using filter().

const greater = numbers.filter(function(num) {
  return num > 10
})

console.log(greater)

Calculate the total sum using reduce().

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

console.log(total)

Try running these examples in your browser console.

Array methods make working with data much easier.

Instead of writing long loops, we can use built in methods like:

• map() to transform values

• filter() to select values

• reduce() to combine values