DEV Community: Jaisurya

Functions in JavaScript

Jaisurya — Thu, 03 Sep 2026 05:32:26 +0000

A function is a reusable, self-contained block of code designed to perform a specific task. Instead of writing the same logic multiple times throughout a program, you define it once inside a function and run or call it whenever needed.

Think of a function like a kitchen blender: you put ingredients in (inputs), it performs a specific operation (processing) and it produces a smoothie (output).

Core components of a function:

Name: A descriptive identifier used to call the function (e.g., calculate_num or send_email).

Parameters(Inputs): Variables declared in the function definition that accept values (known as arguments) passed into it.

Body: The block of code that executes when the function is invoked.

Return value(Output): The final result the function sends back to the part of the program that called it.

// 1. Define the function
function calculateTotal(price, taxRate) {
  const tax = price * taxRate;
  const total = price + tax;
  return total;
}

// 2. Call the function with different values
const shirtTotal = calculateTotal(25, 0.08); // 8% tax on a $25 shirt
console.log(shirtTotal); // Output: 27

const shoesTotal = calculateTotal(80, 0.08); // 8% tax on $80 shoes
console.log(shoesTotal); // Output: 86.4

JavaScript Switch Statement

Jaisurya — Sat, 29 Aug 2026 14:59:22 +0000

In JavaScript, a switch case is a conditional statement that is used to provide a way to execute different blocks of code based on the value of an expression.

The switch statement is used to execute one block of code from multiple alternatives based on the value of an expression. It provides an alternative to multiple if else if statement when comparing a single value against several possible options.

Here is the syntax of using switch statement:

switch(expression){
   case value1:
      //code to be executed
      break;

   case value2:
      //code to executed
      break;

   default:
      //code to be executed if no case matches
}

Explanation:

expression: The value or variable that is evaluated once and compared with each case value.
case value1, case value2: These define the possible values that are compared with the expression. If a match is found, the corresponding code block is executed.
break: Terminates the current case and exits the switch statement. Without break, execution continues to the next case.
default: An optional block that executes when none of the case values match the expression. It works similarly to the else block in an if...else statement.

Javascript If-else Statement

Jaisurya — Fri, 28 Aug 2026 01:45:00 +0000

The JavaScript if-else statement is used to execute the code whether condition is true or false. There are three forms of if statement in JavaScript.

1.if statement
2.if else statement
3.if else if statement

1.JavaScript if statement

It evaluate the content only if expression is true.

//Syntax
if(expression){  
//content to be evaluated  
}  

//Example code
<script>  
let a=20;  
if(a>10){  
document.write("value of a is greater than 10");  
}  
</script>  

//Output: value of a is greater than 10

2.Javascript if else statement

It evaluates the content whether condition is true of false.

//Syntax
if(expression){  
//content to be evaluated if condition is true  
}  
else{  
//content to be evaluated if condition is false  
}  

//Example
<script>  
let a=20;  
if(a%2==0){  
document.write("a is even number");  
}  
else{  
document.write("a is odd number");  
}  
</script>  

//Output: a is even number

3.JavaScript if else if Statement

It evaluates the content only if expression is true from several expressions.

//Syntax

if(expression1){  
//content to be evaluated if expression1 is true  
}  
else if(expression2){  
//content to be evaluated if expression2 is true  
}  
else if(expression3){  
//content to be evaluated if expression3 is true  
}  
else{  
//content to be evaluated if no expression is true  
}  

//Example

<script>  
let a=20;  
if(a==10){  
document.write("a is equal to 10");  
}  
else if(a==15){  
document.write("a is equal to 15");  
}  
else if(a==20){  
document.write("a is equal to 20");  
}  
else{  
document.write("a is not equal to 10, 15 or 20");  
}  
</script> 

//Output: a is equal to 20

Javascript Objects

Jaisurya — Thu, 27 Aug 2026 13:40:52 +0000

In JavaScript, an object is a variable that can hold multiple values. It is a location where a collection of values is stored. Objects are among the most basic data types in JavaScript. Every object contains properties and types, which are a single unit. Objects are not primitive, unlike primitive data types.

For instance, take a football. A football has properties like weight, shape, color, and design. In this case, the football is an object, and its weight and shape are its properties.

Similarly, in JavaScript, objects have properties that define their nature. An object can hold various types, like Strings, Numbers, Booleans, Arrays, Functions, etc.

Syntax of Object in JavaScript

