JavaScript Conditional: JavaScript is a powerful programming language that allows developers to control the flow of execution using conditional statements and manipulate text using various string formatting methods. In this guide, we will explore:
- Conditional Statements in JavaScript
- if Statement
- if…else Statement
- if…else if…else Statement
- if Statement
- JavaScript String Formatting Methods
- Template Literals (${})
- Concatenation Operator (+)
- Custom Functions
- Regular Expressions
- Ternary Operator
- Template Literals (${})
1. JavaScript Conditional Statements
JavaScript Conditional: Conditional statements in JavaScript allow you to execute code based on certain conditions.
1.1 if Statement
The if statement executes a block of code only when a given condition is true.
Syntax:
javascript
if (condition) {
// Code executes if the condition is true
}
Example: Check Age for Adulthood
html
<html>
<head>
<title>If Statement Example</title>
<script type=”text/javascript”>
var age = prompt(“Enter your age”);
if (age >= 18) {
document.write(“You are an adult.”);
}
</script>
</head>
<body></body>
</html>
1.2 if…else Statement
The if…else statement executes different blocks of code depending on whether the condition is true or false.
Syntax:
javascript
if (condition) {
// Executes if condition is true
} else {
// Executes if condition is false
}
Example: Greet Based on Time of Day
html
<html>
<head>
<title>If…Else Statement</title>
<script type=”text/javascript”>
var hours = new Date().getHours();
if (hours < 12) {
document.write(“Good Morning!”);
} else {
document.write(“Good Afternoon!”);
}
</script>
</head>
<body></body>
</html>
1.3 if…else if…else Statement
This statement is used when multiple conditions need to be tested sequentially.
Syntax:
javascript
if (condition1) {
// Executes if condition1 is true
} else if (condition2) {
// Executes if condition2 is true
} else {
// Executes if both conditions are false
}
Example: Compare Two Numbers
html
<html>
<head>
<script type=”text/javascript”>
var one = prompt(“Enter the first number”);
var two = prompt(“Enter the second number”);
one = parseInt(one);
two = parseInt(two);
if (one == two) {
document.write(one + ” is equal to ” + two);
} else if (one < two) {
document.write(one + ” is less than ” + two);
} else {
document.write(one + ” is greater than ” + two);
}
</script>
</head>
<body></body>
</html>
2. JavaScript String Formatting Methods
JavaScript Conditional: String formatting in JavaScript allows developers to manipulate text efficiently. Here are different ways to format strings.
2.1 Using Template Literals (${})
Template literals allow you to embed expressions within strings using backticks (`).
Example:
javascript
const name = “Jenny”;
const id = 1;
console.log(`Welcome ${name}, your ID is ${id}`);
Output:
csharp
Welcome Jenny, your ID is 1
2.2 Using + Operator (Concatenation)
The + operator is a simple way to concatenate strings.
Example:
javascript
const name = “Jenny”;
const id = 1;
console.log(“Welcome ” + name + “, your ID is ” + id);
Output:
csharp
Welcome Jenny, your ID is 1
2.3 Using a Custom Function for String Formatting
JavaScript Conditional: Custom functions allow flexible string formatting.
Example:
javascript
function welcomeMsg(name, id) {
return `Welcome ${name}, your ID is ${id}`;
}
const name = “Jenny”;
const id = 1;
console.log(welcomeMsg(name, id));
Output:
csharp
Welcome Jenny, your ID is 1
2.4 Using Regular Expressions for String Replacement
JavaScript Conditional: Regular expressions help in dynamic string formatting.
Example:
javascript
let name = “Jenny”;
let id = 1;
let message = “Welcome [name], your ID is [id]”.replace(/\[name\]/g, name).replace(/\[id\]/g, id);
console.log(message);
Output:
csharp
Welcome Jenny, your ID is 1
2.5 Using the Ternary Operator
JavaScript Conditional: The ternary operator allows inline conditional string formatting.
Example:
javascript
let name = “Jenny”;
let isAdmin = true;
let msg = `Welcome ${name}${isAdmin ? “, you are an admin” : “”}`;
console.log(msg);
Output:
sql
Welcome Jenny, you are an admin
3. Comparison of JavaScript String Formatting Methods
| Method | Advantages | Disadvantages |
| Template Literals (${}) | Easy to use, readable | Not supported in old browsers |
| Concatenation (+) | Simple, widely supported | Can be inefficient for large strings |
| Custom Function | Offers flexibility | Requires more coding effort |
| Regular Expressions | Dynamic string replacement | More complex implementation |
| Ternary Operator | Short and efficient | Limited to simple cases |
4. Conclusion
In JavaScript, conditional statements (if, if…else, if…else if…else) control program flow, while string formatting techniques help manipulate text. By understanding these concepts, you can write cleaner, more efficient, and user-friendly JavaScript code.
Pro Tip: Use template literals (${}) for cleaner code, and regular expressions for dynamic text replacements!
Java script Array
