DEV Community: Sakshi Tambole

Callbacks in JavaScript: Why They Exist

Sakshi Tambole — Mon, 20 Apr 2026 08:53:11 +0000

JavaScript is a language where functions are treated like values. This means you can store them in variables, pass them to other functions, and return them from functions. This ability is what makes callbacks possible.

Callbacks are one of the most important concepts in JavaScript, especially when dealing with asynchronous programming like API calls, timers, and event handling.

Functions as Values in JavaScript

In JavaScript, functions are first-class citizens, which means they can be used just like any other variable.

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

const sayHello = greet;
sayHello();

Here, the function greet is assigned to sayHello, and then called using the new variable.

functions as arguments to other functions.

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

function sayBye() {
    console.log("Goodbye!");
}

greetUser("Sakshi", sayBye);


Output:
Hi Sakshi
Goodbye!

In this example, sayBye is passed into greetUser as an argument. This passed function is called a callback function.

What is a Callback Function is

A callback function is a function that is passed as an argument to another function and is executed later.

It “calls back” after the main function finishes its work.

Example:

function processData(callback) {
    console.log("Processing data...");
    callback();
}

processData(function() {
    console.log("Data processed successfully!");
});

Output:
Processing data...
Data processed successfully!

processData() starts running
It prints "Processing data..."
Then it executes the callback function

Why Callbacks Exist

Callbacks exist because sometimes JavaScript needs to wait for a task to complete before running the next step.

Examples:

Fetching data from a server
Waiting for a user click
Reading a file
Running a timer

Why callbacks are used in asynchronous programming

JavaScript runs in a single thread, meaning it executes one task at a time.

console.log("Start");

setTimeout(function() {
    console.log("Done after 2 seconds");
}, 2000);

console.log("End");

Output:
Start
End
Done after 2 seconds

Even though setTimeout() appears in the middle, JavaScript does not wait 2 seconds.

Instead:

"Start" is printed
Timer begins in the background
"End" is printed immediately
After 2 seconds, callback runs

This is asynchronous behavior.

Without callbacks, JavaScript would have to pause execution until the task complete.

Callbacks allow JavaScript to remain fast and non-blocking.

Passing functions as arguments

Callbacks rely on the ability to pass functions as arguments.

function calculator(a, b, operation) {
    operation(a, b);
}

function add(x, y) {
    console.log(x + y);
}

calculator(5, 3, add);


Output:
8

calculator() receives numbers and a function
add() is passed as the callback
calculator() runs the callback with the numbers

This pattern is widely used in JavaScript.

Callback usage in common scenarios

Callbacks are commonly used in real-world JavaScript.

Event Handling

When a button is clicked, a callback runs.

button.addEventListener("click", function() {
    console.log("Button clicked!");
});

The click event may happen later, so JavaScript stores the callback until needed.

Timers

setTimeout(function() {
    console.log("Executed later");
}, 1000);

The callback executes after 1 second.

Array Methods

Functions like forEach() use callbacks.

const numbers = [1, 2, 3];

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

Output:
1
2
3

The callback runs once for each array element.

The Basic Problem of Callback Nesting

Callbacks are useful, but when multiple asynchronous tasks depend on each other, callbacks can become deeply nested.

loginUser(function(user) {
    getProfile(user, function(profile) {
        getPosts(profile, function(posts) {
            console.log(posts);
        });
    });
});

This structure keeps growing inward.

This is called callback nesting or callback hell.

Problems include:

Hard to read
Difficult to debug
Difficult to maintain
Error handling becomes messy

This pyramid shape is often called the “Pyramid of Doom.”

Explain callback problems conceptually

Imagine:

Login user
Get profile
Get posts
Display posts Each step waits for the previous one. That creates nested callbacks:

step1(function() {
    step2(function() {
        step3(function() {
            step4(function() {
                console.log("Done");
            });
        });
    });
});

The more steps you add, the harder the code becomes to manage.

This is why JavaScript introduced Promises and async/await to improve asynchronous code readability.

Function Calling Another Function Flow

