DEV Community: Bhupesh Chandra Joshi

Serialization and Deserialization a long drive

Bhupesh Chandra Joshi — Thu, 26 Mar 2026 08:22:03 +0000

Serialization:

You are sailing over the ocean and imagine you are a columbus, you found the treasure on the ocean, you want to send the information back to the spain.

You require the letter (to drap map and direction ),

In similar manner ,Serialization is converting a complex object to string/json object that easly stored in dB, sent over the network and stored into local storage.

Deserialization:
You have sent the letter to the spain, that is letter ,stored maps and directions. and goverment needs to understand it's meaning , they need to reconstruct the idea on letter or maps into the meaningful story and description.

The converting stored format object to easy to access object is Deserialization.

Key Concepts

Purpose:
You are columbus , you have embedded the letter and draw the map that enables others to understand, we convert into the json , so other programming language , or application understand the data.

Common Formats:
Columbus created a letter of JSON (human-readable)
, XML, binary formats (compact and fast, like Protocol Buffers or BSON).

Why Serialization Matters
Persistence:
When you open call of duty , you save the level completed status to file or database.

Data Transmission: Data transfer ex- you send your text to google search.

Template Literals in JavaScript

Bhupesh Chandra Joshi — Mon, 16 Mar 2026 16:43:51 +0000

Template Literals in JavaScript: Writing Cleaner and Smarter Strings

Modern JavaScript has evolved significantly to improve developer productivity and code readability. One feature that dramatically improved how developers work with strings is Template Literals.

Before ES6 (ECMAScript 2015), developers relied on string concatenation using the + operator, which often made code messy and hard to read. Template literals solved this problem by introducing a more intuitive way to build strings.

In this article, we will explore:

Problems with traditional string concatenation
Template literal syntax
Embedding variables in strings (String Interpolation)
Multi-line strings
Real-world use cases in modern JavaScript

The Problem with Traditional String Concatenation

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

Example (Old Approach)

const name = "Bhupesh";
const profession = "JavaScript Developer";

const message = "Hello, my name is " + name + " and I am a " + profession + ".";
console.log(message);

Output

Hello, my name is Bhupesh and I am a JavaScript Developer.

Issues with this approach

Poor readability when many variables are involved
Hard to maintain in long strings
Error-prone, especially when mixing quotes and variables
Multi-line strings are difficult

Example of a complex concatenation:

const product = "Laptop";
const price = 80000;

const description = "Product: " + product +
                    ", Price: ₹" + price +
                    ", Available in stock.";

console.log(description);

When applications grow, such code becomes difficult to manage.

Template Literals Syntax

Template literals were introduced in ES6 and use backticks () instead of quotes.

Inside template literals, JavaScript allows embedding expressions using:

${expression}

Basic Example

const name = "Bhupesh";
const profession = "JavaScript Developer";

const message = `Hello, my name is ${name} and I am a ${profession}.`;

console.log(message);

Output

Hello, my name is Bhupesh and I am a JavaScript Developer.

The syntax is much cleaner and easier to read.

Before vs After (Comparison)

Traditional Concatenation

const user = "Bhupesh";
const course = "JavaScript";

const text = "User " + user + " is learning " + course + ".";

Template Literals

const user = "Bhupesh";
const course = "JavaScript";

const text = `User ${user} is learning ${course}.`;

Result: Same output, but the template literal version is significantly cleaner.

Embedding Variables in Strings (String Interpolation)

Template literals allow variables and expressions to be directly inserted inside strings.

Example

const price = 500;
const tax = 0.18;

const total = `Total amount after tax: ${price + price * tax}`;

console.log(total);

Output

Total amount after tax: 590

You can embed:

Variables
Mathematical expressions
Function calls

Example with function:

function greet(name) {
  return `Hello ${name}, welcome to JavaScript!`;
}

console.log(greet("Bhupesh"));

Multi-line Strings

Before template literals, multi-line strings required awkward formatting.

Old Approach

const text = "JavaScript is powerful.\n" +
             "It runs in browsers.\n" +
             "It powers modern web applications.";

console.log(text);

With Template Literals

const text = `JavaScript is powerful.
It runs in browsers.
It powers modern web applications.`;

console.log(text);

This makes template literals extremely useful for:

HTML templates
Emails
Logs
Documentation strings

