DEV Community

Cover image for JavaScript Conditional Statements: Examples, Flowcharts, Truthy & Falsy Values, and Interview Questions
Ezhil Abinaya K
Ezhil Abinaya K

Posted on

JavaScript Conditional Statements: Examples, Flowcharts, Truthy & Falsy Values, and Interview Questions

Conditional Statements

JavaScript conditional statements are used to make decisions in a program based on given conditions. They control the flow of execution by running different code blocks depending on whether a condition is true or false.

  • Conditions are evaluated using comparison and logical operators.
  • They help in building dynamic and interactive applications by responding to different inputs.

Types of Conditional Statements

1. if Statement
The if statement checks a condition written inside parentheses. If the condition evaluates to true, the code inside {} is executed; otherwise, it is skipped.

  • Executes code only when a specified condition is true.
  • Useful for making simple decisions in a program.

Flowchart for below program

let x = 20;

if (x % 2 === 0) {
    console.log("Even");
}

if (x % 2 !== 0) {
    console.log("Odd");
};
//Even
Enter fullscreen mode Exit fullscreen mode

2. if-else Statement
The if-else statement executes one block of code if a condition is true and another block if it is false. It ensures that exactly one of the two code blocks runs.

  • Used when there are two possible outcomes.
  • The else block runs when the if condition is not satisfied.  Flowchar for below program
let age = 25;

if (age >= 18) {
    console.log("Adult")
} else {
    console.log("Not an Adult")
};
//Adult
Enter fullscreen mode Exit fullscreen mode

3. else if Statement
The else if statement is used to test multiple conditions in sequence. It executes the first block whose condition evaluates to true.

  • Allows checking more than two conditions.
  • Evaluated from top to bottom until a true condition is found.  Flowchart for below program


const x = 0;

if (x > 0) {
    console.log("Positive.");
} else if (x < 0) {
    console.log("Negative.");
} else {
    console.log("Zero.");
}
//Zero
Enter fullscreen mode Exit fullscreen mode

Truthy & Falsy Values in JavaScript
In JavaScript, truthy and falsy values determine how non-boolean data types are evaluated inside conditional contexts like if statements or loops. JavaScript converts these values into standard booleans behind the scenes through type coercion.

** Truthy Values**
Truthy values are values that are evaluated to be true when used in a Boolean context.Javascript has a fixed list of truthy values.

  • Non-zero numbers: 42, -1, 3.14
  • Non-empty strings: "hello", "0", " "(a string containing a space is non-empty)
  • Objects and arrays: {},
  • Functions: function() {}(TBD)
  • Dates: new Date()(TBD)
  • Symbols: Symbol()(TBD)
  • BigInt values other than 0n: 10n

Example

        let currentStatus = "active"; 

        if (currentStatus) {
            console.log("System is running!"); 
        } else {
            console.log("System is offline."); 
        }
//System is running
Enter fullscreen mode Exit fullscreen mode

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 without space)
  • null(TBD)
  • undefined
  • NaN
  • document.all (used for backward compatibility)(TBD)

Example

        let username = ""; 

        if (username) {
            console.log("Welcome back!"); 
        } else {
            console.log("Please log in."); 
        }
//Please log in.
Enter fullscreen mode Exit fullscreen mode

Interview Questions
1. What is the main difference between an if statement and an if-else statement?
An if statement only executes a code block if the condition is true and does nothing if it is false. An if-else statement provides an alternative code block that runs specifically when the condition is false.

2. How many built-in falsy values exist in JavaScript? Can you name at least four?
There are 8 core falsy values: false, 0 (including -0), 0n, "" (empty string), null, undefined, NaN, and document.all.

3.Predict the output of this code block?

let score = "0";
if (score) {
    console.log("Goal!");
} else {
    console.log("No Goal!");
}

Enter fullscreen mode Exit fullscreen mode

Answer: It will output "Goal!". Even though the character inside is zero, "0" is a non-empty string, making it a truthy value.

4.What is type coercion in the context of conditional statements?
Type coercion is the automatic conversion of values from one data type to another by JavaScript. In an if statement, JavaScript coerces non-boolean values (like strings or numbers) into booleans (true or false) behind the scenes.
5.

let x = 10;

if (x = 5) {
    console.log("Executed");
}
Enter fullscreen mode Exit fullscreen mode

Output:Executed
References
https://www.geeksforgeeks.org/javascript/conditional-statements-in-javascript/
https://www.geeksforgeeks.org/javascript/explain-the-concept-of-truthy-falsy-values-in-javascript/

Top comments (0)