DEV Community: vidhya murali

JavaScript Booleans

vidhya murali — Thu, 04 Jun 2026 05:41:01 +0000

The Boolean Data Type

In JavaScript, a Boolean is a primitive data type that can only have one of two values:

true or false

The Boolean value of an expression is the basis for all JavaScript comparisons and conditions.

Key Boolean Characteristics

true and false are boolean data types
true and false are the only possible boolean values
true and false must be written in lowercase
true and false must be written without quotes

Boolean Use Cases

Very often, in programming, you will need a data type that can represent one of two values, like:

yes or no
on or off
true or false

Boolean values are fundamental for logical operations and control flow in JavaScript programming.

Comparisons

All JavaScript comparison operators (like ==, !=, <, >) return true or false from the comparison.

Given that x = 5, the table below explains comparison:

Loops

Booleans are extensively used in loops to determine conditions for looping.

The Boolean() Function

You can use the Boolean() function to find out if an expression (or a variable) is true:

Example : Boolean(10 > 9)

Everything With a "Value" is True

Note

In JavaScript, both an empty array [ ] and an empty object { } are truthy because they are objects.
All objects in JavaScript evaluate to true in a boolean context, regardless of their content.

The Boolean value of "" (empty string) is false:

let x = "";
Boolean(x);

The Boolean value of -0 (minus zero) is false:

let x = -0;
Boolean(x);

The Boolean value of undefined is false:

let x;
Boolean(x);

The Boolean value of null is false:

let x = null;
Boolean(x);

JavaScript Booleans as Objects

Normally JavaScript booleans are primitive values created from literals:

let x = false;

But booleans can also be defined as objects with the keyword new:

let y = new Boolean(false);

In JavaScript, truthy **and **falsy values are concepts related to boolean evaluation. Every value in JavaScript has an inherent boolean "truthiness" or "falsiness," which means they can be implicitly evaluated to true or false in boolean contexts, such as in conditional statements or logical operations.

What Are Truthy Values?

Truthy values are values that are evaluated to be true when used in a Boolean context. Simply put, any value that is not explicitly falsy is considered truthy

Non-zero numbers: 42, -1, 3.14
Non-empty strings: "hello", "0", " "
Objects and arrays: {}, []
Functions: function() {}
Dates: new Date()
Symbols: Symbol()
BigInt values other than 0n: 10n

What Are Falsy Values?

Falsy values are values that evaluate to false when used in a Boolean. JavaScript has a fixed list of falsy values