Real-World Use Cases in Modern JavaScript

Template literals are heavily used in real-world applications.

1. Dynamic HTML Generation

Frontend developers frequently generate HTML dynamically.

const username = "Bhupesh";
const role = "Admin";

const html = `
<div class="user-card">
  <h2>${username}</h2>
  <p>Role: ${role}</p>
</div>
`;

console.log(html);

This approach is commonly used in React, Vue, and vanilla JavaScript UI rendering.

2. Logging and Debugging

Template literals simplify debugging.

const api = "/users";
const status = 200;

console.log(`API endpoint ${api} responded with status ${status}`);

Instead of:

console.log("API endpoint " + api + " responded with status " + status);

3. Building API URLs

const userId = 45;

const url = `https://api.example.com/users/${userId}`;

console.log(url);

4. Generating SQL Queries (Backend Example)

In Node.js applications:

const userId = 10;

const query = `SELECT * FROM users WHERE id = ${userId}`;

Note: In production, always use parameterized queries to prevent SQL injection.

Visualization: String Interpolation Concept

Imagine template literals as a string template with placeholders.

Template:  Hello ${name}, welcome to ${platform}

Variables:
name = Bhupesh
platform = JavaScript

Final Output:
Hello Bhupesh, welcome to JavaScript

The ${} section works like a dynamic placeholder that gets replaced with actual values.

When Should You Use Template Literals?

Template literals should be preferred when:

Combining strings with variables
Writing multi-line text
Creating dynamic HTML
Logging values
Generating dynamic URLs

They improve:

Readability
Maintainability
Developer productivity

Key Takeaways

Template literals were introduced in ES6.
They use backticks () instead of quotes.
${} allows string interpolation.
They support multi-line strings.
Widely used in modern frontend and backend JavaScript.

Final Thoughts

Template literals may seem like a small feature, but they significantly improve the way JavaScript developers write and manage strings. Cleaner syntax leads to more readable code, fewer bugs, and faster development.

For developers building modern web applications with JavaScript, Node.js, or frameworks like React, template literals are an essential part of everyday coding.

Understanding the JavaScript Window Object

Bhupesh Chandra Joshi — Mon, 16 Mar 2026 15:36:28 +0000

Understanding the JavaScript Window Object: The Browser’s Global Powerhouse

When developers start learning browser-side JavaScript, they usually interact with elements using document.getElementById() or manipulate HTML through the DOM. However, behind the scenes, there is a larger object controlling the entire browser environment — the Window Object.

The Window object acts as the top-level container of everything running in a browser tab. Understanding this object helps developers clearly distinguish between Browser APIs (BOM) and Document APIs (DOM).

Let’s explore this powerful object step by step.

What is the Window Object?

The Window object represents the browser window or tab where your JavaScript is running. It is the global object in the browser environment, meaning that everything defined globally automatically becomes a property of the window.

console.log(window);

When executed in a browser console, this prints a large object containing browser APIs such as:

document
location
history
navigator
localStorage
timers
dialog boxes

Think of the window object as the root controller of the browser environment.

Window
 ├── Document (DOM)
 ├── Location
 ├── History
 ├── Navigator
 ├── LocalStorage
 └── Browser APIs
![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ira64xme0ayc356v1eym.png)

Global Scope and the `this` Keyword

In browser JavaScript, global variables and functions automatically become properties of the window object.

Example

var language = "JavaScript";

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

Behind the scenes, the browser interprets this as:

window.language = "JavaScript";
window.sayHello = function() {
    console.log("Hello Developer");
};

So these are equivalent:

console.log(language);
console.log(window.language);

Both return:

JavaScript

`this` at Global Level

At the global scope in browsers:

console.log(this === window);

Output:

true

This means the global execution context refers to the window object.

Key Properties of the Window Object

The Window object contains several important properties that provide access to browser capabilities.

1. `window.document` — Accessing the DOM

The document property refers to the DOM (Document Object Model) representing the HTML page.

console.log(window.document);

Example usage:

document.getElementById("title");

Even though we write document, internally it is:

window.document

The document object allows JavaScript to:

read HTML elements
modify content
attach event listeners
manipulate styles

2. `window.location` — URL Manipulation

The location object provides information about the current page URL.

console.log(window.location.href);

