Learn JavaScript: Conditionals

Learn how to use if, else if, else, switch, and ternary syntax to control the flow of a program in JavaScript.

Start[missing "en.views.course_landing_page.introduction-to-javascript.course_illustration" translation]

Key Concepts

Review core concepts you need to learn to master this subject

JavaScript Control Flow

Control flow is the order in which statements are executed in a program. Control structures such as conditionals allow for control flow to be altered during the execution of a program. In JavaScript, the default control flow is for statements to be read and executed in order from left-to-right, top-to-bottom in a program file. Control structures such as conditionals (if statements and the like) alter control flow by only executing blocks of code if certain condition(s) are met. These structures essentially allow a program to make decisions about which code is executed as the program runs.

The if statement in JavaScript

An if statement will be executed if the if condition is true. In this code block, the variable isMailSent has been initialized with a boolean value true. Therefore, the if statement will be executed resulting a log in the console Mail sent to recipient.

The else statement in JavaScript

An else block will be executed only if the if condition fails. In the above example, the variable isTaskCompleted has been initialized with a boolean value false. Therefore, the else block will be executed resulting in Task incomplete logging to the console.

The NOT operator

The ! operator can be used to A) invert a Boolean value, or B) invert the truthiness of non-Boolean values. In the above code block, we see how it is used in both situations.

The JavaScript NOT operator

The ! operator can be used to A) invert a Boolean value, or B) invert the truthiness of non-Boolean values. In the above code block, we see how it is used in both situations.

JavaScript Truthy and Falsy

In JavaScript, values evaluate to true or false when evaluated as Booleans. Values that will evaluate to true are known as truthy and values that evaluate to false are known as falsy. Falsy values include false, 0, empty strings, null undefined, and NaN. All other values are truthy.

JavaScript Comparison Operators

JavaScript comparison operators are used to compare two values and return true or false depending on the validity of the comparison. Comparison operators include strict equal (===), strict not equal (!==), greater than (>), less than (<), greater than or equal (>=), and less than or equal (<=). = (assign a value to something), == (check if something is equal, not strict), and === (check if something is equal, strict) are commonly confused. "Strict" means that it checks not only the equality of two values, but also the types of the two values.

JavaScript Strict Comparisons

Strict equality or inequality comparisons use === and !== operators respectively. Strict comparisons evaluate the equality of the operands without employing type conversion.

JavaScript if...else Control Flow Statements

Control flow statements can be chained by combining if and else statements into else if. After an initial if statement, one or more else if blocks can check additional conditions, with an optional else block to catch cases that do not match any conditional. The example above demonstrates how you can create multiple conditions in an if...else control flow statement.

The JavaScript && operator

The logical OR operator (||) compares two values. When it is used in a Boolean context, it returns true when either values evaluate to true. If both values evaluate to false, the || operator returns false.

JavaScript Switch Statements

Switch statements allow for compact control flow structures by evaluating a single expression and executing code blocks based on a matched case. The switch statement first evaluates the expression provided. The result of the expression is matched against one or more case clauses. If it matches one, the code inside that clause is executed. If the case clause ends with a break statement, the code inside the switch will cease executing and the next statement following switch will be executed. If no case clauses match but a default exists, the code inside default will be executed. If break is omitted from a clause (or the execution is not broken otherwise, such as returning from a function with a switch), code in subsequent clauses will continue executing until a break is encountered or the flow is otherwise broken.

JavaScript Ternary Operator

The ternary operator allows for a compact syntax in the case of binary (if/else) decisions. It evaluates a single condition and executes one expression if the condition is evaluates to true and the second expression otherwise. The syntax is: condition ? expression1 : expression2. It can be read as "IF condition THEN expression1 ELSE expression2".

Conditional Statements
Lesson 1 of 1
  1. 1

    In life, we make decisions based on circumstances. Think of an everyday decision as mundane as falling asleep— if we are tired, we go to bed, otherwise, we wake up and start our day. These i...

  2. 2

    We often perform a task based on a condition. For example, if the weather is nice today, then we will go outside. If the alarm clock rings, then we'll shut it off. If we're tired, then we'll go to ...

  3. 3

    In the previous exercise, we used an [...] statement that checked a condition to decide whether or not to run a block of code. In many cases, we'll have code we want to run if our condition evalu...

  4. 4

    When writing conditional statements, sometimes we need to use different types of operators to compare values. These operators are called comparison operators. Here is a list of some handy compar...

  5. 5

    Working with conditionals means that we will be using booleans, [...] or [...] values. In JavaScript, there are operators that work with boolean values known as logical operators. We can use ...

  6. 6

    Let's consider how non-boolean data types, like strings or numbers, are evaluated when checked inside a condition. Sometimes, you'll want to check if a variable exists and you won't necessarily w...

  7. 7

    Truthy and falsy evaluations open a world of short-hand possibilities! Say you have a website and want to take a user's username to make a personalized greeting. Sometimes, the user does not hav...

  8. 8

    In the spirit of using short-hand syntax, we can use a ternary operator to simplify an [...] statement. Take a look at the [...] statement example: [...] We can use a ternary operator t...

  9. 9

    We can add more conditions to our [...] with an [...] statement. The [...] statement allows for more than two possible outcomes. You can add as many [...] statements as you’d like, to make ...

  10. 10

    [...] statements are a great tool if we need to check multiple conditions. In programming, we often find ourselves needing to check multiple values and handling each of them differently. For exam...

  11. 11

    Way to go! Here are some of the major concepts for conditionals: An [...] statement checks a condition and will execute a task if that condition evaluates to [...] . [...] statements make ...

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo

Learn JavaScript: Conditionals

Start[missing "en.views.course_landing_page.introduction-to-javascript.course_illustration" translation]