Conditions

if/else

Basic if

const age = 18;

if (age >= 18) {
  console.log('Adult');
}

if/else

const age = 15;

if (age >= 18) {
  console.log('Adult');
} else {
  console.log('Minor');
}

if/else if/else

const grade = 85;

if (grade >= 90) {
  console.log('A');
} else if (grade >= 80) {
  console.log('B');
} else if (grade >= 70) {
  console.log('C');
} else if (grade >= 60) {
  console.log('D');
} else {
  console.log('F');
}

Nested if

const isLoggedIn = true;
const isAdmin = true;

if (isLoggedIn) {
  if (isAdmin) {
    console.log('Admin dashboard');
  } else {
    console.log('User dashboard');
  }
} else {
  console.log('Login page');
}

Truthy/Falsy Conditions

const name = '';

if (name) {
  console.log('Has name');
} else {
  console.log('No name'); // This runs
}

// Check explicitly
if (name !== undefined && name !== null && name !== '') {
  console.log('Has name');
}

Block Scope

if (true) {
  let x = 10;
  const y = 20;
  var z = 30;
}

console.log(z); // 30 (var is function scoped)
// console.log(x); // Error: x is not defined

Guard Clauses

// Instead of nesting
function process(user) {
  if (!user) return;
  if (!user.isActive) return;
  if (!user.hasPermission) return;
  
  // Main logic
  doSomething();
}

switch Statement

Basic Syntax

const day = 'Monday';

switch (day) {
  case 'Monday':
    console.log('Start of week');
    break;
  case 'Friday':
    console.log('TGIF!');
    break;
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend!');
    break;
  default:
    console.log('Regular day');
}

Fall-Through

// Without break, cases fall through
const month = 2;

switch (month) {
  case 1:
  case 2:
  case 3:
    console.log('Q1');
    break;
  case 4:
  case 5:
  case 6:
    console.log('Q2');
    break;
}

Strict Comparison

// switch uses === (strict equality)
const x = '5';

switch (x) {
  case 5:
    console.log('Number 5'); // Not matched
    break;
  case '5':
    console.log('String 5'); // Matched
    break;
}

When to Use switch vs if/else

// Use switch for multiple discrete values
const getDayType = (day) => {
  switch (day) {
    case 'Saturday':
    case 'Sunday':
      return 'Weekend';
    default:
      return 'Weekday';
  }
};

// Use if/else for ranges and conditions
const getGrade = (score) => {
  if (score >= 90) return 'A';
  if (score >= 80) return 'B';
  if (score >= 70) return 'C';
  return 'F';
};

switch Expressions (Modern)

// Using in assignments
const type = switch (code) {
  case 200: 'success';
  case 404: 'not found';
  default: 'error';
};
// Note: This syntax is not yet standard

Ternary Operator

Basic Syntax

// condition ? valueIfTrue : valueIfFalse
const age = 20;
const status = age >= 18 ? 'Adult' : 'Minor';

Equivalent to if/else

// Long form
let result;
if (score >= 60) {
  result = 'Pass';
} else {
  result = 'Fail';
}

// Ternary
const result = score >= 60 ? 'Pass' : 'Fail';

Nested Ternary

const grade = 85;
const result = grade >= 90 ? 'A'
  : grade >= 80 ? 'B'
  : grade >= 70 ? 'C'
  : grade >= 60 ? 'D'
  : 'F';

Ternary in JSX

// React conditional rendering
function App({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <Dashboard /> : <LoginForm />}
    </div>
  );
}

Ternary vs && Operator

// When you only need true case
const message = isLoggedIn && 'Welcome!';

// vs ternary
const message = isLoggedIn ? 'Welcome!' : '';

// && is simpler for conditional rendering
{isLoggedIn && <UserProfile />}

Best Practices

// Good: Simple ternary
const color = isActive ? 'blue' : 'gray';

// Bad: Complex ternary (use if/else instead)
const result = condition1 ? value1 
  : condition2 ? value2 
  : condition3 ? value3 
  : value4; // Too complex!

In Template Literals

const name = 'John';
const message = `Hello, ${name ? name : 'Guest'}!`;