false
0 (and -0)
0n (BigInt zero)
"" (empty string)
null
undefined
NaN
document.all (used for backward compatibility

Warning

Do not create Boolean objects.

The new keyword complicates the code and slows down execution speed.

Boolean objects can produce unexpected results:

Reference :

w3schools.com

Conditional Statements in JavaScript

vidhya murali — Thu, 04 Jun 2026 05:19:57 +0000

Conditional Statements

Conditional Statements allow us to perform different actions for different conditions.
Conditional statements run different code depending on true or false conditions .

Conditional statements include:

if
if...else
if...else if...else
switch
ternary (? :)

When to use Conditionals

Use if to specify a code block to be executed, if a specified condition is true
Use else to specify a code block to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false
Use switch to specify many alternative code blocks to be executed
Use (? :) (ternary) as a shorthand for if...else

The JavaScript if Statement

Use the JavaScript if statement to execute a block of code when a condition is true.

Nested if

You can use an if statement inside another if statement.

Nested if statements can make your code more complex.

A better solution is to use the logical AND operator:

The else Statement

Use the else statement to specify a block of code to be executed if a condition is false.

Syntax :

The else if Statement

Use the else if statement to specify a new condition if the first is false

The JavaScript Ternary Operator

The conditional operator is a shorthand for writing conditional if...else statements.

It is called a ternary operator because it takes three operands.

The conditional (ternary) operator is the only JavaScript operator that takes three operands.

Reference :

w3schools.com

Operators In JavaScript

vidhya murali — Wed, 03 Jun 2026 08:12:33 +0000

Operators

JavaScript operators are symbols used to perform operations on values and variables

Types of JavaScript Operators

There are different types of JavaScript operators:

Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators And more ...

JavaScript Arithmetic Operators

Arithmetic operators perform arithmetic on numbers (literals or variables

Arithmetic Operations
A typical arithmetic operation operates on two numbers.

The two numbers can be literals:

Operators and Operands

The numbers (in an arithmetic operation) are called operands.
The operation (to be performed between the two operands) is defined by an operator.

Adding
The addition operator (+) adds numbers:

Subtracting
The subtraction operator (-) subtracts numbers

Multiplying
The multiplication operator (*) multiplies numbers.

Dividing
The division operator (/) divides numbers

Remainder
The modulus operator (%) returns the division remainder.

Incrementing
The increment operator (++) increments numbers.

Decrementing
The decrement operator (--) decrements numbers.

Exponentiation
The exponentiation operator (**) raises the first operand to the power of the second operand.

[x ** y produces the same result as Math.pow(x,y)]

Operator Precedence
Operator precedence describes the order in which operations are performed in an arithmetic expression.

JavaScript Assignment Operators

Assignment operators assign values to JavaScript variables.

Given that x = 10 and y = 5, the table below explains the assignment operators:

Logical Assignment Operators

The += Operator
The Addition Assignment Operator adds a value to a variable.

The -= Operator

The Subtraction Assignment Operator subtracts a value from a variable.

The &&= Operator
The Logical AND assignment operator is used between two values.

If the first value is true, the second value is assigned

Comparison Operators

Comparison operators are used to compare two values.

Comparison operators always return true or false.

JavaScript String Comparison
Note that strings are compared alphabetically:

Ternary Operator (? :)

Use (? :) (ternary) as a shorthand for if...else.

Type Conversion & Type Coercion in JavaScript

vidhya murali — Tue, 02 Jun 2026 05:36:39 +0000

JavaScript Type Conversion

In JavaScript Type Conversion can be defined as converting the data type of the variables from one type to the other manually by the programmer(explicitly) or automatically by the JavaScript(implicitly).

Implicit Type Conversion (Coercion): Implicit Type Conversion occurs automatically by the JavaScript.
Explicit Type Conversion: Explicit Type Conversion occurs when the programmer manually changes the type of the variables using the function Number(), String(), and Boolean().

Implicit Type Conversion (Coercion)
In JavaScript, the implicit type conversion or coercion conversion can be defined as the automatic conversion of the data type of the variables from one type to another type. Implicit type conversion mostly occurs when we are performing the arithmetic or the logical operations.

Coercion is implicit (handled automatically by the engine), while type conversion is explicit (you manually use functions like Number() or String()).
Because JavaScript is weakly typed, it doesn't throw errors when types don't match; it just tries to coerce them.

[Type coercion happens when you perform an operation on different data types, and the JavaScript engine tries to make them "fit" together.]

String with Number (Concatenation)

When we add a string with the number, the JavaScript automatically converts the number into a string and performs string concatenation.

let res= "15"+5;
console.log(res); [The output will be 20.]

Boolean to Number

When we perform the mathematical operations, then JavaScript automatically converts true to 1 and false to 0.
Values are coerced to booleans in logical contexts like if statements or using the double-NOT operator (!!).
Falsy values: 0, "", null, undefined, NaN, and false.
Truthy values: Everything else (including empty objects {} and arrays []).

Equality Comparison (==)

When we use the equality operator in the JavaScript, it compares them after converting the value into the same data type.
[Use === (Strict Equality): This checks both value and type without coercion, preventing weird results.]

Automatic Conversion in Logical Operations

In JavaScript, these values are automatically converts undefined, null, "" (empty string), false, NaN, and 0 to false, and all other values to true.

Explicit Type Conversion

In JavaScript, explicit type conversion can be defined as when we manually change the data type of the variable from one to other using some built-in JavaScript functions. JavaScript provides us the built-in functions for performing the explicit conversion.

Converting Strings to Numbers

The global method Number() converts a variable (or a value) into a number.

A numeric string (like "3.14") converts to a number (like 3.14).
An empty string (like "") converts to 0.
A non numeric string (like "John") converts to NaN (Not a Number).

Converting Numbers to Strings

The global method String() can convert numbers to strings. It can be used on any type of numbers, literals, variables, or expressions:

Converting to Boolean

In JavaScript, we can convert the value into a boolean we can use the Boolean() function

Reasons to Learn JavaScript Type Conversion

Data Handling: In JavaScript when we are working with API responses, user inputs and calculations, these type of the operation require type conversion.
Prevent Bugs: It is important to understand the type conversion which can help in preventing bugs which occurs when JavaScript implicitly converts value.
Code Clarity: By performing the explicit conversion makes our code bug free and more clear.

Data Types in JavaScript

vidhya murali — Mon, 01 Jun 2026 06:22:34 +0000

Data Types In Javascript

Data Type - A "data type" is an attribute that specifies the size, range, and type of values that a variable can store

The ECMAScript standard defines eight built-in data types in JavaScript. These are split into two categories: seven primitive types (immutable, single values) and one non-primitive type (mutable collections)

[ mutable values can be modified in place after creation, while immutable values cannot be altered once created ]

Examples :

The Concept of Data Types
In programming, data types is an important concept.

To be able to operate on variables, it is important to know something about the type.

Without data types, a computer cannot safely solve this:

Does it make any sense to add "Volvo" to sixteen? Will it produce an error or will it produce a result?

JavaScript will treat the example above as:

[ When adding a number and a string, JavaScript will treat the number as a string. ]

Javascript Variables

vidhya murali — Mon, 01 Jun 2026 06:00:41 +0000

Hi, Let's Learn Variables in Javascript.

Variable[Variables = Data Containers]

A JavaScript variable is a named container used to store, reference, and manipulate data values in a program. Because JavaScript is dynamically typed, you do not need to specify the type of data (like text or numbers) when creating a variable; the engine determines it automatically at runtime.
Variables are identified with unique names called identifiers.

Ex : a=10 ---> a- variable , 10- value

The rules for constructing names (identifiers) are:

Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter, a $ sign or an underscore (_).Numbers are not allowed as the first character in names.
Names are case sensitive (X is different from x).
Reserved words (JavaScript keywords) cannot be used as names.

Dynamically Typed vs Statically Typed Languages

Statically Typed Languages

How it works: Variable data types are known and enforced before the program runs (at compile time).
Key traits: You must declare types explicitly, and errors are caught early.
Pros: More optimized, faster execution, fewer surprises in production.
Examples: C, C++, Java, Rust, Go.

Dynamically Typed Languages

How it works: Data types are assigned and checked during execution (at runtime).
Key traits: You don't need to specify variable types, and values can change types freely.
Pros: Faster setup, more flexible, and code is often quicker to write.
Examples: Python, JavaScript, Ruby, PHP.

Ways to Declare Variables Modern JavaScript uses three primary keywords to create variables:

const: Declares a block-scoped constant value that cannot be reassigned after initialization.
let: Declares a block-scoped mutable variable that can be reassigned later.
var: Declares a function-scoped variable. This is an older legacy keyword that is mostly avoided in modern code.
Variables are labels for data values.
Variables are containers for storing data.

JavaScript Day-1

vidhya murali — Mon, 01 Jun 2026 05:50:05 +0000

What I learned Today in JavaScript,Let's learn Together.

1, JavaScript
JavaScript (JS) is a high-level, dynamic, and multi-paradigm programming language primarily used to create interactive and dynamic content on the web. It serves as one of the core technologies of the World Wide Web, working alongside HTML (which defines the structure) and CSS (which handles the layout and styling) to bring static web pages to life.

Core Features

Interpreted & JIT Compiled: Browsers receive the code as plain text and execute it line-by-line using a built-in interpreter. Modern engines use just-in-time (JIT) compilation to transform code into a faster binary format during runtime.
Dynamically Typed: Variable types are determined automatically at runtime rather than being declared explicitly in the code.
Single-Threaded & Asynchronous: It executes one task at a time on a single main thread, but uses an event loop to handle asynchronous tasks like fetching data without freezing the user interface.
Multi-Paradigm: It supports object-oriented, functional, imperative, and procedural programming styles

JS interacts with the Document Object Model (DOM) to update website content in real time.

Common use cases include:

Adding Interactivity: Powering dropdown menus, image carousels, popup windows, and zoomable maps.
Form Validation: Checking user inputs like email formats or credit card numbers before data is submitted to a server.
Dynamic UI Updates: Refreshing content (such as social media feeds or instant message updates) automatically without requiring a full manual page

Scripting Language

A scripting language is a specific type of programming language used to automate tasks, control existing software applications, and generate dynamic content without requiring a distinct compilation step.
Unlike traditional compiled languages, scripting languages are interpreted line-by-line at runtime by another program known as an interpreter. All scripting languages are programming languages, but not all programming languages are scripting languages

Programming Languages

[Programming is telling a computer what to do.]

A programming language is how we write code, what keywords we use, to tell the computer what to do.
Different programming languages are used for different purposes, like JavaScript is good for web development, Python is good for AI, and C/C++ is good for programming microcontrollers.

Media Queries

vidhya murali — Wed, 27 May 2026 04:52:11 +0000

CSS Media Queries

CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page.
CSS media queries are essential for creating responsive web pages
The CSS @media rule is used to add media queries to your style sheet.

**
Media Queries for Screen Orientation**

Media queries can also be used to change the layout of a page depending on the orientation of the screen. Here, we change the background-color of the body, if the screen orientation is in landscape mode:

JavaScript Interview Questions

vidhya murali — Wed, 27 May 2026 03:36:25 +0000

Java vs JavaScript

Java - Java is a statically typed, object-oriented programming language for building platform-independent applications.
JavaScript - JavaScript is a dynamically typed scripting language primarily used for interactive web development.

Scripting vs Programming Language

All scripting languages are programming languages, but not all programming languages are scripting languages. The primary technical distinction lies in how the code is executed—scripting languages are traditionally interpreted line-by-line at runtime, while general programming languages are compiled into binary machine code before execution

Array vs Objects

In JavaScript, arrays and objects have specific behaviors, built-in methods, and performance characteristics that dictate how you use them.Technically, arrays in JavaScript are actually a special type of object under the hood, but they are treated differently in daily coding. Objects (Key-Value Pairs)Objects use curly braces {} and access data via text keys (properties) using dot notation or bracket notation.

Promise

In JavaScript, a Promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value. Think of it like a buzzer at a restaurant: you order your food (start an async task), they give you a buzzer (the Promise), and you can continue talking to friends while the food cooks. When the buzzer lights up, you get your meal (the value) or a notification that they ran out of ingredients (the error).

Asynchronous Functions

An asynchronous function is a special type of JavaScript function defined with the async keyword that always returns a Promise and allows you to use the await keyword inside it.They provide a clean, sequential syntax for handling asynchronous operations, completely eliminating the need for messy .then() and .catch() chains.

HTML,CSS Questions

vidhya murali — Sat, 23 May 2026 03:40:11 +0000

Display Properties

CSS display property defines how an element is shown on the webpage.

Common Display Properties

display: block

Element takes full width and starts on a new line.

Examples: div, h1,p

display: inline

Element takes only content width.

Examples: span ,a, b

display: inline-block

Combination of inline + block.

display: none

Element completely disappears

*Box-Sizing Property *:

box-sizing defines how the total width and height of an element are calculated

box-sizing: content-box (Default)

Width only applies to content area.

box-sizing: border-box

Padding and border are included inside width

GIT

vidhya murali — Sat, 23 May 2026 03:29:39 +0000

GIT

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
It is used to track changes in code, collaborate with others, and manage software projects efficiently.

Basic Git Workflow
Modify files

git add .
git commit -m "message"
git push ** GitHub**

GitHub is a cloud-based platform used to host Git repositories and collaborate on software projects.

It works together with Git.

What GitHub is Used For

Storing code online
Collaboration with teams
Version control
Open-source projects
Portfolio for developers
CI/CD and deployment

GitLab :

GitLab is a web-based platform used for Git repository hosting, collaboration, DevOps, and CI/CD automation.

It is similar to GitHub but includes more built-in DevOps features.

Features of GitLab

Git repository hosting
Version control
Branch management
Merge requests
Issue tracking
CI/CD pipelines

HTML, CSS interview Questions

vidhya murali — Tue, 19 May 2026 03:27:29 +0000

*Meta tag *

The tag defines metadata about an HTML document. Metadata is data (information) about data.
tags always go inside the element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.

Alternate for HTML
XML:
Extensible Markup Language (XML) is a markup language used for storing structured data. It uses custom tags to define the elements which support a wide range of elements. It was developed because HTML was unable to define new elements hence XML was introduced which was extensible to define custom elements.
It was designed to store and transport data and contain information about the sender, receiver, heading, and message body. It is more focused on what data is rather than how data looks. It is used for representing documents, data, transactions, invoices, etc.

Example: Implementation of the basic structure of XML code.

XHTML:
Extensible Hypertext Markup Language (XHTML) is a markup language that is used to create HTML documents that support custom tags to define new elements. It is more strict than HTML in terms of error handling i.e browser doesn't display web pages in case of errors in the markup document. It creates an XML version of the HTML document which must be marked up correctly.

Box-Sizing

CSS Box Sizing

The CSS box-sizing property defines how to calculate the width and height of an element: should the calculation include padding and borders, or not.
By default, the width and height of an element is calculated like this:

- width + padding + border = actual width of an element
- height + padding + border = actual height of an element This means: When you set the width/height of an element, the element often appears bigger than you have set (because the element's border and padding are added to the element's specified width/height)