Main Function
     |
     v
 Executes Callback
     |
     v
 Callback Function Runs

Nested Callback Execution Flow

Task 1
  |
  --> Task 2
         |
         --> Task 3
                |
                --> Task 4

Or visually:

step1(
   step2(
      step3(
         step4()
      )
   )
)

Template Literals in JavaScript

Sakshi Tambole — Fri, 17 Apr 2026 15:18:30 +0000

Modern JavaScript has introduced several features that improve code readability and developer experience. One such powerful feature is template literals, which provide a cleaner and more expressive way to work with strings.
The primary goal of template literals, introduced in ES6 (2015), was to solve the readability and maintenance issues of traditional string concatenation. They transformed JavaScript strings from simple text containers into a robust engine for dynamic content generation.

Problems with traditional string concatenation

Before template literals, developers used the + operator to combine strings and variables.

const name = "John";
const age = 25;

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

Output: My name is John and I am 25 years old.

Issues:

Hard to read for long or complex strings.
Error-prone with missing spaces or quotes.
Difficult to manage multi-line strings.
Becomes messy when embedding expressions.

What Are Template Literals?

Template literals are a modern way to handle strings in JavaScript, introduced in ES6. They use backticks (`) instead of quotes and allow embedded expressions.

javascript let message =My name is ${name} and I am ${age} years old.`;

Template literal syntax

Template literals are a modern way to work with strings in JavaScript. They use backticks (`) instead of single (') or double (") quotes and provide powerful features like interpolation and multi-line support.

Basic Syntax:

`String text ${expression} more text`

Example:

let message = `Hello World`;

Embedding variables in strings

Embedding variables in strings means inserting the value of a variable directly inside a string, instead of joining pieces using +.

In modern JavaScript, this is done using template literals (backticks `) and the ${} syntax.

How It Works

When JavaScript sees ${...} inside backticks (`), it:

Evaluates whatever is inside the braces.
Converts it to a string (if needed).
Inserts it into the final string.

Example

const name = "John";

const message = `Hello, ${name}`;
console.log(message);

Output:
Hello, John

Old Way (Concatenation)

const name = "John";

const message = "Hello, " + name;

Harder to read
Gets messy with multiple variables

Modern Way (Template Literals)

const name = "John";
const age = 25;

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

Multi-line strings

Multi-line strings allow you to write text that spans across multiple lines without using special characters like \n or string concatenation.

This is made easy using template literals (backticks `).

the Old Way

`javascript
const text = "This is line one.\n" +
"This is line two.\n" +
"This is line three.";

`
Issues:

Hard to read
Requires \n for new lines
Uses + for concatenation
Easy to make mistakes

Modern Way: Template Literals

With backticks, you can write multi-line strings naturally:

javascript const text =This is line one.
This is line two.
This is line three.`;

Output:

This is line one.
This is line two.
This is line three.

`
How It Works

JavaScript preserves line breaks inside backticks
No need for \n
Formatting stays exactly as written

Use cases in modern JavaScript

Dynamic HTML: Generating multi-line HTML structures with embedded data.

`javascript
const user = "Alice";
const age = 25;

const html = <div class="card"> <h2>${user}</h2> <p>Age: ${age}</p> </div>;

console.log(html);

Logging: Creating detailed log messages with timestamps and variable states.

`javascript
const user = "John";
const status = "Success";

const log = [${new Date().toLocaleTimeString()}] User: ${user}, Status: ${status};

console.log(log);

Output:
[10:30:45 AM] User: John, Status: Success

SQL Queries: Constructing dynamic database queries based on user input.

`javascript
const username = "john_doe";

const query = SELECT * FROM users WHERE username = '${username}';

console.log(query);

Output:
SELECT * FROM users WHERE username = 'john_doe'

Tagged Templates: Advanced string processing where a function (a "tag") parses the template.

javascript function highlight(strings, value) { return${strings[0]}${value}${strings[1]}`;
}

const name = "Alice";

const result = highlightHello ${name};
console.log(result);

Output:

Hello Alice

