REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Conditionals

AI & DATA SCIENCE // conditionals

Conditionals execute different code based on whether a condition is true or false. JavaScript has if/else, switch, and the ternary operator.

Syntax

if (condition) {
  // true branch
} else if (otherCondition) {
  // else-if branch
} else {
  // default branch
}

Deep Dive Course

Conditionals are the decision-making structures in JavaScript. The **if/else** chain handles boolean conditions. **switch** is more readable when comparing one value against many cases. The **ternary operator** provides a concise inline if/else.

1Understanding Conditionals

Conditionals are the decision-making structures in JavaScript. The if/else chain handles boolean conditions. switch is more readable when comparing one value against many cases. The ternary operator provides a concise inline if/else.

💡

Use switch instead of long if/else chains when testing a single variable against many values.

editor.html

const score = 72;

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

localhost:3000

2Practical Example

Here is a real-world application of Conditionals showing how it is used in production JavaScript code.

editor.html

// Ternary for concise assignment
const age = 20;
const status = age >= 18 ? 'adult' : 'minor';
console.log(status); // 'adult'

// Short-circuit evaluation
const name = null;
const display = name ?? 'Anonymous';
console.log(display); // 'Anonymous'

localhost:3000

3Best Practices

Follow these guidelines when working with Conditionals:

1. Always include an else or default case

2. Prefer strict equality (===) in conditions

3. Use ternary for simple value assignments, not complex logic

⚠️

Tip: Use switch instead of long if/else chains when testing a single variable against many values.

editor.html

const score = 72;

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

localhost:3000

Examples

Example 01Basic Usage

const score = 72;

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

Example 02Advanced Example

// Ternary for concise assignment
const age = 20;
const status = age >= 18 ? 'adult' : 'minor';
console.log(status); // 'adult'

// Short-circuit evaluation
const name = null;
const display = name ?? 'Anonymous';
console.log(display); // 'Anonymous'

Best Practices

Always include an else or default case
Prefer strict equality (===) in conditions
Use ternary for simple value assignments, not complex logic

Interview Question

What is short-circuit evaluation in JavaScript?▼

Hint: && and || stop early when the result is determined.

In && expressions, if the left side is falsy, the right side is never evaluated. In || expressions, if the left is truthy, the right is skipped. This is used for conditional execution: obj && obj.method() prevents calling method on null/undefined.

Exercises

MediumPractice using Conditionals in a real scenario.

View Solution

const score = 72;

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

Frequently Asked Questions

What is short-circuit evaluation in JavaScript?▼

Related Functions

ifelseswitchOperators