The beauty of coding lies in its functionality and practicality. It’s akin to a superpower that allows a simple text editor to carry out complex instructions. And there’s nothing more fundamental to the workings of a programming language than the basic logic structures. Among these logic structures, one stands out with its simplicity but yet powerful function: the If Statements in JavaScript.
Table of Contents
- Understanding If Statements in JavaScript
- Employing else and else if Statements
- Working with Complex Conditions
- Storing User Input for Condition Check
- Challenge: Practice with JavaScript If Statements
Understanding If Statements in JavaScript
If Statements are a class of programming components known as control structures. Control structures guide the flow of a program, determining the sequence in which your code will run. They are pivotal to making websites responsive to user actions. To better comprehend the concept of If Statements in JavaScript, it is worthwhile to check out JavaScript’s basics in general.
Let’s delve into a simple illustration of If Statement.
let x = 10;
if (x > 5) {
console.log('x is greater than 5');
}
Code language: JavaScript (javascript)In the demonstration above, the If Statement checks whether the variable x is greater than 5. If it is, it executes the code block and logs ‘x is greater than 5’ to the console.
Employing else and else if Statements
Apart from If Statements, JavaScript also provides us with else and else if keywords. They are employed when you have more than one condition to check.
let x = 4;
if (x > 5) {
console.log('x is greater than 5');
} else if (x < 5){
console.log('x is less than 5');
} else {
console.log('x equals to 5');
}
Code language: JavaScript (javascript)In the example above, if x were equal to or greater than 5, then ‘x is greater than 5’ would have been logged into the console. But if it was less than 5, ‘x is less than 5’ would be logged. If it was none of these, ‘x equals to 5’ would be logged, i.e., when x equals 5.
Working with Complex Conditions
JavaScript allows the If Statement to be expanded into complex conditions using logical operators. The && (and) and || (or) operators deal with comparative statements.
let x = 10;
let y = 20;
if (x > 5 && y > 15) {
console.log('Both conditions are true');
}
Code language: JavaScript (javascript)In this code snippet, both conditions must be true for the code within the If Statement to run. This inclusion of complex conditions in If Statements across JavaScript signifies its robust versatility.
Storing User Input for Condition Check
Information that a user enters can also be saved in a variable and utilized with If Statements. You can review an example of storing user input in a variable by following this guide.
let userAge = prompt("Please enter your age");
if (userAge >= 18) {
alert ('You are an adult');
} else {
alert ('You are underaged');
}
Code language: JavaScript (javascript)In the code above, user input related to age is stored in userAge, and the If Statement checks if the user is an adult or underaged based on the input they provide.
Challenge: Practice with JavaScript If Statements
Here’s a challenge for you. Given a temperature value stored in a variable, create an If Statement in JavaScript to output whether it’s hot, warm, or cold.
In the realm of programming, practice plays a pivotal role. The more you use If Statements and understand their execution contexts, the better you will become at JavaScript programming.
Hopefully, this article has given you a clear insight into If Statements in JavaScript. Now, it’s time for hands-on practice and make the most out of it! Happy Coding!
