DEV Community: Tejas Khanolkar

Synchronous and Asynchronous behavior of JavaScript

Tejas Khanolkar — Fri, 05 Jun 2026 13:59:18 +0000

Synchronous Behavior of JavaScript

Before understanding asynchronous JavaScript, we first need to understand synchronous behavior.

Synchronous behavior means JavaScript executes code one statement at a time in the order in which it appears.

Let's look at an example:

function getRun() {
    console.log("I am running");
}

console.log("Hi");
console.log("I am doing work");
getRun();
console.log("Bye");

Output:

Hi
I am doing work
I am running
Bye

Here, JavaScript executes each statement one after another.

It does not skip a statement and come back later. It finishes the current work before moving to the next one.

This type of execution is called synchronous execution.

JavaScript is Single-Threaded

You may have heard that JavaScript is a single-threaded language.

But what does that mean?

A single-threaded language can perform only one task at a time.

Consider the following code:

console.log("Program Start"); // 1

let a = 20; // 2
let b = 10; // 3

console.log(a + b); // 4

console.log("Program End"); // 5

JavaScript executes the code in this order:

1 → 2 → 3 → 4 → 5

It completes statement 1 before moving to statement 2.

It completes statement 2 before moving to statement 3.

This happens because JavaScript has only one main thread for executing code.

So when we say JavaScript is single-threaded, we mean that it can execute only one task at a time.

Why Do We Need Asynchronous Behaviour?

Imagine you click a button on a website.

After clicking the button, the browser needs to:

Fetch data from a server
Wait for a timer
Access the user's location
Read data from local storage

Some of these operations can take time.

Now imagine JavaScript stopped everything and waited until those operations finished.

The webpage would freeze.

Buttons would stop responding.

Animations would stop.

The user experience would become poor.

To avoid this problem, JavaScript uses asynchronous behavior.

What is Asynchronous Behaviour?

Asynchronous behavior allows JavaScript to start a task that may take time and continue executing the remaining code without waiting for that task to finish.

In other words, JavaScript does not block the execution of the rest of the program while waiting for certain operations to complete.

Let's see an example.

console.log("Hi");

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

console.log("Bye");

Many beginners expect the output to be:

Hi
Run after 2 seconds
Bye

But the actual output is:

Hi
Bye
Run after 2 seconds

Why?

Because JavaScript does not wait for the timer to finish.

Instead, it continues executing the next statement.

So "Bye" gets printed immediately.

After approximately 2 seconds, the callback function executes and prints:

Run after 2 seconds

What If the Delay Is 0?

Let's change the timer value.

console.log("Hi");

setTimeout(function () {
    console.log("Run after 0 seconds");
}, 0);

console.log("Bye");

Output:

Hi
Bye
Run after 0 seconds

Many developers are surprised by this.

Even though the delay is 0 milliseconds, "Bye" is still printed before the callback function.

This shows that JavaScript does not execute the callback immediately.

The callback is executed later.

We will learn exactly how this happens in the next blog.

How Does JavaScript Perform This Asynchronous Work?

Operations such as:

Timers (setTimeout)
User interactions
Network requests
Location-related operations
Local storage operations

are not handled directly by the JavaScript engine.

The browser provides special features that help perform these tasks.

When JavaScript encounters such work, it can hand over that responsibility and continue executing the remaining code.

Once that work is completed, JavaScript gets notified and can execute the corresponding callback function.

The complete internal process behind this behavior will be discussed in the next blog.

Summary

Synchronous execution means code runs one statement after another.
JavaScript is single-threaded, meaning it executes one task at a time.
Some operations take time to complete.
Waiting for such operations would make the webpage unresponsive.
Asynchronous behavior allows JavaScript to continue running other code while those operations are being handled.
setTimeout() is a simple example of asynchronous behavior.
In the next blog, we will learn how JavaScript actually manages asynchronous tasks behind the scenes.

calculator using html,css and js

Tejas Khanolkar — Sun, 12 Oct 2025 19:05:35 +0000

Creating a Calculator Application using HTML, CSS, and JavaScript

In this guide, I’ll walk you through how I built a simple calculator web application using HTML, CSS, and JavaScript.

This project helped me understand how the Document Object Model (DOM) works, how to validate expressions using regular expressions (regex), and how to handle user input dynamically through JavaScript events.

🧰 Prerequisites

Before starting, you should have basic knowledge of:

HTML structure and elements
CSS for basic styling
JavaScript fundamentals (variables, functions, event listeners)

If you’re new to JavaScript, don’t worry — this project is simple and a great way to learn DOM manipulation and regex usage.

🧠 What You’ll Learn

By the end of this project, you’ll understand:

How to access and modify HTML elements using the DOM.
How to validate arithmetic expressions using regular expressions (regex).
How to respond to user interactions (button clicks).
How to evaluate user input dynamically using JavaScript’s eval() function.

🏗️ About the Project

This calculator is a simple, single-page web application that performs basic arithmetic operations such as addition, subtraction, multiplication, division, and modulus.

For the UI (User Interface), I used a pre-made HTML and CSS template.
My main focus was on writing the JavaScript logic to make the calculator actually work.

🌐 Understanding the DOM