Example:

window.location.href = "https://google.com";

This redirects the browser to a new page.

Useful properties:

Property	Description
`href`	Full URL
`hostname`	Domain name
`pathname`	Page path
`protocol`	http / https

Example:

console.log(location.hostname);

3. `window.history` — Browser Navigation

The history object allows navigation through the browser session history.

Example:

history.back();

Equivalent to clicking the back button.

Other methods:

history.forward();
history.go(-2);

Use cases include:

single-page applications
navigation control
custom routing systems

4. `window.navigator` — Browser Information

The navigator object provides information about the user’s browser and device.

Example:

console.log(navigator.userAgent);

It can reveal:

browser type
operating system
device type
language settings

Example:

console.log(navigator.language);

5. `window.localStorage` and `sessionStorage`

These APIs allow storing data inside the browser.

Local Storage

Data persists even after the browser closes.

localStorage.setItem("theme", "dark");

Retrieve data:

localStorage.getItem("theme");

Remove data:

localStorage.removeItem("theme");

Session Storage

Data persists only during the browser session.

sessionStorage.setItem("user", "Bhupesh");

When the tab closes, the data disappears.

Important Methods of the Window Object

The Window object also provides several utility methods.

1. Dialog Boxes

Alert

alert("Welcome to JavaScript");

Displays a message box.

Prompt

let name = prompt("Enter your name");

Allows user input.

Confirm

confirm("Are you sure?");

Returns:

true or false

2. Timers

Timers allow delayed or repeated execution.

`setTimeout`

Runs code once after a delay.

setTimeout(function() {
   console.log("Hello after 3 seconds");
}, 3000);

`setInterval`

Runs code repeatedly.

setInterval(function() {
   console.log("Running every second");
}, 1000);

3. Window Manipulation Methods

`window.open()`

Opens a new browser window.

window.open("https://openai.com");

`window.close()`

Closes the current window (if opened via script).

window.close();

`window.scrollTo()`

Scrolls to a specific position.

window.scrollTo(0, 500);

This scrolls the page 500px down.

Difference Between `window` (BOM) and `document` (DOM)

Many beginners confuse BOM and DOM, but they serve different roles.

Feature	Window (BOM)	Document (DOM)
Represents	Browser window	HTML document
Purpose	Browser control	Page content manipulation
Example	location, history	getElementById
Level	Top-level object	Child of window

Structure:

Window (BOM)
   └── Document (DOM)
         └── HTML Elements

Example relationship:

window.document.body

Best Practices

1. You Usually Don’t Need to Write `window`

Because the window object is global, writing it explicitly is optional.

Example:

alert("Hello");

Internally the browser reads this as:

window.alert("Hello");

2. Avoid Global Variables

Since global variables attach to window, excessive globals can pollute the environment.

Bad practice:

var user = "Bhupesh";

Better practice:

const app = {
   user: "Bhupesh"
};

3. Use Storage Carefully

Avoid storing sensitive data like:

passwords
authentication tokens

inside localStorage.

Final Thoughts

The Window object is the backbone of browser-based JavaScript. It provides access to:

the DOM (document)
browser navigation (history)
URL control (location)
client storage (localStorage)
timers and dialog boxes

By understanding the Window object, developers gain deeper insight into how JavaScript communicates with the browser environment.

In simple terms:

If JavaScript is the brain of a web page, the Window object is the entire operating system of the browser tab.

Mastering it will significantly improve your ability to build interactive, browser-aware applications.

Dom(Document Object model/Methods )in JavaScript

Bhupesh Chandra Joshi — Mon, 16 Mar 2026 12:57:51 +0000

What is DOM(Document Object model)? We are discussing the methods ,without methods our dom will not work.

Tree representation of Html elements, Suraj kumar Jha, he is mentor in chaicode, discussed , what do I think?
It is a API(Application programming interface) for communicating with Html documents. Dom is client-side programming language, it creates a tree structure of html elements.

Selecting Document Elements
In client side javascript , we often need to modify one or more elements within our website. We have document object, we need to select the particular element from the web page, we select the elements with css selectors.

querySelector()
mdn states that the query selector returns the first element which matches within the css selector.

syntax:

