Question mark and colon in JavaScript

I came across the following line

hsb.s = max != 0 ? 255 * delta / max : 0;

What do the ? and : mean in this context?

It is called the Conditional Operator (which is a ternary operator).

It has the form of: condition ? value-if-true : value-if-false
Think of the ? as "then" and : as "else".

Your code is equivalent to

if (max != 0)
  hsb.s = 255 * delta / max;
else
  hsb.s = 0;

Properly parenthesized for clarity, it is

hsb.s = (max != 0) ? (255 * delta / max) : 0;

meaning return either

• 255*delta/max if max != 0
• 0 if max == 0

This is probably a bit clearer when written with brackets as follows:

hsb.s = (max != 0) ? (255 * delta / max) : 0;

What it does is evaluate the part in the first brackets. If the result is true then the part after the ? and before the : is returned. If it is false, then what follows the : is returned.

hsb.s = max != 0 ? 255 * delta / max : 0;

? is a ternary operator. It works like an if in conjunction with the :

!= means not equals

So, the long form of this line would be

if (max != 0) { //if max is not zero
  hsb.s = 255 * delta / max;
} else {
  hsb.s = 0;
}

?: is a short-hand condition for else {} and if(){} problems. So your code is interchangeable to this:

if(max != 0){
       hsb.s = 225 * delta / max
}
else {
       hsb.s = 0
}

MDN - Conditional (Ternary) Operator

? : isn't this the ternary operator?

var x= expression ? true:false

What you are referring to is called a ternary operator, it is essentially a basic if condition check that can be written to execute an operation if the block of code within the ternary operation is valid, otherwise default to a fallback.

A ternary operation is written in the following syntax:

condition ? exprIfTrue : exprIfFalse

• condition An expression whose value is used as a condition.
• exprIfTrue An expression which is evaluated if the condition evaluates to a truthy value (one which equals or can be converted to true).
• exprIfFalse An expression which is executed if the condition is falsy (that is, has a value which can be converted to false).

Example

Take the given function below which should return the string Yes if the number provided to the function is even, otherwise return No.

function isEven(num) {
    return (num % 2 == 0) ? "Yes" : "No";
}

console.log("2: " + isEven(2));
console.log("3: " + isEven(3));

Explanation

The operation above broken down:

• (num % 2 == 0) | This is a simple if statement condition to check if the expression within the brackets is true.
• ? "Yes" If the operation is true, the string literal given is automatically returned as a result of this execution.
• : "No" This is the else clause in this operation, if the condition is not met then No is returned.

Be careful with this. A -1 evaluates to true although -1 != true and -1 != false. Trust me, I've seen it happen.

so

-1 ? "true side" : "false side"

evaluates to "true side"