The Document Object Model (DOM) represents your HTML page as a tree of elements that JavaScript can interact with.

Using the DOM, we can grab elements, update content, or change styles based on user actions.

Common DOM methods I used:

document.getElementById() – grabs an element by its unique ID.
document.querySelector() – grabs the first element matching a CSS selector.
document.querySelectorAll() – grabs all elements matching a CSS selector.

Example:

document.getElementById("display").innerText = "Hello World";

click here

Day 1: Defining Variables in JavaScript

Tejas Khanolkar — Sat, 13 Jul 2024 22:01:51 +0000

I’ve started Hitesh Sir’s JavaScript 30 days challenge, and today’s task was all about defining variables and understanding their types. If you haven't joined yet, you can check it out here. Hurry, it's free until July 14th!

Declaring Variables

In JavaScript, you can declare variables using three keywords: let, var, and const. Here’s a quick overview:

let: Allows you to declare a variable that can be changed later.
var: Similar to let, but has some differences in scope handling.
const: Used to declare variables that should not be changed.
Example:

let myVariable = 'Hello';
var myOldVariable = 'World';
const myConstant = 42;

When you use let or var, you can change the value of the variable. However, if you declare a variable with const, attempting to change its value will result in an error.

Variable Types

You can assign various types of values to variables:
Number: For numerical values.
String: For text values.
Boolean: For true/false values.
undefined: For variables that are declared but not yet assigned a value.
null: For variables explicitly set to have no value.
These are called primitive values.

Syntax
The syntax for declaring a variable is straightforward:

let/const/var variableName = value;

Think of a variable as a box, and the value as the content inside the box.

Key Points

typeof: This is an operator, not a function. It’s used to check the type of a variable.

console.log(typeof myVariable); // Output: string

console.table: Handy for displaying arrays and objects in a tabular format.

const fruits = ['Apple', 'Banana', 'Cherry'];
console.table(fruits);

const user = {
  name: 'John',
  age: 25,
  city: 'New York'
};
console.table(user);

Research Findings on Variable Declarations

I found an excellent resource on variable declarations at javascriptInfo. Here’s a summary of what I learned:

Difference between var and let: They are almost the same, but their scope handling is different. let is block-scoped while var is function-scoped.
Naming constants: Use uppercase letters for constant variable names if their values are already known. Otherwise, use camelCase.
Redeclaration: You cannot declare the same variable again using let or var, but you can change its value multiple times (except for const variables).
Naming conventions: Variable names should preferably be in camelCase (though it's not strictly required).
Declaring multiple variables: It's better to declare multiple variables on separate lines for readability.

let user = 'John';
let age = 25;
let message = 'Hello';

Instead of:

let user = 'John', age = 25, message = 'Hello';

Meaningful names: Always give meaningful names to your variables. For more detailed information, you can follow thisblog article.

Feel free to tweak this further as per your style. Happy coding!

Mastering Django: A Workflow Guide

Tejas Khanolkar — Tue, 09 Jul 2024 21:29:39 +0000

Understanding the Django Framework: A Deep Dive into its Working Flow

Django is a full-stack framework created in Python. To understand Django, it’s essential first to grasp the concept of a framework. A framework is the structure or skeleton of your application. It provides a basic foundation upon which you build your application. When developing an app using a framework, you must adhere to its rules and conventions. These rules are strict to ensure your application runs smoothly in a production environment. Official documentation for each framework is available to guide you in creating applications that comply with these rules.

Django has its own flow structure, which you must follow to inject your code correctly. Deviating from this structure can lead to errors and issues. Let’s delve into the main topic and understand the working flow of the Django framework.

Request Handling in Django

User Request: The process begins when a user sends a request to the server. In this context, the server is the Django server.
URL Resolver: The Django server catches the request and passes it to the URL resolver, a private file in Django that developers do not have access to. This file resolves the URL and forwards the request to the urls.py file, where the routes are mapped to views.

Understanding Views and MVT Architecture

URL Mapping: In the urls.py file, the URL resolver checks which route is mapped to which view and sends the request to the corresponding view function in the views.py file.
Views: In Django, a view is a function that takes a request as an argument and returns a response to the client. To fully understand views, you need to understand the MVT architecture that Django follows. MVT stands for Model, View, Template. In this architecture, the view acts as a communicator between models and templates.

Interaction with Models

Model Interaction: Based on the nature of the request, the view may interact with models. A model in Django represents a table in the database. While you could interact directly with the database, Django provides a way to interact with it through models, which offer an abstract layer. This abstraction allows you to change the database with a single setting without interrupting the rest of the code.

Returning the Response

Template Rendering: After interacting with the model, control returns to the view, which then searches for the appropriate template to return to the client. Templates in Django are specific folders containing HTML files. These HTML files are called templates because their content is dynamic, changing with the help of the Jinja template engine. Jinja allows you to inject logic into your HTML files, making them dynamic.
Response: After rendering the template, the controller (in this case, the view) prepares the final response and sends it back to the user (client).

Conclusion

This is the overall workflow of a Django application. From receiving a request to returning a response, Django’s structure ensures a streamlined process that adheres to its MVT architecture. By following this flow, developers can create robust and scalable web applications efficiently.