querySelectorAll()
This method returns the node list which is list of documents within page. You know that array is similar to Pill strip of fungal infection, and also contain the length property, index starts from 0, NodeList are iterable , they allow you to use for/of and you can also able to use the tradition for loop also.

Pass NodeList to Array.form() method , and you will get a true array.

** getElementsByClassName **
1-It will return all the elements which have class name for ex- "masterji"
2- It returns group/ collection of html elements, which is also known as HTMLCollection.

Difference between the NodeList and HtmlCollection

The new Keyword in JavaScript

Bhupesh Chandra Joshi — Mon, 16 Mar 2026 05:16:54 +0000

What the new keyword does?
New Keyword in JavaScript is a way to create object by intializing the object constructor. Let's visit blog practically, we can create , give name to objects and assign the properties to the object(your old friend- properties are just like jeans, belt ,shirt and you can assign a wearing Cloths function.)

let girlFriend=null; // null because I don't have girlfriend.

Constructor functions
why I have created small letter of assignProperty(girlfriend) function signature? Before jumping into this, let's visit what is constructor frist? constructor is a sepecial function that can initialize the object or adds values to key of an object. This time we will create new girlfriend / girlfriend should only one, but don't mind ,it's just a program and we will initilize ,girlfriend's properties here.

Object creation process

We have two ways Object creation , the first will be object literal and second way we have discussed first. The object constuctor initialization.

let student={};

// This is a way , and considered the best practice to create an object.

How new links prototypes

If you will be observe it clearly that prototype is just an object, that inherited from your in built constuctor from object class that provides the information about constructor. when you add a functionName.prototype.fullName="New function full name will be added";

Instances created from constructors

When we create a instance then we will inherit from Object.prototype, and even javaScript has ways to prevent prototype creation.

1-Object.create(null)
2-Object.freeze(Object.prototype)

The Magic of this, call(), apply(), and bind() in JavaScript

Bhupesh Chandra Joshi — Thu, 12 Mar 2026 11:48:10 +0000

What this means in JavaScript
You know that rumours are the mistruths which spread early and this keyword refers to the function it appears ,it is mistaken, The value of this determined dynamically(how it is invoked) , not on the function definition. If you want to understand this well, you

The prototype mechanism is a look-up chain for properties and inheritance and this is related to prototype mechanism. The concept of fake classes arrived from the this mechanism, classes mimic the objects / functions. if you can create a object of a function,

Authers said the desire to bring class and inheritance design pattern thinking to JavaScript is just about the worst thing you could try to do. The syntax can do a lot with you, you wonder that classes are present,classes are based on prototypal inheritance,it is considered as you are implementing the inheritance.

You know about the behavior delegation. This is more than syntactic preference. Delegation is an entirely different, and more powerful, design pattern, one that replaces the need to design with classes and inheritance. I will explain what this means, it adds the prototype property on the object and instead of copying ,it leverages the principle of link, if you add a new property to the prototype, you can access it later.Learn and embrace how the object prototype system actually works. You need to understand the thinking of javaScript, the recommended inheritance is javaScript is prototype chaining for performance.

Performance Considerations
1-Memory Efficiency
2-Property Lookup Time
3-Optimization by Engines

this inside normal functions
JS Rule: We leverage this as window (global) object in normal function or undefined in Strict mode.

This doesn't have any home,it can be anywhere.

This inside object:
When a function inside a object,in such case this points to that object.

abhishek.speak(), means this is Abhishek this time. Let's consider, Abhishek,a groom in movie and he speaks i am looking handsome,
So this is Abhishek and he is talking about himself.

What call() does
It depicts which actor will deliver the dialogues. We know about code borrowing and call method is just like object borrowing. It's method borrowing on inheritance,you must understand this by this image.

What apply() does
Apply() method leveraged for the changing the object associated with this.

What bind() does
bind freezes the this to perticular object. So, you can't able to change the value of this by apply.

At the Risk of Comparison a mobile blog on Operators.

Bhupesh Chandra Joshi — Thu, 12 Mar 2026 03:17:43 +0000

Let's start with pemdas rule of operator precedence

Pemdas consists of Parentheses, Exponents, Multiplication and Division , Addition and Subtraction.

All performed left to right,as you write English,hindi and coding,all are performed and written left to right.

We will capable to remember this by formula "pemdas comparison logically".

