DEV Community: Vasanth S

Understanding Promise vs Promise.all() in JavaScript

Vasanth S — Fri, 26 Sep 2025 15:24:44 +0000

In JavaScript,
Promises help handle asynchronous operation in clean and structured way. When works with multiple asynchronous tasks, managing them individually can be tricky.

Promise.all() runs a multiple promises in parallel and handle all their results together.

Promise

A Promise is an object that represents eventual completion or failure of an asynchronous operation.

It can be in one of three states

Pending – initial state, neither fulfilled nor rejected.
Fulfilled – the operation completed successfully.
Rejected – the operation failed.

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Success!");
        // reject("Error!");
    }, 1000);
});

promise.then(result => console.log(result))
       .catch(error => console.log(error));

//Here, a single asynchronous task is being handled.

Promise.all() is method that takes an array of promises and returns new promise that resolves when all of the promises resolve, or rejects if any one promise rejects.

Key points:

Waits for all promises to finish.
Returns results in the same order as the input promises.
Fails fast if any promise rejects.

const promise1 = Promise.resolve(1);
const promise2 = new Promise(resolve => setTimeout(() => resolve(2), 1000));
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
       .then(results => console.log(results)) // [1, 2, 3]
       .catch(error => console.log(error));

Feature	`Promise`	`Promise.all()`
Input	Single async operation	Array of promises
Output	Result of one operation	Array of all results
Rejection	One promise fails, only it fails	Any one promise fails, entire rejects
Use case	Single async task	Multiple async tasks in parallel

Understanding express.json() in Express.js

Vasanth S — Fri, 26 Sep 2025 11:41:19 +0000

When building a backend application with express, handling a incoming request data is common.
One of the most frequently used type of data is JSON.
This is where express comes to play.

express.json() reads JSON data in the incoming request body and converts into Javascript Object that can easily access in route handlers.

Why Do We Need express.json()?

HTTP requests often send data in the body, especially in POST requests. Without parsing, Express doesn’t automatically understand JSON format.

For example:

{
  "name": "Vasanth",
  "email": "vasanth@example.com"
}

If try to access req.body without using express.json(), it will be undefined.

app.post('/users', (req, res) => {
    console.log(req.body.name); // Works only if express.json() is used
    res.send('User received');
});

How to Use express.json()

const express = require('express');
const app = express();

// Middleware to parse JSON data
app.use(express.json());

app.post('/users', (req, res) => {
    const user = req.body;
    res.send(`User ${user.name} with email ${user.email} added successfully!`);
});

app.listen(8000, () => {
    console.log('Server running on port 8000');
});

Middleware in Express.js – A Complete Guide

Vasanth S — Fri, 26 Sep 2025 11:26:01 +0000

Middleware are function that runs between request from the client and response from the server.

Each middleware function has access to :

req - request object
res- response object
next() - a function that pass control to next middleware.

Signature of middleware function

function middlewareName(req, res, next) {
  // Do something
  next(); // move to next middleware
}

if forgot to call next(), the request-response cycle will hang.

Express has 5 types of middleware:

Application-level
Router-level
Built-in
Third-party
Error-handling

Application-level middleware

Bound to an app object using app.use() or app.METHOD().
Runs for every request or specific routes.

app.use((req, res, next) => {
  console.log("Application middleware executed");
  next();
});

Router-level Middleware

Works the same as application-level, but bound to an express.Router() instance.
Useful for modular route handling.

const router = express.Router();
router.use((req, res, next) => {
  console.log("Router middleware executed");
  next();
});
app.use("/api", router);

Built-in Middleware

Comes with Express by default.

Common ones are:

express.json() → parse JSON body
express.urlencoded() → parse form data
express.static() → serve static files

app.use(express.json());
app.use(express.static("public"));

Third-party Middleware

Installed via npm to add extra features.

Examples:

morgan → request logging
cookie-parser → parse cookies
cors → handle cross-origin requests
helmet → security headers

const morgan = require("morgan");
app.use(morgan("dev"));

Error-handling Middleware

Special middleware with 4 parameters: (err, req, res, next).
Used to handle errors globally.

app.use((err, req, res, next) => {
  console.error(err.message);
  res.status(500).send("Something broke!");
});

What is the DOM in JavaScript?

Vasanth S — Tue, 05 Aug 2025 18:05:42 +0000

The DOM (Document Object Model) is a programming interface that makes a website interactive and dynamic by allowing JavaScript to work with HTML and CSS.

The DOM turns your web page into a tree of objects that JavaScript can read, modify, or remove.

