DEV Community: Nikita Maharana

Callbacks, Promises & Async – await Explained

Nikita Maharana — Mon, 01 Jun 2026 14:07:04 +0000

Callbacks, Promises & Async – await:

Callbacks -> Callback Hell -> Promises -> Promise Chaining -> Async/Await -> IIFE

Synchronous vs Asynchronous

Synchronous
The code that runs line by line is called a synchronous code. Each instruction waits for the previous one to finish before moving on to the next.But the problem is it can block the UI if a task is slow.

Asynchronous
The code that takes some time to get executed or slow tasks (timers, API calls) are handed off. If there are multiple lines of code before and after the asynchronous code then remaining code keeps running and it does not wait for the asynchronous code to get executed. Result is handled later when ready.

// Async demo with setTimeout
console.log("one");
console.log("two");

setTimeout(() => {
  console.log("hello");  // runs after 4s
}, 4000);

console.log("three");
console.log("four");

// Output: one → two → three → four → hello

Callbacks
A callback is a function passed as an argument to another function and called inside it. It's how JS handles "do this first, then do that" logic.

function sum(a, b) {
  console.log(a + b);
}

function calculator(a, b, sumCallback) {
  sumCallback(a, b);  // sum is called here
}

calculator(1, 2, sum);  // Output: 3

Callback Hell (Pyramid of Doom)
When callbacks are nested inside each other to sequence async tasks, code becomes deeply indented and hard to read and maintain. This is called Callback Hell.
eg:

function getData(dataId, getNextData) {
  setTimeout(() => {
    console.log("data", dataId);
    if (getNextData) getNextData();
  }, 2000);
}

// Callback Hell 
getData(1, () => {
  console.log("getting data2...");
  getData(2, () => {
    console.log("getting data3...");
    getData(3, () => {
      console.log("getting data4...");
      getData(4);
    });
  });
});

The deeper the nesting, the harder to read, debug, and maintain. Promises solve this issue.

Promises
A Promise is a JS object representing the eventual completion or failure of an asynchronous task. It takes a function with two handlers: resolve (success) and reject (failure).
There are 3 states of a promise, they are
i.Pending
Result is undefined. Task still in progress.
ii.Fulfilled
resolve(value) was called. Task succeeded.
iii.Rejected
reject(error) was called. Task failed.

// Creating a Promise
const getPromise = () => {
  return new Promise((resolve, reject) => {
    console.log("I am a promise");
    resolve("success");   // OR
    // reject("error");
  });
};

// Consuming a Promise
let promise = getPromise();

promise.then((res) =>{
console.log("Fulfilled:", res);//runs if promise gets resolved or fullfilled
});

promise.catch((err) => {
  console.log("Rejected:", err);  // runs if promise gets rejected
});

resolve and reject are callbacks provided by JS -- you just call them. If you reject without .catch(), you get an Uncaught (in promise) error in console.

Promise Chaining
Instead of nesting, return a new Promise inside .then() and chain another .then(). This keeps code flat and readable -- this is the fix for callback hell.
eg:

function getData(dataId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("data", dataId);
      resolve("success");
    }, 3000);
  });
}

// Promise Chain (clean & flat!)
getData(1)
  .then((res) => { return getData(2); })
  .then((res) => { return getData(3); })
  .then((res) => { console.log(res); });

Async / Await
When we use async before a function makes it always return a Promise.

await pauses execution inside the async function until a Promise settles -- making async code look and read like synchronous code.

function getData(dataId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("data", dataId);
      resolve("success");
    }, 2000);
  });
}

// Async-Await
async function getAllData() {
  console.log("getting data1...");
  await getData(1);   // waits here
  console.log("getting data2...");
  await getData(2);   // then waits here
  console.log("getting data3...");
  await getData(3);
}
getAllData();

Still in async await we always have to keep the await data inside a function and every time call it to show the execution..to solve this issue we have IIFE...

IIFE — Immediately Invoked Function Expression

An IIFE is a function that runs immediately as soon as it is defined. It only executes once. Useful to run async code at the top level without wrapping it in a named function.

// Regular IIFE
(function () {
  // runs immediately
})();