You are familiar with the BODMAS rule of the mathematics which assists javascript to decide for operator precedence.

B deside the order ( ), { }, [ ] which will resolve first and of play with power and exponents.

D / M accomplished the left to right,
A / M- Addition and Subtraction achieved left to right.

We have covered Arithmetic operators (+, -, *, /, %) in terms of formula, which will be helpful, when you solve a problem of any programming languages and operators are same on every language.

Comparison operators (==, ===, !=, >, <)

The main difference between == and === .
== accomplishes type coercion (type conversion) ,when comparing values(let's compare notes , from the decorated office | space is true or false, how is ambience, it is just identical to the comparision operators), so values of different types may be considered equal after coercion. For example, 0 == false is true, "" == false is true,''=='' is true, and null == undefined is true. These are the famous bugs of javascript, people love these bugs and left them in JavaScript to make js backword compatible.

The === operator tests stringent(strict) equality: it only returns true if both value and type are exactly the same, with no type coercion. For example, "" === false is false.

The best practice recommends to influence yourself to leverage three-character operator === and !==). the reason when you want the types match.

The === strict comparision operator doesn't perform the type coercion when compared, and compare arrays, functions, you will obtain the comparsion with help of their refernce.

Reference vs. Value: array1 == array2 checks if they are the same instance (reference), not if they have the same elements.

Memory Location: If two different arrays contain the same values, == will return false.

, < why they are made, money > respect or money < respect , we will use this example to make you understand, why these are leveraged and these logical operators deliver the boolean value.

Image description

Logical operators (&&, ||, !)
These concepts orignated from the digital electronics and these are backbone of computer science
What does the Logical AND (&&) operator do?

Answer: It evaluates operands from left to right,just similar to moving left to right, returning the first falsy value it encounters. If all operands are truthy, it returns the last value.
Example: console.log(" " && true && 10); // Returns 10

What are the truthy and falsy values in JavaScript?
Falsy Values are converted to zero / false ,when you are performing any logical operation.

for example-

false (the Boolean value itself)
0, -0, and 0n (the number zero, negative zero, and BigInt zero)
"", '',


 (an empty string)
null
undefined
NaN (Not a Number)
document.all (a legacy, deprecated object used for backward compatibility)

||- denoted as logical or operator and It returns the fist of two operands that is true.If the leftmost value is true, it returns that; otherwise, it returns the second value.It is often used to set default values.
console.log(null || "Hello");


Short-circuiting: It stops evaluation as soon as it finds the first truthy value.
Example:  -> result will be "Hello" because null is a falsy value.
Default value: let name = userInput || "Guest"; (If userInput is empty/undefined, "Guest" will be set). 

Truthy vs. Falsy Values:
In JavaScript, false, 0, "" (empty string), null, undefined, and NaN are considered 'falsy', while everything else is 'truthy'. 





Assignment operators (=, +=, -=)

Consider assignment is delegation a value or operation to a different variable.
apple=mango(Now apple and mango tastes similar sweet) ,

iceAge+=PipinghotEra is shortcut for iceAge=iceAge+PipinghotEra
,-=(it is also written similarly).

The Heart of Node Js Architecture

Bhupesh Chandra Joshi — Wed, 11 Mar 2026 14:34:41 +0000

To understand node js architecture, we need to understand the working of node js.
Node Js Architecture describes the working of node js, how node js work, are you reading at office or home, fold your sleaves ang get ready for 3 min glimse.

Node js is single threaded language and reactor pattern is heart of asychrononous in Node js.

Asychronous is Non-blocking() ,you and your team will not stop you till plant a tree operation is successful, it's possible that your friend Abhishek has planted a tree and you are still digging the whole, you started parallelly, for example you are picking the customer info from database, the email operation will be start in parallel and it will run together the complex task will take time and easy one
sending one email will be performed early.

Reactor pattern represents the handler or callback to handle i/o operations. The callback will be invoked when an event processed by the event loop.

There are a lot of misconceptions around the event loop of nodejs, and reactor pattern elaborated about the event loop.

1-We have a game developed with node js for example
call of duty, it has names like james, who works on
the army they have thier life too. When game(app) sends a i/o request to the handler and handler is part of event demultiplexer and handler returns the message to your application after affect from bumb, the health decrease message. When the i/o operation completes(In case of call of duty)- Gun Sound, hitting the target,missing the tarket and updating the health, capsule then increasing the health etc.