Example:

<h1>Hello World</h1>

document.querySelector('h1').textContent = "Hello JavaScript!";

Why DOM is important?

Change text, images, and styles
Handle user clicks and events
Add or remove elements
Build dynamic, interactive websites

JavaScript Data Types Simplified

Vasanth S — Tue, 05 Aug 2025 17:56:44 +0000

JavaScript Data Types

JavaScript has two main types:
Primitive and Non-Primitive (Reference).

Primitive Data Types - These store single values and are immutable.

Data Type	Description	Example
`String`	Text data	`"Hello"`
`Number`	Numeric values	`42`, `3.14`
`Boolean`	True or false	`true`, `false`
`Null`	Intentional empty value	`null`
`Undefined`	Variable not assigned	`undefined`
`BigInt`	Large integers	`12345678901234567890n`
`Symbol`	Unique identifier	`Symbol("id")`

Non-Primitive (Reference) Data Types - These store collections or complex data.

Data Type	Description	Example
`Object`	Key-value pairs	`{ name: "Vasanth", age: 25 }`
`Array`	List-like objects	`[1, 2, 3]`
`Function`	Reusable blocks of code	`function greet() {}`

These are the data types used in JavaScript. I will explain each of them in detail in upcoming posts.

CSS Selectors: Definitions and Examples

Vasanth S — Tue, 05 Aug 2025 17:49:09 +0000

CSS Selectors are used to find or select HTML element that you want to style

These are divided into categories

Universal Selectors
Selects all elements on the page

Example:

* {
  margin: 0;
  padding: 0;
}

Type Selector (element)
Selects all elements of the specified type.

Example:

p { color: blue; }

Class Selector (.classname)
Selects all elements with a specific class.

Example:

.box { border: 1px solid black; }

ID Selector (#idname)
Selects the element with the specific ID.

Example:

#header { font-size: 20px; }

Grouping Selector (A, B)

Applies the same styles to multiple selectors.

Example:

h1, h2, p { color: green; }

Descendant Selector (A B)

Selects elements inside another element.

Example:

div p { font-style: italic; }

Child Selector (A > B)

Selects direct child elements only.

Example:

ul > li { list-style-type: circle; }

Adjacent Sibling Selector (A + B)

Selects the element immediately after the specified one.

Example:

h2 + p { color: red; }

General Sibling Selector (A ~ B)

Selects all siblings after a specified element.

Example:

h2 ~ p { font-weight: bold; }

Attribute Selector ([attr])

Selects elements with the given attribute.

Example:

input[required] { border: 1px solid red; }

Attribute with Value ([attr="value"])

Selects elements with a specific attribute value.

Example:

input[type="text"] { width: 150px; }

Pseudo-class Selector (:pseudo-class)

Selects elements in a specific state or condition.

Example:

a:hover { color: orange; }

Pseudo-element Selector (::pseudo-element)

Styles specific parts of an element.

Example:

p::first-letter { font-size: 30px; }

:first-child Selector

Selects the first child of its parent.

Example:

li:first-child { color: blue; }

:last-child Selector

Selects the last child of its parent.

Example:

li:last-child { color: red; }

:nth-child(n) Selector

Selects the nth child of its parent.

Example:

li:nth-child(2) { background: yellow; }

:not(selector) Selector

Selects elements that don’t match the given selector.

Example:

p:not(.info) { color: black; }

:checked Selector

Selects checked checkboxes or radio buttons.

Example:

input:checked { outline: 2px solid green; }

:disabled and :enabled

Selects form elements based on whether they are disabled or enabled.

Example:

input:disabled { background: #eee; }

:empty Selector

Selects elements with no children or text.

Example:

div:empty { display: none; }

The above content is just an introduction to the CSS selectors I know. If I learn anything new, I will share it later. Thank you for reading and for your patience.

Essential JavaScript Methods You must Know

Vasanth S — Wed, 30 Jul 2025 12:04:31 +0000

JavaScript provides many built-in methods that make coding easier. Here are some of the most commonly used methods with their definitions, syntax, and examples.

toUpperCase() - Converts a string to uppercase letters.

Syntax :
string.toUpperCase()

Example :

let name = "hello";
console.log(name.toUpperCase()); // Output: "HELLO"

toLowerCase() - Converts a string to lowercase letters.

Syntax :
string.toLowerCase()

Example :

let name = "HELLO";
console.log(name.toLowerCase()); // Output: "hello"

trim() - Removes whitespace from both ends of a string.

Syntax :
string.trim()

Example :

let text = "   Hello World!   ";
console.log(text.trim()); // Output: "Hello World!"

includes() - Checks if a string contains a specific substring.

Syntax :
string.includes(searchValue)

Example :

let sentence = "JavaScript is powerful";
console.log(sentence.includes("powerful")); // Output: true

push() - Adds new elements to the end of an array.

Syntax :
array.push(element1, element2, ...)

Example :

let numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers); // Output: [1, 2, 3, 4]

pop() - Removes the last element from an array and returns it.

Syntax :
array.pop()

Example :

let fruits = ["apple", "banana", "mango"];
fruits.pop();
console.log(fruits); // Output: ["apple", "banana"]

shift() - Removes the first element from an array.

Syntax :
array.shift()

Example :

let colors = ["red", "green", "blue"];
colors.shift();
console.log(colors); // Output: ["green", "blue"]

unshift() - Adds new elements to the beginning of an array.

Syntax :
array.unshift(element1, element2, ...)

Example :

let cars = ["BMW", "Audi"];
cars.unshift("Tesla");
console.log(cars); // Output: ["Tesla", "BMW", "Audi"]

slice() - Returns a shallow copy of a portion of an array or string.

Syntax :
array.slice(start, end)

Example :

let animals = ["cat", "dog", "rabbit", "lion"];
console.log(animals.slice(1, 3)); // Output: ["dog", "rabbit"]

splice() - Adds/removes elements from an array.

Syntax :
array.splice(start, deleteCount, item1, item2, ...)

Example :

let items = ["pen", "pencil", "eraser"];
items.splice(1, 1, "marker");
console.log(items); // Output: ["pen", "marker", "eraser"]

map() - Creates a new array by applying a function to each element.

Syntax:
array.map(callback)

Example :

let nums = [1, 2, 3];
let squared = nums.map(n => n * n);
console.log(squared); // Output: [1, 4, 9]

filter() - Returns elements of an array that satisfy a condition.

Syntax :
array.filter(callback)

Example :

let ages = [12, 18, 25, 30];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 25, 30]

