DEV Community: Rafsan Jany Ratul

Understanding Scope, Hoisting, and Closures like a Pro!

Rafsan Jany Ratul — Sun, 05 Apr 2026 08:00:46 +0000

🔹 What is Scope?

Scope defines the accessibility of variables in your code.

Simply put:

Scope decides where in your code a variable can be used.

In JavaScript, every variable has a “boundary.” Outside this boundary, the variable is unavailable.

Why is Scope important?

Prevent variable conflicts
Manage memory efficiently
Make code predictable

Main types of Scope:

Global Scope → accessible from anywhere
Function Scope → accessible only within a function
Block Scope → accessible within {} (using let or const)
Lexical Scope → determined by the code’s written structure

🔹 Scope Example

let person = [1,2,3,4,5]; // global scope

function total(num1, num2) {
    const result = num1 + num2; // function scope

    if(true) {
        var result1 = num1 * num2; // function scope (var)
    }

    console.log(result1); // accessible
    console.log(person);  // global access
}

total(10, 20);

console.log(result); // ❌ Error, function scope

Takeaways:

result is limited to the function scope, so it cannot be accessed outside the function
result1 is accessible inside the function not because of hoisting, but because var is function-scoped (it ignores block scope)
person can be accessed inside the function because it is declared in the global scope, and global variables are accessible from anywhere
JavaScript follows a scope chain, meaning it first looks for variables in the local scope, and if not found, it checks the outer (global) scope
Block scope refers to any code inside {} — such as if, else, for, or while blocks — where let and const are limited to that block only
A function also creates its own scope, and blocks inside functions can act as block scope when using let and const
var, let, and const have different scoping rules, so choosing the right one is important for predictable behavior

🔹 What is Hoisting?

Hoisting is JavaScript’s behavior where variable and function declarations are moved to memory at the beginning of the execution phase.

In other words:

Before your code runs, JS prepares memory for all declared variables and functions.

Important points:

var → hoisted and initialized as undefined
let / const → hoisted but not initialized (they stay in the Temporal Dead Zone)
Function declarations → fully hoisted

Common misconception:

Some think hoisting literally “moves code to the top,” but technically, it’s a memory preparation process.

🔹 Hoisting Example

console.log(a); // undefined
var a = 10;

Internally, JavaScript interprets it as:

var a;
console.log(a); // undefined
a = 10;

Using let or const:

console.log(b); // ❌ ReferenceError
let b = 10;

This happens because let/const are hoisted but not initialized, creating the Temporal Dead Zone (TDZ).

🔹 What are Closures?

A closure is when a function “remembers” variables from its outer scope even after the outer function has finished executing.

Simply:

Function + its surrounding environment = Closure

Why closures are useful:

Maintain private data

Keep state between function calls

Widely used in real-world JS (event handlers, React hooks, etc.)

🔹 Closure Example

function total() {
    let counter = 0;

    return function() {
        counter++;
        console.log(counter);
    }
}

Usage:


const result1 = total();

result1(); // 1
result1(); // 2

const result2 = total();

result2(); // 1
result1(); // 3

Key points:

counter is not global

The inner function remembers its value

Each call to total() creates a new memory instance

🔹 Lexical Scope (The backbone of closures)


function outer() {
    let a = 10;

    return function inner() {
        console.log(a);
    }
}

The inner function is declared inside the outer function

Therefore, it can access variable a

This is lexical scope, which allows closures to work
How These Concepts Connect
Scope → defines where a variable lives
Lexical Scope → defines what variables a function can access based on the written code
Closure → allows functions to “remember” variables from outer scopes
All three work together in JavaScript!

Summary

Scope → variable boundaries
Hoisting → memory preparation before execution
Lexical Scope → determines access based on code structure
Closure → functions remember outer data

Final Thought

Many unexpected behaviors in JavaScript happen because these concepts are unclear.

Once Scope, Hoisting, Lexical Scope, and Closures are understood, JavaScript becomes predictable and much easier to work with
#webdevelopment #frontend #closure #hoisting #scope #lexicalscope #learntocode

JavaScript Event Loop Explained (Call Stack, setTimeout, Promise, async/await)

Rafsan Jany Ratul — Thu, 02 Apr 2026 06:17:21 +0000

JavaScript is single-threaded, but it can still handle asynchronous operations like timers, API calls, and promises efficiently. This often confuses developers — especially when setTimeout, Promise, and async/await don’t execute in the order we expect.

In this article, we will break down how JavaScript actually works behind the scenes using the Call Stack, Web APIs, Callback Queue, Microtask Queue, and the Event Loop.

We will start with a simple synchronous example, then gradually move into asynchronous behavior using setTimeout, Promise, and async/await. By the end, you will clearly understand why some code runs immediately while other parts are delayed — and how JavaScript manages everything without blocking the main thread.

If you've ever wondered:

Why does setTimeout run last?
Why does Promise.then() run before setTimeout?
Does async/await make code synchronous?

Then this guide is for you

Example 1: Synchronous vs setTimeout

function a (){
    b()
    console.log("first")
}