2-Event demultiplexer has a hander (callback function), and event demultiplexer outsource the events into the
event queue. The Event Loop iterates over((print)) the items of the Event Queue.

When event queue is full, it blocks the event demultiplexer and event loop is performing the operation of event and associated handler from event
loop parallelly when task is complete ,app sends the control back to event loop, app means call of duty game. You will understand more clearly with this diagram.

Libuv (the I/O engine of Node.js)-

It is a pure c library and it's not a thread,and in order to simulate non-blocking behavior, it is necessary to use a separate thread outside the event loop.

We have thread pool which is collection of pre created
threads ,and parallel execution context (called runner) is additional thread, now node js breaks it's principle node js is a single threaded language.

The reason to create libuv is Node.js compatible with all the major operating systems to provide os level async i/o. Libuv portrays the low-level
I/O engine of Node.js and it is most imp component of
node js.

libuv also enacts the reactor pattern, it provides API for creating event loops,mananging the event queue, and running asynchronous I/O operations, and queuing other types of task.

** Event loops**

The responsibility of gathering events from the operating system or monitoring other sources of events is handled by libuv, and the user can register callbacks to be invoked when an event occurs. The event-loop usually keeps running
forever. In pseudocode: you have seen a while true
loop and loging on console runs always.

Google V8 Engine:

It's javaScript runtime enviromment for executing the
javaScript code from outside browser and inside server. It is orignally developed for google chrome by google team and that is the reason node js is fast.

Who will help the v8 and libuv library to talk with each other, the answer is binding ,the code responsible for this purpose. An example is a binding for database libraries.
V8 has no native understanding/cognition of databases, and database libraries don't care who uses them, so a binding is needed to make sure the two can talk to each other.

V8 engine leverages the Just In Time(JIT) compilation pipeline design pattern to execute Js code that is the reason ,js is fast.

What are the advantages of Global and Global this:?

Bhupesh Chandra Joshi — Wed, 11 Mar 2026 07:40:19 +0000

Global is the javascript keyword introduced when javascript was commenced.

These Global objects are present in all modules in javascript on backend(you can call them node js modules), we are discussing the backend , some of the objects which you are utilizing and experimenting on your coding, they arrived from node js.

__dirname
You may be aware of this global variable, I don't this object this, we chat on instagram, facebook and the global means elders who can have access of your social media, same way this variale knows about your directory where you are executing your tasks.

*__filename *
When we engaged in refactoring any project, we need to adopt the speed, in comparative mananage, if you console.log(__filename), you will understand,what was the difference from previous command on blog.

exports-
We are fan of this varible who is our best friend when we performed the named export of our code. This is a OBJECT WHOSE INTITIAL VALUE IS EMPTY.

When you address the type of export , you will get console error and it is excelent may to maintain code functions and data into module,and then you will realize about the importance of this code,when you import your code in your project.
console.log(typeof export)

module-
Module is an object, because everything is object in javaScript, If you call ecma script developers,what they discuss about module, we dicussed about import and export, you know that import and exports are the module, we module our code in bundle,so that wood packet, we will be reuse, as require.

require()-
it is an older way to import the node modules from the node js and it's common js way to import.

It provides you the all the code files which require consist of, but if you are be aware of import keyword, you also grab the necessary code for your projects.

Global This:
When you know the history of global this, the access to this object changed, now it's updated to arrived in ECMAScript 2020 , a single and easy way to access the golab object.

The modern way is quite simplified in es2020:

The Relationship Between TypeScript and JavaScript

Bhupesh Chandra Joshi — Mon, 09 Mar 2026 08:07:58 +0000

You can consider javaScript is typescript without types, both are same, but difference , typescript adds additional syntax for specifying types. Let's understand the typescript.

what typescript has a type-checker? Yes,typescript type checker is a part of compiler and it checks the types of typescript and throws the error,if it doesn't find any types associated with it. Before converting your typescript code, type checker dances without and checks the type errors on the code.

If you have a javacript code, you want to migrate it to typescript, you don't need to write the code again, just you need to change the extention and embedded the .ts or tsx extention at the end.

Who is the Seasoned JavaScript Developer