reduce() - Reduces an array to a single value.

Syntax :
array.reduce(callback, initialValue)

Example :

let nums = [1, 2, 3, 4];
let sum = nums.reduce((total, n) => total + n, 0);
console.log(sum); // Output: 10

forEach() - Executes a function for each array element.

Syntax :
array.forEach(callback)

Example ::

let fruitsList = ["apple", "mango", "orange"];
fruitsList.forEach(fruit => console.log(fruit));

sort() - Sorts elements of an array.

Syntax :
array.sort(compareFunction)

Example :

let numbersList = [4, 2, 9, 1];
numbersList.sort((a, b) => a - b);
console.log(numbersList); // Output: [1, 2, 4, 9]

indexOf() - Returns the index of the first occurrence of an element.

Syntax :
array.indexOf(element)

Example :

let langs = ["JS", "Python", "C"];
console.log(langs.indexOf("Python")); // Output: 1

replace() - Replaces a substring with another in a string.

Syntax :
string.replace(searchValue, newValue)

Example :

let greet = "Hello World";
console.log(greet.replace("World", "JS")); // Output: "Hello JS"

So here are the methods most commonly used by developers. Thanks for reading! See you soon with another exciting topic.

How JSON.stringify() Works in JavaScript

Vasanth S — Wed, 30 Jul 2025 06:29:57 +0000

JSON.stringify() is Javascript built-in method that converts Javascript object or value into JSON string.

The syntax of JSON.stringify is
JSON.stringify(value, replacer, space)

Parameters:

value – The object or value to convert.
replacer (optional) – A function or array that filters properties.
space (optional) – Adds indentation, spaces, or line breaks for readability.

Why Do We Use JSON.stringify()?

To send data to APIs - Most APIs expect data in JSON format.
To store data - When saving object in localstorage or database, they must be string.
To debug easily - It’s helpful to see object structures as strings.

Real-World Use Case

fetch("/api/save", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "David", email: "david@example.com" })
})

Understanding the Compiler and Interpreter

Vasanth S — Mon, 07 Jul 2025 17:28:08 +0000

A Compiler and an Interpreter are both used to convert high-level programming code into machine language.
They work differently in how and when they translate the code.

Compiler :

Compiler translates the entire code into machine code at once.
It converts high level code into executable files.
After compilation, the program can run without using compiler.
Compilation usually takes time before execution starts.
If any error occurs in entire code it will shown after the whole code is compiled.
It makes the programs run faster after compilation.
Compiler check the entire code for syntax error at once.
Once compiled, you can run the program multiple times quickly.
It is suitable for large programs that require performance.
Examples of compiled languages: C, C++, Java.