function b (){
    d()
    console.log("second")
}

setTimeout(()=>{
    console.log("async task1")
},2000)

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

function d (){
    e()
    console.log("fourth")
}

function e (){
    console.log("fifth")
}

a()

How It Works

JavaScript is single-threaded, meaning it uses one Call Stack to execute code.

🔹 Step 1: Synchronous Execution

Functions run one by one:

a() → b() → d() → e()

Output:

fifth
fourth
second
first

🔹 Step 2: setTimeout Behavior

setTimeout is handled by Web APIs
After the timer finishes, it goes to the Callback Queue
The Event Loop moves it to the Call Stack when it's empty

Final Output:

fifth
fourth
second
first
async task2
async task1

Event Loop (Simple Idea)

The Event Loop continuously checks:
“Is the Call Stack empty?”

If yes → it pushes tasks from the queue into the stack.

Example 2: Promise (Microtask Queue)

console.log("start")

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

Promise.resolve().then(() => {
  console.log("promise")
})

console.log("end")

Output:

start
end
promise
timeout

Why This Happens?

Because JavaScript has two queues:

🟡 Microtask Queue

Promise .then
async/await

🔵 Callback Queue (Macrotask)

setTimeout
setInterval

👉 Rule:

Microtasks always run before Callback Queue tasks.

Example 3: async/await

async function example() {
  console.log("start")
  await new Promise(resolve => setTimeout(resolve, 1000))
  console.log("end")
}

console.log("before")
example()
console.log("after")

Output:

before
start
after
end

Important Concept

Many people think:

async/await makes code synchronous

❌ That’s incorrect

✔️ Correct idea:

async/await makes asynchronous code LOOK synchronous, but it still uses the Event Loop.

Key Takeaways

JavaScript runs synchronous code first
Async tasks go to Web APIs
Event Loop manages execution
Promises use Microtask Queue
Microtasks run before setTimeout
async/await is just syntax over Promise

Final Thought

JavaScript never pauses the entire program for async code.

It simply schedules it smartly using:

Call Stack
Event Loop
Queues

Once you understand this, async JavaScript becomes much easier

If this helped you, feel free to share

How to build your first web project like a Pro

Rafsan Jany Ratul — Thu, 30 Oct 2025 08:10:56 +0000

when we build our first web project, sometimes we see that every file we create stays together at the same place but it is not a good practise. When we drop a HTML,CSS,image file together in one folder then when our project grow there will be a chances of making mistake. In this article i will show you how to decorate your first website like a pro so that in future when we move to MERN or React it will be easier to handle everything.

1. Making clean folder structure
at the beginning of project, we have to setup our folders like this

my-project/
│
├── index.html
├── /assets
│   ├── /images
│   ├── /icons
│   └── /fonts
│
├── /css
│   ├── style.css
│   └── responsive.css
│
├── /js
│   ├── script.js
│   └── utils.js
│
└── /components
    ├── navbar.html
    └── footer.html

Why it works well :

we can find our code easily
we can reuse the same component again when needed
deployment will be easier on github pages or another hosting platforms

2. CSS files should be separate instead of creating one file

in most cases we make mistake of writing all our code in one
style.css file.But if we do like that then when needed we have to face difficulty to find. To solve this problem we can divide files like that,

style.css main design
responsive.css mobile and tabs design
animation.css if we use animation
if we organize like that then it will be easier to maintain code and files.

3. Separate Javascript Files
We can organize JS files like that,

script.js for DOM manipulation
data.js for static data or objects
utils.js for helper functions

If we do this our code will be modular, which will give us more flexiblity to learn React or Node.js

4. We have to reuse common component
In our project sometimes we have to reuse navbar footer
or header for better practise, we need to separate these files like navbar.html, footer.html
If we want then we can include this automated using tamplate engine.

5. Naming and code style will be same
it is important to maintain when we making a project

every folder and files name will be in lowercase
avoid space use hyphen(-) like, main-section
we have to indent HTML/CSS properly
we have to maintain same naming convention

6. Version Control using form the first day
in our first froject we should use git and github. We dont need to be expart in this time but learn the basics

git init
git add .
git commit -m "Initial commit"
git push origin main

This helps you:

Backup your work
Track changes
Show your projects publicly

7. Bonus: Recommended Folder Setup for Larger Projects
When you move into React or Node.js later, you’ll see similar structures — so learning it now gives you a big head start.

project/
├── public/
├── src/
│   ├── components/
│   ├── pages/
│   ├── styles/
│   ├── scripts/
│   └── utils/
└── package.json

so start simple but think like a pro

Conclusion
At the first time we may think that organize file structure is a extra work and boaring but after some days we will understand that it will increase our productivity more.
when a project folder we open and see every files are organized then it show that someone professional who write the code clearly and better way.

Now your Turns
How do you organize your project folders?
Do you prefer everything in one place, or a modular structure?
Share your setup in the comments — I’d love to see how others do it!

8 Things You Should Know About Responsive Web Design

Rafsan Jany Ratul — Wed, 22 Oct 2025 20:09:21 +0000