// Arrow IIFE
(() => {
  // runs immediately
})();

// Async IIFE — most common use case
(async () => {
  console.log("getting data1...");
  await getData(1);
  console.log("getting data2...");
  await getData(2);
})();

*Pattern: *(func)() — wrap function in () to make it an expression, then call it with () immediately.

Summary
Callbacks → Callback Hell problem → Promises fix it → Promise Chaining improves readability → Async/Await makes it look synchronous → IIFE lets you run async code immediately.

From Tutorials to Real Learning: My Frontend Development Journey

Nikita Maharana — Sun, 24 May 2026 07:04:11 +0000

When I first started learning HTML and CSS, I believed I understood web development quite well. I could follow tutorials, recreate designs, and build simple webpages. At that stage, it felt like I had learned enough to move forward confidently.

However, after taking a long break from coding, I returned and realized something important: knowing syntax is very different from truly understanding development.

I knew how to write HTML and CSS, but I did not fully understand how real projects were structured, how developers approached problem-solving, or how different technologies worked together in practical applications.

Instead of only watching tutorials again, I decided to focus on building projects consistently.

I started creating both small and larger projects using HTML, CSS, and JavaScript. After completing nearly 40 to 50 projects, I began to understand development in a much deeper way. Concepts that once seemed confusing gradually became clearer through practice and experimentation.

During this process, I learned:
=> how layouts behave across different screen sizes
=> how JavaScript interacts with the DOM
=> how APIs connect frontend applications with backend services
=> how debugging improves problem-solving skills
=> how project structure and clean code matter in real-world development