// Object literal syntax  
const myObject = {  
  key1: value1,  
  key2: value2,  
  // more key-value pairs...  
};

Explanation:

Curly braces are used to demarcate the start and termination of an object literal.
Inside these braces, you define key-value pairs separated by commas.
Every key is a string (or symbol in ES6+).
A colon comes after each key, followed by its value.
They may be of any data type like strings, numbers, booleans, arrays, functions, or other objects.

HTML & CSS Interview questions

Jaisurya — Mon, 24 Aug 2026 02:51:06 +0000

*1. What is the CSS Box Model, and how does box-sizing affect it?
*
Every element on a page is basically a rectangular box made up of four parts: content, padding, border, and margin. By default, browsers use box-sizing: content-box, which means if you set width: 200px, that's just the content area — any padding or border you add gets tacked on top, making the element bigger than you intended. This trips people up constantly. Switching to box-sizing: border-box fixes that headache by folding padding and border into your specified width/height, so the element stays the size you actually set. It makes responsive layouts way more predictable, which is why a lot of developers just apply it globally at the start of a project.

*2. What's the difference between display: block, inline, and inline-block?
*
It comes down to how the element sits in the page flow and which sizing properties actually work on it.

block — Takes up its own line and stretches to fill the available width. You can set width, height, and margins/padding on all sides and they'll behave as expected. Think

.
inline — Just flows along with the text, no line breaks. Width and height are ignored, and vertical margin/padding won't push other elements away — only left/right spacing really works. Think or .
inline-block — The best of both: it sits inline next to other elements, but you can still give it a width, height, and full padding/margin like a block element. Buttons and form inputs behave this way.

3. What are semantic HTML elements, and why do they matter?

Semantic elements are tags that actually describe what they contain — things like

, , , , and — instead of just wrapping everything in generic s and s that say nothing about their purpose.

This matters for a couple of practical reasons. Screen readers rely on these landmarks to let visually impaired users jump straight to the content they care about, rather than tabbing through endless nested divs. And search engines can better understand which part of the page is the actual content versus just navigation or boilerplate, which can genuinely help with SEO.

Software development life cycle

Jaisurya — Mon, 24 Aug 2026 02:39:30 +0000

The Software development life cycle (SDLC) is a structured, step by step process used by software engineering teams to design, develop, test and deploy high quality software efficiently and cost effectively.

Key phases in SDLC:

Planning and Requirement Analysis: Gathering stakeholder needs, defining the scope, estimating costs, and assessing project feasibility.

Design: Creating the software architecture, data models, system interfaces, and technical specifications based on the requirements.

Development: Developers write the actual source code according to the design documents, breaking the workload into modules.

Testing: Quality Assurance (QA) teams test the software for bugs, security vulnerabilities, performance bottlenecks and compliance with original requirements.

Deployment: Releasing the software to a live production environment so end-users can access it.

Maintenance: Ongoing monitoring, patching bugs, applying security updates, and adding new features based on user feedback.

Javascript features

Jaisurya — Tue, 18 Aug 2026 14:26:59 +0000

JavaScript is a programming language that lets developers create interactive web pages. It is a high-level and interpreted programming language that is primarily used for building interactive and dynamic websites.

JavaScript is one of the most popular programming languages, which includes several features when it comes to web development. Some of its key features are lightweight, dynamic, functional, and interpreted.

Lightweight & Interpreted (JIT-Compiled): Executes directly in environments like browsers or Node.js without requiring prior manual compilation, utilizing Just-In-Time (JIT) compilers for fast runtime performance.

Dynamically Typed: Variable types are resolved at runtime rather than compile-time, meaning a single variable can hold different data types over its lifecycle without explicit type declarations.

Single-Threaded with Asynchronous Processing: Uses a single main call stack paired with an Event Loop (microtask and macrotask queues) to handle non-blocking asynchronous operations such as API requests, timers, and file I/O.

Hoisting

Jaisurya — Fri, 14 Aug 2026 03:10:17 +0000

Hoisting in JavaScript is the engine’s behavior of moving declarations to the top of their scope (global or local) before execution. Because of hoisting, you can reference functions or variables in your code before the lines where they are defined.

1.Function Declaration
Function declarations are hoisted in their entirety—both the declaration and the body. This means you can call a function before it appears in the source code.

hello(); //Output: hello!
function hello(){
   console.log("hello!")
}

2.var Declaration
When you use var, JavaScript hoists the variable declaration, but not its assignment. Until the execution line reaches the assignment, the variable holds undefined.

