Conditionals

if/else

Same concept as Python, different syntax:

const age = 25;

if (age >= 18) {
  console.log("Welcome");
} else {
  console.log("Too young");
}
// "Welcome"

JavaScript
Python

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

if score >= 90:
    grade = "A"
elif score >= 80:
    grade = "B"
elif score >= 70:
    grade = "C"
else:
    grade = "F"

Two differences: curly braces instead of colons and indentation, and else if instead of elif.

Conditions must be in parentheses

// Parentheses around the condition are required
if (user.isAdmin) {
  showAdminPanel();
}

// Python doesn't require them
// if user.is_admin:
//     show_admin_panel()

Truthy and falsy values

JavaScript evaluates any value as true or false in a condition. This matters more than you’d expect. Falsy values (evaluate to false):

if (false)     // false
if (0)         // false
if ("")        // false (empty string)
if (null)      // false
if (undefined) // false
if (NaN)       // false

Everything else is truthy — including some surprises:

if ("hello")   // true — any non-empty string
if (42)        // true — any non-zero number
if ([])        // true — empty array!
if ({})        // true — empty object!

Empty arrays [] and empty objects {} are truthy in JavaScript. This is different from Python, where empty lists and dicts are falsy. To check if an array is empty, use array.length === 0.

Practical use of truthy/falsy

// Check if a variable has a useful value
const username = getUserInput();

if (username) {
  console.log(`Hello, ${username}`);
} else {
  console.log("Please enter a username");
}

// Check if an array has items
const users = await fetchUsers();

if (users.length) { // 0 is falsy, any other number is truthy
  renderUserList(users);
} else {
  renderEmptyState();
}

Ternary operator

A one-line if/else. You’ll use this constantly in React for conditional rendering.

const age = 25;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // "adult"

The syntax: condition ? valueIfTrue : valueIfFalse

// Setting variables
const greeting = user ? `Hello, ${user.name}` : "Hello, guest";

// Template literals
console.log(`Status: ${isActive ? "Active" : "Inactive"}`);

// Function arguments
fetchUsers(isAdmin ? "/api/admin/users" : "/api/users");

Ternary in React

This is where the ternary operator really shines:

function UserGreeting({ user }) {
  return (
    <div>
      {user ? (
        <h1>Welcome back, {user.name}!</h1>
      ) : (
        <h1>Please log in</h1>
      )}
    </div>
  );
}

Keep ternaries simple — one condition, two outcomes. If you need more complex logic, use an if/else block or extract the logic into a separate function.

Logical operators

&& (AND) — short-circuit rendering

Returns the second value if the first is truthy. Otherwise returns the first.

const isLoggedIn = true;
const message = isLoggedIn && "Welcome back!";
console.log(message); // "Welcome back!"

const isLoggedIn = false;
const message = isLoggedIn && "Welcome back!";
console.log(message); // false

In React, && is the most common way to conditionally show something:

{isLoading && <Spinner />}
{error && <ErrorMessage text={error} />}
{users.length > 0 && <UserList users={users} />}

|| (OR) — fallback values

Returns the first truthy value.

const username = inputValue || "Anonymous";
const theme = savedTheme || "light";
const port = process.env.PORT || 3000;

|| treats 0, "", and false as falsy — so 0 || 5 returns 5, not 0. If you need to only fall back on null/undefined, use ?? instead.

?? (nullish coalescing) — null/undefined fallback

Returns the right side only if the left is null or undefined. Doesn’t trigger on 0, "", or false.

const count = 0;

console.log(count || 10);  // 10 — treats 0 as falsy
console.log(count ?? 10);  // 0  — only falls back on null/undefined

const name = "";
console.log(name || "Anonymous");  // "Anonymous" — treats "" as falsy
console.log(name ?? "Anonymous");  // "" — only falls back on null/undefined

Use ?? when a value of 0, "", or false is valid and shouldn’t be replaced. Use || when you want any falsy value to trigger the fallback.

switch statements

For multiple conditions against the same value:

const status = "processing";

switch (status) {
  case "pending":
    console.log("Waiting for review");
    break;
  case "processing":
    console.log("Being processed");
    break;
  case "completed":
    console.log("Done!");
    break;
  default:
    console.log("Unknown status");
}
// "Being processed"

Don’t forget break after each case. Without it, execution “falls through” to the next case. This is a common source of bugs.

What’s next?

You can make decisions with conditionals. Now let’s learn how to repeat actions with loops.

Loops

Iterate over data with for loops and more

Data structures

Working with JSON

Control flow

if/else

Conditions must be in parentheses

Truthy and falsy values

Practical use of truthy/falsy

Ternary operator

Ternary in React

Logical operators

&& (AND) — short-circuit rendering

|| (OR) — fallback values

?? (nullish coalescing) — null/undefined fallback

switch statements

What’s next?

Loops

​if/else

​Conditions must be in parentheses

​Truthy and falsy values

​Practical use of truthy/falsy

​Ternary operator

​Ternary in React

​Logical operators

​&& (AND) — short-circuit rendering

​|| (OR) — fallback values

​?? (nullish coalescing) — null/undefined fallback

​switch statements

​What’s next?

Loops

if/else

Conditions must be in parentheses

Truthy and falsy values

Practical use of truthy/falsy

Ternary operator

Ternary in React

Logical operators

&& (AND) — short-circuit rendering

|| (OR) — fallback values

?? (nullish coalescing) — null/undefined fallback

switch statements

What’s next?