One of the most important changes in my learning journey came from exploring github(https://github.com/Nikita-05112000) more actively. I started studying open-source repositories, observing how experienced developers organized their code, and understanding how collaborative development works in practice. Exploring real projects gave me a perspective that tutorials alone could not provide.

At the same time, I became more involved in the developer community. I began writing articles on DEV Community(https://dev.to/nikita_maharana_879884df2) to document my daily learning sessions and share the concepts I was exploring. Writing regularly helped me strengthen my understanding while also improving my ability to explain technical topics clearly.

I also started sharing my work consistently on LinkedIn(https://www.linkedin.com/in/nikita-maharana-750580361/). Through this, I connected with more developers, interacted with people from the industry, and became more comfortable communicating my ideas publicly. Over time, I realized that communication is just as important as technical skills in a developer's journey.

Alongside building projects, I also practiced JavaScript extensively through freeCodeCamp(https://www.freecodecamp.org/). Their structured approach to learning helped me strengthen my fundamentals step by step. The combination of theory explanations, hands-on labs, quizzes, and practical projects made the learning process much more effective for me. Instead of only reading concepts, I was constantly applying them through coding exercises, which helped me understand JavaScript more clearly and build confidence through consistent practice.

This is also how I first came across Google I/O. I learned about it through LinkedIn posts and emails related to the event and the writing challenge. It felt genuinely exciting to see developers around the world sharing ideas, innovations, and experiences through a global platform focused on technology and learning.

Looking back, I now understand that real growth in development comes from building consistently, making mistakes, solving problems independently, exploring real-world projects, and engaging with the community.

Tutorials can introduce concepts, but projects and practical experience are what truly develop understanding.

I still consider myself a learner, but now I approach learning differently. Instead of focusing only on completing courses or watching videos, I focus on building, experimenting, and improving step by step through practice.

APIs for JS Explained

Nikita Maharana — Sat, 23 May 2026 10:03:51 +0000

Application Programming Interface (API) : It acts like a bridge between frontend and backend where backend sends the data to frontend by endpoints.
eg: Swiggy gets google location or netflix gets geolocation

APIs are used for typically http request such as GET, POST, PUT, DELETE, etc...

How to use APIs?
In olden times, we used to work with APIs using XHR(Xml Http Request), but now browsers have default method called fetch which also works XHR underneath.

Fetch: Fetch is a web API (given by browers is called web api) which is used for http request. Fetch returns promise. Promise is an object which have three states (pending, fullfilled, rejected) and it describes eventual completion of asynchronous operation.

Promises are resolved by then and catch blocks. Fullfilled state of a promise triggers then block and rejected state of a promise triggers catch block

eg: fetch(url)
.then(function(res) {
//success code of a promise with "res" we can give any name response
})
.catch(function(err){
//rejected code of a promise with 'err' error
})

  Promises can be combined one after the other called promise chaining 
    eg: Promise
          .then(() => newPromise)//what ever this promise returns another promise takes it and resolves it until all promises resolves it will chain called promise chaining like default of swich case 
          .then(() => resolve)
          .catch(() => catchLogic)

DOM Explained

Nikita Maharana — Mon, 18 May 2026 11:12:35 +0000

Document Object Model
Browser provides a web API called 'document' which contains total style and struncture of the web page.

browser has its own js engine called v8.....we might have seen when we click a button then color change automatically, or an alert comes etc....
js changes html ... ... that means js changes html so it must need html code so that it can change or manipulate it... so browser puts all html into an object called document and js will take this document and change whatever it wants....

we write in html == hi
browser will create a document and write 'hi' js access document and changing to 'bye'
but ultimate output is document...
so user will see bye that's why js is powerful....

JavaScript can access, change HTML/CSS by using document object.

**i. DOM Selection:** You can select html elements in javascript multiple ways. Most popular are
 **a. getElementsByTagName('tag'):** It returns an array of all the tag elements from HTML. 
  **b. getElementsByClassName('class'):** It returns an array of all the class named elements from HTML.
  **c. getElementById('id'):** It selects elements with specific id from HTML.
  **d. querySelector('queries'):** It is used to select an element based on query but it selects the first element that matches the query.
  **e. querySelectorAll:** It is used to select an element based on query but it selects all elements which matches the condition

** ii. DOM Manipulation:**

    **a. textContent:** textContent is used to access/ manaipulate the text inside an element.
    **b. innerText:** innerText is also used to access/manipulalte the text inside an element but it also considers CSS 

   **d. innerHTML:** innerHTML is used to access / change complete HTML code 

    **e. value:** value is used to access/change input valaues

    **f. classList/ className:** used to access/change class names

    **g. style:** style is used to access/change  style of an element

**iii. DOM Creation:** DOM Creation is used to create HTML elements using DOM. We can use methods "createELement" 
To attach the element we can use,
 append : it id used for appending multiple elements
 appendChild: it is used for appending single element

Array Destructuring Explained

Nikita Maharana — Thu, 14 May 2026 12:43:50 +0000

Array Destructuring means extracting values from arrays and assigning in a convenient way for unpacking array elements into distinct variables.

or Simply, Array destructuring means taking values from an array and storing them into separate variables easily.

e.g:1
let fruits = ["apple", "grapes", "orange"];
let [first, second, third] = fruits;

console.log(first); //'apple'
console.log(second); //'grapes'
console.log(third); //'orange'

e.g:2
Accessing by their index values

let fruits = ["apple", "grapes", "orange"];
let first = fruits[0];
let second = fruits[1];
let third = fruits[2];

console.log(first); //'apple'
console.log(second); //'grapes'
console.log(third); //'orange'

The Rest Syntax: It allows you to capture the remaining elements of an array that have not been destructured into a new array.It's denoted by three dots (...).
e.g:
let fruits = ["apple", "banana", "orange", "grapes", "kiwi"];
let [first, second, ...rest] = fruits;

console.log(first); //'apple'
console.log(second); //'banana'
console.log(rest); //['orange', 'grapes', 'kiwi']

Explained Global, Local & Block Scope in JavaScript

Nikita Maharana — Wed, 13 May 2026 16:54:13 +0000

Scope: Scope generally means the visibility and accessibililty of variables in different parts of your code. Understanding of differnt types of scopes helps us write error free and clear code.

Global Scope:
Global scope means the variable is having its accessibility anywhere in the program, inside function or blocks etc. But sometimes it leads to naming conflicts.
e.g:
let global = "I'm a global variable";
function display(){
console.log(global);
}
display(); // "I'm a global variable"

In this example, global is declared in the global scope and can be accessed inside the display function.

Local Scope:
The variables are only accessible within a function not outside of it.
e.g:
function local(){
var local = "I'm a local scope variable";
if (true){
console.log(local);// Works here also inside of if block
}
}

Block Scope:
The variables are accessed within that block not outside of it.
if (true) {
let block = "I'm a block variable";
console.log(block);// Works here inside of the block only
}
console.log(block);//it will throw an error

Let's try to understand the difference between var, let and const based on Scopes

How to declare variables in JS?
We can declare variables in JS using var, let and const.

A variable is like a container used to store a value.

var is a function scoped variable which can be redeclared and reassigned.
e.g: console.log("Nikita Maharana");
var a = 25;
var a = 3;//can redeclare using var in js
a = 56;//reassigning is possible
console.log(a);

let is a block scoped variable which can be reassigned but cannot be redeclared.
e.g: let x = 9;
// let x = 5;// cannot redeclare
x = 78;//reassigning is also possible using let not re-declare
console.log(x);

const is a block scoped variable which cannot be redeclared or reassigned.
e.g: const y = 11;
// const y = 22; cannot re-declare
//y = 30;//re-assigning is not possible
console.log(y);

So, basically we can say...var is function scoped variable & let and const are block scoped variables.
ex1:
function fun(){
if(true){
var a = 55;
}
console.log(a);//inside the fxn it will work everywhere
}
fun();

ex2:
function fun(){
if(true){
var a = 55;let b = 34;const c = 34
}
console.log(a,b);//inside the fxn it will work everywhere b will not be printed
console.log(c);//c is block scoped it will not be printed
}
fun();

Array Functions Explained Simply

Nikita Maharana — Wed, 13 May 2026 15:20:37 +0000

Array: Arrays are used to store elements. Array is a collection of elements.
eg: let arr = [5, 44, 87, 9]
arr[0] = 5;
arr[1] = 44;

length is a method of array which returns total no of elements in the array.

//Arrays Methods:
i. push: push is used to insert a value into the array as last value
e.g: array.push(values)
ii. pop(): pop is used to remove only the last value of the array
eg: array.pop()

iii. unshift : unshift is used to insert value or values into the array as first value
e.g: array.unshift(values)

iv. shift(): shift is used to remove only starting vlaue of the array
eg: array.shift()

v. splice: splice(starting_index, deleteCount, insertValues)
It is used to delete any number of values or insert any number of values to the array
let arr = [5,4,6,7];
arr.splice(1,1)
arr.splice(1) -- will delete whole array from index 1
arr.splice(1, 2) -- will delete 2 values from index 1
arr.splice(1, 2, "shekhar") -- will delete 2 values from index 1 and add shkhar at index 1

vi. reverse is used to reverse the array.
eg: array.reverse();
arrays are mutable it changes the original array.

vii. includes : includes is used to check whether the value is included in the array or not.

viii. forEach(callback) : forEach is a method of arrays which accepts callback fxns as parameter and will apply the fxn to each and every element of array

Syntax : forEach(value, index)

Closure Explained in JS

Nikita Maharana — Wed, 13 May 2026 08:53:12 +0000

Closure: An inner fxn remembers the outer fxn values even after outer fxn execution gets ended.

We use this in techniques called memorization it means making code able to remember the previous input and its corresponding output such that it will not again calculate for same input.

//CLosure
function outer(){
var x = 25;
function inner() {
x++;//x is not in inner fxn its in outer but it remembers outer value that called memorization or closure
console.log(x);
}
return inner;
}
let result = outer();
console.log(result);
//it calls outer and outer returns inner so whole innner fxn returns
//inner is not yet called so 26 will not be printed as it is seems

result();//inner called 26
result()//27
result()//28 and so on...

Callback Functions in JavaScript Explained

Nikita Maharana — Wed, 13 May 2026 08:22:18 +0000

Callback Functions

A callback function is a function which is passed as an argument to another function.

e.g. function kind(){
console.log("I'm kind");
}
function rude(){
console.log("I'm rude");
}
function fun(a, b){
a();//calls kind()
b();//calls rude()
}
fun(kind, rude);

//Output:
I'm kind
I'm rude

Here, kind and rude are callback functions because they are passed as arguments to another function named as fun.
And fun is called a higher order function because it accepts functions (kind and rude) as parameters.