Bhupesh Chandra Joshi — Sun, 08 Mar 2026 05:20:54 +0000

There are some key characteristics of a Seasoned javaScript developer.

1-Focus on Fundamentals : focus on the trusted fundamental meaning ,a developer who reads lot of most recommended books in JavaScript ,for example ,you don't know js (six book series), at least every developer should read.

2- Best Practices: How do you get the best practices and the answer is widely used best practices covered by chaicode youtube and the most read javaScript books, understanding the rabbit hole of a topic is quite important.

3- Advanced Concepts: A seasoned developer must know concepts like closures , hoisting ,this and Asynchronous JavaScript(because JavaScript is single threaded, you writing the synchronous will be considered the bad practice).

4- ALl seasoned developer asks why this imp? Before we jump into code, we should examine the thinking behind the problem.

If you don't know this ,you don't know the javaScript itself, when you pass a parameters ,the readiness of code decreased, so we pass this inside function.

Confused mechanism of JavaScript This & Global [This]

Bhupesh Chandra Joshi — Sun, 08 Mar 2026 04:22:28 +0000

One of the most confused machanism of JavaScript is the this keyword. I don't need a local scope; I have global power and this context.this is my current context, but global is my playground.Why restrict yourself to one function? Use global to make this variable everyone's problem!.

"Local variables stay in the closet, but global brings this variable to the party. "

When feel thoughless or stuck a problem, search on social media, youtube ,and watch a video which will reset you to the global state. Global this is standard way to access global window object.

You can define a global variable like this
globalThis.party = "Feeling stuck,let's party and have a fun and enjoy with friends" @piyushgargdev

This is a special identifier that's automatically defined in score of every person. for example we create a input field and this keyword is used to reference the form keyword.

DEV Community: Bhupesh Chandra Joshi

Serialization and Deserialization a long drive

Template Literals in JavaScript

Template Literals in JavaScript: Writing Cleaner and Smarter Strings

The Problem with Traditional String Concatenation

Example (Old Approach)

Output

Issues with this approach

Template Literals Syntax

Basic Example

Output

Before vs After (Comparison)

Traditional Concatenation

Template Literals

Embedding Variables in Strings (String Interpolation)

Example

Output

Multi-line Strings

Old Approach

With Template Literals

Real-World Use Cases in Modern JavaScript

1. Dynamic HTML Generation

2. Logging and Debugging

3. Building API URLs

4. Generating SQL Queries (Backend Example)

Visualization: String Interpolation Concept

When Should You Use Template Literals?

Key Takeaways

Final Thoughts

Understanding the JavaScript Window Object

Understanding the JavaScript Window Object: The Browser’s Global Powerhouse

What is the Window Object?

Global Scope and the this Keyword

Example

this at Global Level

Key Properties of the Window Object

1. window.document — Accessing the DOM

2. window.location — URL Manipulation

3. window.history — Browser Navigation

4. window.navigator — Browser Information

5. window.localStorage and sessionStorage

Local Storage

Session Storage

Important Methods of the Window Object

1. Dialog Boxes

Alert

Prompt

Confirm

2. Timers

setTimeout

setInterval

3. Window Manipulation Methods

window.open()

window.close()

window.scrollTo()

Difference Between window (BOM) and document (DOM)

Best Practices

1. You Usually Don’t Need to Write window

2. Avoid Global Variables

3. Use Storage Carefully

Final Thoughts

Dom(Document Object model/Methods )in JavaScript

The new Keyword in JavaScript

The Magic of this, call(), apply(), and bind() in JavaScript

At the Risk of Comparison a mobile blog on Operators.

The Heart of Node Js Architecture

What are the advantages of Global and Global this:?

The Relationship Between TypeScript and JavaScript

Who is the Seasoned JavaScript Developer

Confused mechanism of JavaScript This & Global [This]

Global Scope and the `this` Keyword

`this` at Global Level

1. `window.document` — Accessing the DOM

2. `window.location` — URL Manipulation

3. `window.history` — Browser Navigation

4. `window.navigator` — Browser Information

5. `window.localStorage` and `sessionStorage`

`setTimeout`

`setInterval`

`window.open()`

`window.close()`

`window.scrollTo()`

Difference Between `window` (BOM) and `document` (DOM)

1. You Usually Don’t Need to Write `window`