Nowadays, when a user visits our website or web application using a mobile, tablet, or laptop — he should be able to use it comfortably. This is the main purpose of responsive web design.
A website that looks good on a large screen but appears poor on a small screen cannot be considered a modern website.

How Responsive Design Works

Responsive design means the layout, text, images, buttons, etc. will adjust automatically according to the screen size.
Here, we don't need to create separate versions for each screen size; rather, one design will work for every device.

The Important Ways to Make a Website Responsive

1. Mobile-First Approach

We have to start our design with small screens like mobile. Then, gradually, we can expand the design for larger screens.
This way, performance looks better on small devices.
However, if you want, you can select the desktop as the first approach and then gradually move towards smaller devices.

2. Viewport Meta Tag Usage

In the <head> tag of HTML, the viewport meta tag is required. The code looks like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It helps the website become responsive according to the device’s viewport.
In most code editors, this tag is included by default — just make sure it’s present.

3. Using Max-Width for Layout Control and Center Alignment

On large screens, the website content should not be too wide horizontally, and on small screens, it should fit properly and look good.
To ensure this, max-width is used. Additionally, people use margin: 0 auto; to center the content horizontally.
By applying this technique, all content stays centered.
You can also add some padding for small screens to create spacing, like this:

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

Every modern website uses this technique.

4. Relative Units and Flexible Layout

We should use %, rem, or em instead of pixels.
Pixels are fixed values. Though px can be used in some cases, for making a responsive website, relative units are more effective.
Example:

.container {
  width: 90%;
}

5. Using Flexbox and Grid Layout

In the past, people used float-based layouts, but nowadays, the simplest and most modern solution is using Flexbox and Grid.
These are easier to maintain and offer better control for responsive design.

6. Making Images and Videos Fluid

We have to use relative units and avoid fixed pixel sizes for images.
If we use %, the image becomes fluid and adjusts within its container — making it easier to build a responsive layout.
Example:

img {
  max-width: 100%;
  height: auto;
}

7. Responsive Typography

If the screen is small, font sizes should also be smaller; otherwise, they will look oversized.
Similarly, on larger screens, the font size should be appropriate.
For this, we can use em, rem, or vw units.

8. Responsive Navigation Menu

The navigation bar is one of the most important parts of a website.
On desktop screens, horizontal menus look fine, but on small screens, they can break and become unreadable.
To solve this problem, we need a responsive navigation design.

We can use media queries for small screens and convert the menu layout into a vertical one.
Then, using JavaScript, we can create a hamburger icon — when clicked, the menu will toggle on and off.
We can also use Flexbox or Grid to align and control the order of menu items.

Conclusion

Responsive web design is now a mandatory part of modern web development.
If we can properly use HTML, CSS, Flexbox, Grid, and Media Queries, we can build websites that work smoothly and beautifully across all screen sizes.

Let's Understand a Website URL What Are HTTP, Domain, Hosting, and More?

Rafsan Jany Ratul — Wed, 22 Oct 2025 11:25:08 +0000

When we type a URL like

https://www.example.com

and click enter then what will happens?

Let’s break it down step by step and understand what each part actually means in the simplest way possible.

1. What is a URL?

URL means Uniform Resource Locator
this is mainly the address of the website like, our home address. In the internet there there also an address of the website.

For example: https://www.google.com

2. What Does HTTP and HTTPS Mean?

HTTP means Hyper Text Transfer Protocol. This is the system by which the browser and server are connected with each other. Then comes HTTPS, which means Hyper Text Transfer Protocol Secure. Here, S means Secure, which comes from the Secure Socket Layer (the short form of this is SSL). SSL ensures the security of data. In the very first time when HTTP was used, there were issues of losing data and man-in-the-middle attacks. That means data could be lost sometimes while passing. To remove the issue in the technology field, SSL was added. Now it has turned into HTTPS for security. That’s why every safe website starts with HTTPS.

3. What Does “www” Mean?

WWW means World Wide Web. It is a sub domain. It will connect the main server of the website. Now a days, people works without WWW like, google.com, facebook.com, etc.

4. What Is a Domain Name?

Domain name is the readable address of the website what is easy to remember. for example, in https://google.com
google is the brand and .com is domain extension. you can say domain is google but .com is top level domain. the domain extension like.com, .net, .org, .edu says the category of the website.
when you hit a url like, https://www.example.com then, first the server will find and reach to the top level domain .com then it will search the example under the .com domain.

5. What Is Hosting?

Hosting is the platform where the datas and files of the website like html css javascript database etc will reserved. Domain is the address of Home and hosting is the Home where we keep our furniture and items. when we hit an url then by the domain we can see the website what is remain in hosting.

How Everything Works Together

when we write https://www.google.com
then browser finds the ip of google.com by the DNS system. Then by HTTP/HTTPS protocol it will connect with the server. From the server the files of the website like HTML CSS JS are transferred. Then we see the website on the screen.

These basic things are very important for the web developer because, making website means knowing how website works and be live on internet not only knowing html css.

Thanks for reading! Follow me if you want to learn along!