String Interpolation Visualisation

plaintextHello ${name}`
↓
Replace ${name} with value
↓
"Hello John"

`
Before vs after template literals

`javascript
Before (Concatenation):

"Hello " + name + ", you have " + count + " messages."

After (Template Literals):

Hello ${name}, you have ${count} messages.

Array Flatten in JavaScript

Sakshi Tambole — Wed, 08 Apr 2026 16:41:58 +0000

Flattening arrays is one of those concepts that shows up everywhere—from real-world coding tasks to technical interviews.
In JavaScript, flattening an array refers to converting a nested (multi-dimensional) array into a single-level array by extracting all sub-elements.

What nested arrays are

Nested arrays, also known as multi-dimensional arrays, are arrays that contain other arrays as elements.
They represent hierarchical data, such as a grid, tree-like structures, or complex API responses.

Example:

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

Visual Representation:
[ 1, [ 2, 3 ], [ 4, [ 5, 6 ] ] ]

Tree view:
        []
      /  |   \
     1  []   []
       / \   / \
      2   3 4  []
               / \
              5   6

Why flattening arrays is useful

Flattening converts a nested array into a single-level array.
Data Normalization: Converts complex tree-like structures from API responses into simple lists for easier processing.
Simplified Manipulation: Operations like sorting, searching, or mapping are significantly easier on a flat array than a deeply nested one.
Compatibility: Many UI components, such as simple drop downs or search autocomplete lists, require flat data structures

Benefits:

Easier data processing
Simplifies loops and iterations
Useful in APIs and data transformations
Common in functional programming tasks

Example:

Input:  [1, [2, 3], [4, [5, 6]]]
Output: [1, 2, 3, 4, 5, 6]

Visual Tree Representation

        []
      /   |    \
     1   []    []
        / \    /  \
       2   3  4   []
                  / \
                 5   6

Step-by-Step Flattening

Step 1: Start reading from left to right
Take: 1
Result: [1]

Step 2: Encounter [2, 3]
Open the box → take elements inside
Result: [1, 2, 3]

Step 3: Encounter [4, [5, 6]]
Open it:
Take: 4
Result: [1, 2, 3, 4]
Now see another nested box → [5, 6]

Step 4: Open [5, 6]
Take: 5, 6
Result: [1, 2, 3, 4, 5, 6]

Flatten Transformation Diagram
Original:
[1, [2, 3], [4, [5, 6]]]

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

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

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

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

Concept of flattening arrays

Flattening arrays means converting a nested (multi-level) array into a single-level array by removing all inner array layers.
Flattening arrays is more than just “removing brackets”—it’s about systematically breaking down a complex structure into a simple, usable form.

Transformation Visual:

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

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

Visual Idea:
        []
      /   |    \
     1   []    []
        / \    /  \
       2   3  4   []
                  / \
                 5   6

Step-by-Step Deep Understanding

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

Step 1:
→ 1 is not an array → add
Result: [1]

Step 2:
→ [2, 3] is an array → go inside
   → 2 → add
   → 3 → add
Result: [1, 2, 3]

Step 3:
→ [4, [5, 6]] is an array → go inside
   → 4 → add
   → [5, 6] → go inside
       → 5 → add
       → 6 → add

Final Result: [1, 2, 3, 4, 5, 6]

Why This Concept Matters

Understanding flattening helps you:

Solve recursive problems
Work with tree-like data (DOM, JSON)
Handle real-world nested API responses
Crack coding interviews

Different approaches to flatten array

In JavaScript, you can flatten arrays using built-in methods like Array.prototype.flat(), functional approaches such as reduce() with recursion, or iterative solutions using a stack to avoid call stack limits.

Built-in Methods

flat(depth): Introduced in ES2019, this is the standard way to create a new flattened array.

Default: Flattens one level deep.

Unlimited Depth: Pass Infinity to fully flatten an array regardless of nesting.

Sparse Arrays: Automatically removes empty slots.

flatMap(): Combines mapping and flattening into one step, useful for transforming data from nested API responses.

Example 1: Default Behaviour (Depth = 1)

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

arr.flat();
// [1, 2, 3, 4, 5]

Visual:

Before:              After:

[                    [
  1,                   1,
  [2, 3],   ---->      2,
  [4, 5]               3,
]                      4,
                       5
                     ]

Example 2: Deeper Nesting

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

arr.flat();
// [1, 2, [3, 4]]

- It flattened only the first level
- [3, 4] is still nested

Example 3: Using Depth

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

arr.flat(2);
// [1, 2, 3, [4]]

Visual:

Depth = 2

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

Example 4: Flatten Completely

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

arr.flat(Infinity);
// [1, 2, 3, 4, 5]

Recursive Approach

A recursive approach is a way of solving a problem where a function calls itself repeatedly to break the problem into smaller, simpler parts until a stopping condition is reached.

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;
}

Break the problem into smaller sub problems.

Using reduce()

Using reduce(), flattening an array means iterating through each element and accumulating results into a single array, while recursively handling nested arrays.

function flatten(arr) {
  return arr.reduce((acc, item) => {
    return acc.concat(
      Array.isArray(item) ? flatten(item) : item
    );
  }, []);
}

Iterative (Stack-Based)

The iterative (stack-based) approach is a way of flattening an array by using a stack (LIFO structure) to process elements one by one, instead of using recursion.

function flatten(arr) {
  const stack = [...arr];
  const result = [];

  while (stack.length) {
    const item = stack.pop();

    if (Array.isArray(item)) {
      stack.push(...item);
    } else {
      result.push(item);
    }
  }

  return result.reverse();
}

Common interview scenarios

"Flatten this without using .flat()": They want to see recursion or a while loop.
"Flatten to a specific depth": They want to see if you can add a depth counter to your recursive function.
"Handle empty slots": How does your code handle [1, , [3]]? (The built-in .flat() removes empty slots).

Nested Array Structure:

Tree / Hierarchy View (Best for understanding depth)

Array
├── 1
├── [2, 3]
│   ├── 2
│   └── 3
└── [4, [5, 6]]
    ├── 4
    └── [5, 6]
        ├── 5
        └── 6

Visualisation:

[ 1,  [ 2, 3 ],  [ 4,  [ 5, 6 ] ] ]
        └───┘        └───────┘
        level 1        level 2

Layered Depth View

Level 0: [ 1,        A,            B        ]
Level 1:        [2, 3]        [4,      C   ]
Level 2:                          [5, 6]

Flatten Transformation Visual:

Step-by-Step Expansion: 

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

Step 2 (open first level):
[1, 2, 3, 4, [5, 6]]

Step 3 (open next level):
[1, 2, 3, 4, 5, 6]

Arrow Transformation Diagram:

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

Before vs After Comparison:

Before (Nested)              After (Flattened)

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

JavaScript Modules: Import and Export Explained

Sakshi Tambole — Sun, 05 Apr 2026 11:01:24 +0000

JavaScript modules, using the import and export keywords, allow developers to break code into smaller, reusable files, promoting better organisation, maintainability, and encapsulation. This system, introduced in ES6, is the standard for modern JavaScript development.

🚧 Why JavaScript Modules Are Needed:

As JavaScript applications grow, writing all your code in a single file (or loosely connected files) quickly leads to serious problems. Modules were introduced to solve these issues and bring structure to your code base.

Global scope pollution:

JavaScript applications without modules often suffer from global scope pollution, where variables and functions are defined in the global space and become accessible from anywhere in the code.
This creates a high risk of name collisions, especially in larger projects where multiple developers are working simultaneously.

💥 Example

var user = "Alice";

var user = "Bob"; 

console.log(user);

Hard-to-maintain code:

Another major issue is hard-to-maintain code.
When all logic is written in a single file or a few large files, the code base quickly becomes overwhelming.
These files can grow to thousands of lines, mixing different concerns such as business logic, UI handling, and utility functions in one place.

💥 Example

function login() { /* ... */ }
function calculateTotal() { /* ... */ }
function renderUI() { /* ... */ }
function sendEmail() { /* ... */ }

3.Lack of Re-usability:

The absence of modules also leads to a lack of re-usability.
Developers often end up copying and pasting the same functions across multiple files or projects instead of sharing them efficiently.
This duplication increases the size of the code base and creates maintenance challenges.
If a bug is found in a duplicated function, it must be fixed in every place where the code was copied, increasing the chances of inconsistencies and missed updates.

💥 Example

function formatDate(date) {
  return date.toISOString();
}
(copied again)
function formatDate(date) {
  return date.toISOString();
}

Dependency Confusion:
Finally, dependency confusion is a common problem in non-modular JavaScript.

In traditional setups, especially when using multiple script tags, there is no clear indication of which file depends on another.
Developers must manually manage the order in which scripts are loaded, and even a small mistake can break the application.

💥 Example

<script src="math.js"></script>
<script src="app.js"></script>

If app.js depends on math.js, the order matters.

📦 Exporting Functions or Values:

In JavaScript modules, exporting functions or values allows you to make specific parts of a file available for use in other files. Instead of exposing everything globally, you explicitly choose what should be shared, which improves clarity and control.

The export keyword makes variables, functions, or classes available to other modules.
There are two types:
Named Exports
Default Exports

Named Exports Named exports allow you to export multiple values from a single module. You can export them either individually or all at once.

Example 1: In-line Named Exports

export const username = "JohnDoe";
export const age = 25;

Example 2: Exporting All at Once

const username = "JohnDoe";
const age = 25;

export { username, age };

To import named exports, use curly braces {}:

import { username, age } from "./data.js";
console.log(username, age);

Default Exports A module can have only one default export, which simplifies importing.

Example: Default Export

const greet = () => "Hello, welcome to JavaScript Modules!";
export default greet;

To import a default export, do not use curly braces {}:

import greet from "./greet.js";
console.log(greet());

📥 Importing Modules:

What is importing?

Importing is the process of bringing functions, variables, classes, or other code from one module (file) into another module so they can be used there.

Import Named Exports

import { add, subtract } from './math.js';

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

Import Default Export

import greet from './greet.js';

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

Import Everything

import * as math from './math.js';

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

🔄 Default vs Named Exports:

Default Exports:

A default export is the main thing a module provides.

Each file can have only ONE default export
When importing, you can choose any name

export default function greet() {}

import greet from './greet.js';

Named Exports:

Named exports let you export multiple values from a single file, each with its own name.

can have many named exports
It must import them using the exact same names

⚖️ Key Differences

Feature	Named Export	Default Export
Number allowed	Multiple	One per file
Import syntax	`{ name }`	Any name
Use case	Utilities, multiple items	Main functionality

🧱 Benefits of Modular Code

Maintainability
Smaller files → easier to understand.
Changes are localized.
Re-usability
Share modules across projects.
Testability
Test individual modules in isolation.
Team Collaboration
Multiple developers can work on different modules.
Scalability
Code base grows without becoming chaotic.

📊 Diagram Ideas

1️⃣ File Dependency Diagram

app.js
 ├── math.js
 ├── greet.js
 └── utils.js

2️⃣ Module Import/Export Flow

[ math.js ]
   |  export add, subtract
   ↓
[ app.js ]
   |  import { add }
   ↓
Use functions

DEV Community: Sakshi Tambole

Callbacks in JavaScript: Why They Exist

Functions as Values in JavaScript

What is a Callback Function is

Why Callbacks Exist

Why callbacks are used in asynchronous programming

Passing functions as arguments

Callback usage in common scenarios

The Basic Problem of Callback Nesting

Explain callback problems conceptually

Template Literals in JavaScript

Problems with traditional string concatenation

Template literal syntax

Embedding variables in strings

Array Flatten in JavaScript

What nested arrays are

Why flattening arrays is useful

Concept of flattening arrays

Different approaches to flatten array

*Common interview scenarios *

JavaScript Modules: Import and Export Explained

Common interview scenarios