Ternary operator in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to assign 'adult' if age is 18 or more, otherwise 'minor'.

Javascript

const status = age [1] 18 ? 'adult' : 'minor';

Drag options to blanks, or click blank then click option'

A>=

B==

C<

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '==' instead of '>=' causes wrong classification.

Using '<' reverses the logic.

The ternary operator checks if age is greater than or equal to 18 to assign 'adult'.

2fill in blank

medium

Complete the code to assign 'even' if number is divisible by 2, else 'odd'.

Javascript

const type = (num % 2) [1] 0 ? 'even' : 'odd';

Drag options to blanks, or click blank then click option'

A>

B<

C===

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '!=' causes odd numbers to be classified as even.

Using '>' or '<' is incorrect for equality check.

The ternary checks if remainder is exactly 0 to determine even numbers.

3fill in blank

hard

Fix the error in the ternary condition to check if score is passing (>= 60).

Javascript

const result = score [1] 60 ? 'pass' : 'fail';

Drag options to blanks, or click blank then click option'

A!=

B<

C==

D>=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' reverses the pass/fail logic.

Using '==' only passes if score is exactly 60.

The condition must check if score is greater than or equal to 60 to pass.

4fill in blank

hard

Fill both blanks to create a ternary that returns 'positive' if num > 0, else 'non-positive'.

Javascript

const sign = num [1] 0 ? 'positive' : [2];

Drag options to blanks, or click blank then click option'

A>

B'non-positive'

C<=

D'negative'

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<=' in first blank reverses the logic.

Using 'negative' instead of 'non-positive' changes meaning.

The ternary checks if num is greater than 0; if not, it returns 'non-positive'.

5fill in blank

hard

Fill all three blanks to create a ternary that returns uppercase key if value > 10, else lowercase key if value > 5, else 'low'.

Javascript

const label = value [1] 10 ? key.[2]() : (value [3] 5 ? key.toLowerCase() : 'low');

Drag options to blanks, or click blank then click option'

A>

BtoUpperCase

D<=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<=' instead of '>' changes the logic.

Using 'toLowerCase' in second blank returns lowercase instead of uppercase.

The first condition checks if value is greater than 10, then returns uppercase key. The second checks if value is greater than 5, then returns lowercase key. Otherwise, returns 'low'.

Practice

1. What does the ternary operator condition ? expr1 : expr2 do in JavaScript?

easy

A. Executes both expr1 and expr2 and returns their sum.

B. Always returns expr2 regardless of the condition.

C. Throws an error if condition is false.

D. Returns expr1 if condition is true, otherwise returns expr2.

Solution

1. Step 1: Understand the ternary operator structure

   The ternary operator has the form condition ? expr1 : expr2. It checks the condition.

2. Step 2: Determine the returned value based on the condition

   If the condition is true, it returns expr1. Otherwise, it returns expr2.

3. Final Answer:

   Returns expr1 if condition is true, else expr2 -> Option D

4. Quick Check:

   condition ? expr1 : expr2 = expr1 or expr2 [OK]

Hint: Remember: condition ? trueValue : falseValue [OK]

Common Mistakes:

• Thinking both expressions run always
• Confusing the order of expr1 and expr2
• Assuming it throws error on false condition

2. Which of the following is the correct syntax for using the ternary operator in JavaScript?

easy

A. condition ? expr1 : expr2;

B. condition ? expr1, expr2;

C. condition : expr1 ? expr2;

D. condition ? (expr1 : expr2);

Solution

1. Step 1: Recall the ternary operator syntax

   The correct syntax is condition ? expr1 : expr2 with a question mark and colon separating parts.

2. Step 2: Check each option for correct punctuation

   condition ? expr1 : expr2; matches the correct syntax. Options B, C, and D misuse commas, colons, or parentheses.

3. Final Answer:

   condition ? expr1 : expr2; -> Option A

4. Quick Check:

   Syntax is condition ? expr1 : expr2 [OK]

Hint: Look for ? and : in correct order with no extra symbols [OK]

Common Mistakes:

• Using commas instead of colon
• Swapping ? and :
• Adding unnecessary parentheses

3. What is the output of this code?

const age = 20;
const canVote = age >= 18 ? 'Yes' : 'No';
console.log(canVote);

medium

A. 'No'

B. 'Yes'

C. true

D. undefined

Solution

1. Step 1: Evaluate the condition age >= 18

   Since age is 20, which is greater than or equal to 18, the condition is true.

2. Step 2: Determine the value assigned to canVote

   Because the condition is true, canVote is assigned the string 'Yes'.

3. Final Answer:

   'Yes' -> Option B

4. Quick Check:

   20 >= 18 ? 'Yes' : 'No' = 'Yes' [OK]

Hint: Check condition result true or false to pick value [OK]

Common Mistakes:

• Confusing true and false branches
• Thinking it returns boolean true/false
• Ignoring the condition value

4. Find the error in this code snippet:

let score = 85;
let grade = score > 90 ? 'A' : score > 80 ? 'B' : 'C';
console.log(grade);

medium

A. The code is correct and will output 'B'.

B. Incorrect use of multiple ternary operators is not allowed.

C. Missing parentheses around nested ternary expressions.

D. The variable grade is not declared properly.

Solution

1. Step 1: Analyze the nested ternary expression

   The expression uses nested ternary operators without parentheses, which is allowed in JavaScript.

2. Step 2: Evaluate the condition with score = 85

   First condition score > 90 is false, so it checks score > 80, which is true, so grade is 'B'.

3. Final Answer:

   The code is correct and will output 'B'. -> Option A

4. Quick Check:

   Nested ternary without parentheses works [OK]

Hint: Nested ternary operators can be used without parentheses [OK]

Common Mistakes:

• Assuming nested ternary needs parentheses
• Thinking multiple ternaries are invalid syntax
• Confusing variable declaration errors

5. You want to assign a variable status based on a number score: if score is 0 or less, status should be 'Fail'; if between 1 and 50, 'Pass'; otherwise 'Excellent'. Which ternary expression correctly does this?

hard

A. const status = score <= 0 ? 'Fail' : (score > 50 ? 'Pass' : 'Excellent');

B. const status = score < 0 ? 'Fail' : score < 50 ? 'Pass' : 'Excellent';

C. const status = score <= 0 ? 'Fail' : score <= 50 ? 'Pass' : 'Excellent';

D. const status = score === 0 ? 'Fail' : score < 50 ? 'Pass' : 'Excellent';

Solution

1. Step 1: Understand the conditions for status

   score <= 0 means 'Fail', between 1 and 50 means 'Pass', and above 50 means 'Excellent'.

2. Step 2: Check each option against these conditions

   const status = score <= 0 ? 'Fail' : score <= 50 ? 'Pass' : 'Excellent'; correctly checks score <= 0 for 'Fail', then score <= 50 for 'Pass', else 'Excellent'. Others have wrong ranges or conditions.

3. Final Answer:

   const status = score <= 0 ? 'Fail' : score <= 50 ? 'Pass' : 'Excellent'; -> Option C

4. Quick Check:

   Correct ranges and order in ternary [OK]

Hint: Check conditions cover all ranges without gaps [OK]

Common Mistakes:

• Using wrong comparison operators
• Missing equal signs causing wrong ranges
• Incorrect order of conditions