console.log(num); //Output: undefined
var num = 10;
console.log(num); //Output: 10

Javascript Variable

Jaisurya — Wed, 12 Aug 2026 13:24:09 +0000

In JavaScript, a variable is a named storage location that holds a value, which can be any data type, such as numbers, strings, boolean, etc. It can be declared using keywords like var, let, or const.

1.var
var is function scoped, it can be re-declared and reassigned.

if(true){
  var a = 10;
}
console.log(a);
//Output: 10

2.let
let is block scoped, it can be updated , but can't be redeclared in the same scope.

let x = 10;
if(true){
  let x = 35;
  console.log(x);
} 
console.log(x);
//Output:
35
10

3.const
const is also block scoped, it can't be updated, used to store constant values

const pi = 3.14;
let r = 2;
let c = 2 * pi * r;
console.log(c);
//Output: 
12.56

Security considerations in IFrame tag

Jaisurya — Thu, 06 Aug 2026 14:35:45 +0000

The (Inline frame) tag is used to embed another HTML document or web resource inside the current webpage. It essentially creates a nested browser window within your layout.</p> <p>There are security risks that can be created by using iframes unless handled in the right manner. As an example, content that uses embedded external websites can create the risk of clickjacking or script injections. To counter these:</p> <ul> <li>Take a sandbox attribute to limit the frame behaviour (block scripts, forms, or popups).</li> <li>Never leave an unverified source dangling as src, or domain, etc.</li> <li>Integrate the sandbox with the ability to allow attributes to have more precise control. </li> </ul> <div class="highlight"><pre class="highlight html"><code><span class="nt"><iframe</span> <span class="na">src=</span><span class="s">"https://www.youtube.com"</span> <span class="na">sandbox=</span><span class="s">"allow-scripts allow-same-origin"</span><span class="nt">></iframe></span> </code></pre></div> <p></p>

Tailwind CSS

Jaisurya — Mon, 03 Aug 2026 16:59:31 +0000

Tailwind CSS is a utility-first CSS framework that lets you build custom user interfaces directly in your HTML or component markup without writing traditional custom stylesheets.

Tailwind provides low-level utility classes—such as flex, pt-4, bg-blue-500, and text-center—that map directly to individual CSS rules.

How It Works (Traditional CSS vs. Tailwind)
Instead of naming classes and jumping back and forth between your HTML and CSS files, you combine utility classes directly on HTML elements.

Traditional CSS

<!-- HTML -->
<button class="custom-button">Click Me</button>

/* CSS */
.custom-button {
  background-color: #3b82f6;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 600;
}

Tailwind CSS

<button class="bg-blue-500 text-white px-4 py-2 rounded font-semibold hover:bg-blue-600">
  Click Me
</button>

Advantages

Rapid Development: You don't waste time jumping between HTML and CSS files, nor do you spend mental energy coming up with naming conventions (like BEM) for class names.
Consistent Design System: Instead of picking random pixels or hex codes, Tailwind enforces a uniform scale for spacing, typography, shadows, and colors out of the box.
No Class Name Collisions: Since styles are tied directly to utilities or components rather than global selectors, changing one element's style will never accidentally break another element elsewhere on your site.

Responsive web design

Jaisurya — Sun, 02 Aug 2026 14:48:17 +0000

Responsive Web Design is an approach to web development that makes a website automatically adapt its layout, images, and content to fit the screen size and orientation of whatever device is viewing it whether it's a desktop monitor, a tablet, or a smartphone screen.

Instead of building separate websites for desktop users (example.com) and mobile users (m.example.com), developers build one single code base that fluidly resizes.

The Three Core Technical Pillars:

Fluid Grids

Traditional web pages used fixed widths. Responsive design uses relative units like percentages, viewport units, or CSS Grid/Flexbox. Elements shrink or expand proportionally as the viewport scales.

Flexible Images & Media

Media is set to never exceed its container size using CSS rules like max-width: 100%. This prevents large images from overflowing small mobile viewports or breaking the layout.

CSS Media Queries

Media queries allow developers to apply specific CSS rules only when certain conditions are met—most commonly screen width breakpoints.

Why Responsive Design Matters

Better User Experience: Users don't have to pinch, zoom, or scroll horizontally to read content.
Cost Efficiency: Maintaining a single responsive codebase is significantly faster and cheaper than managing separate desktop and mobile versions.