Interpreter :

An interpreter translates and runs code line by line.
It doesn’t create a separate executable file.
The program runs directly, starting from the first line.
If any error occurs in entire code it will shown immediately when the faulty line runs.
It is slower than a compiler because it translates in real-time.
Interpreted code is easier to test and debug.
Code needs the interpreter every time it runs.
It’s great for beginners and quick script testing.
It’s ideal for small programs and learning purposes.
Examples of interpreted languages: Python, JavaScript, PHP.

Conclusion :
Both compiler and interpreter have their own advantages based on the use case.
Understanding their differences helps in choosing the right tool for programming.

JavaScript Uncovered - A Simple Introduction

Vasanth S — Mon, 07 Jul 2025 17:10:24 +0000

JavaScript was introduced by Brendan Eich in 1995 while he was working at Netscape Communications.
It was originally developed in just 10 days .
The first name of JavaScript was Mocha, later renamed to LiveScript, and finally to JavaScript for marketing reasons.
JavaScript is a programming language which is doing some magic in the software world.
From website to servers, mobile apps to games - today, it rules all the domains in software industry.
It is widely used to make and build interactive web applications.
It brings life to static web pages.
It is the most essential language for front-end development.
It runs directly in the browser, without needing installation.
It supported all modern web browsers.
It can handle databases, APIs, and back-end logic too.
Popular libraries like React, Vue, and Angular are based on JavaScript.
It supports various programming styles — functional, object-oriented, and event-driven.
Its simple syntax makes it beginner-friendly and easy to learn .
With constant updates, it keeps growing stronger and more powerful.
In short, JavaScript is the magic wand of the modern tech world.

Static vs Dynamic Typed Programming Language

Vasanth S — Mon, 07 Jul 2025 16:42:35 +0000

Static and Dynamic typing are ways programming languages handle variable types.

Static checks types before running the program;
Dynamic checks types while running it.

Static Typed Language :

Variable have fixed types and types should be declared.
Checking the type at compile time.
Many error caught during compiling time.
It gives better performance because it's optimized due to known types and it's generally faster.
Code is more predictable, types remains constant, improving coding reliability.
It has less flexible.
Examples of Programming Languages are Java, C, C++, Kotlin, Rust

Dynamic Typed Language :

Variable types are determined and checked while the program runs.
Variables can be assigned without declaring data types.
It caught more runtime error.
It gives slower performance because extra work is needed at runtime to manage types.
Less syntax and setup required for simple programs.
It has more flexible.
Examples of Programming Languages are JavaScript, Python, Ruby, PHP

Conclusion :
Choosing between static and dynamic typed language depends on project needs.
Static offers better performance and safety, while dynamic offers flexibility and ease of use.

Overview : Software Development Life Cycle (SDLC)

Vasanth S — Mon, 07 Jul 2025 16:10:09 +0000

Software Development Life cycle (SDLC) is a structured process, methodology and it defines the procedure of entire software development step by step.

It used to design, develop and test for software to become quality.

The goal of the SDLC is to delivers the high quality, maintainable software that meets the users requirements.

SDLC involved six phases and stage while developing any software.

Planning and Requirements - To plan the requirements of software that is what should it do, why it is needed. Involves collects ideas and business needs rom users or clients, defining scopes and goals.
Analysis - Detailed requirements are analyzed for feasibility and clarity. Understand the problems and solutions. This helps in identifying technical, operational, and financial constraints.
System Design - Make a plan how the software will look and work. Make the screen, databases and system flow. It acts as a blueprint for how the system will function and look.
Development - Write the code based on the design specifications. The Team creates features as the software planned in design.
Testing - Testing the developed software features an to find if any error or bugs which will be fixed and make sure it works well.
Deployment and Maintenance - Completed the development and testing, the software ready to use for people use or deploy. After deployment, it is improved by adding features and fixing any bugs.

More than 50 recognized models in use for SDLC. But none of them is perfect each bring various aspects and disadvantages.
Here is the top five models are

Waterfall Model
Agile Model
V Shaped Model
Spiral Model
Iterative Model
Big Bang Model

Benefits of SDLC

Helps in planning the project properly.
Makes the goals and steps clear for everyone.
Improves the quality of the software.
Saves time and money by avoiding mistakes.
Makes the project easier to manage.
Helps teams and clients understand the work.
Finds problems early and reduces risk.
Allows regular updates and improvements.