- JavaScript Basics
- JavaScript Home
- JavaScript Syntax
- JavaScript Placements
- JavaScript Output
- JavaScript Statements
- JavaScript Keywords
- JavaScript Comments
- JavaScript Variables
- JavaScript var
- JavaScript let
- JavaScript const
- JavaScript var Vs let Vs const
- JavaScript Operators
- JavaScript Arithmetic Operators
- JavaScript Assignment Operators
- JS Comparison Operators
- JavaScript Logical Operators
- JavaScript Bitwise Operators
- JavaScript Ternary Operator
- JavaScript Operator Precedence
- JavaScript Data Types
- JavaScript typeof Operator
- JS Conditional Statements
- JavaScript Conditional Statement
- JavaScript if Statement
- JavaScript if...else Statement
- JavaScript switch Statement
- JavaScript Loops
- JavaScript for Loop
- JavaScript while Loop
- JavaScript do...while Loop
- JavaScript break Statement
- JavaScript continue Statement
- JavaScript break Vs. continue
- JavaScript Popup Boxes
- JavaScript Dialog Box
- JavaScript alert Box
- JavaScript confirm Box
- JavaScript prompt Box
- JavaScript Functions
- JavaScript Functions
- JS Function with Parameter
- JavaScript Return Statement
- JavaScript Variable Scope
- JavaScript setTimeout() Method
- JavaScript setInterval() Method
- JavaScript Events
- JavaScript Events
- JavaScript onclick Event
- JavaScript onload Event
- JavaScript Mouse Events
- JavaScript onreset Event
- JavaScript onsubmit Event
- JavaScript Objects
- JavaScript Objects
- JavaScript Number Object
- JavaScript Array Object
- JavaScript String Object
- JavaScript Boolean Object
- JavaScript Math Object
- JavaScript RegExp Object
- JavaScript Date Object
- JavaScript Browser Objects
- JavaScript Browser Objects
- JavaScript Window Object
- JavaScript Navigator Object
- JavaScript History Object
- JavaScript Screen Object
- JavaScript Location Object
- JavaScript Document Object
- JS Document Object Collection
- JS Document Object Properties
- JS Document Object Methods
- JS Document Object with Forms
- JavaScript DOM
- JavaScript DOM
- JavaScript DOM Nodes
- JavaScript DOM Levels
- JavaScript DOM Interfaces
- JavaScript Cookies
- JavaScript Cookies
- JavaScript Create/Delete Cookies
- JavaScript Advance
- JavaScript Regular Expression
- JavaScript Page Redirection
- JavaScript Form Validation
- JavaScript Validations
- JavaScript Error Handling
- JavaScript Exception Handling
- JavaScript try-catch throw finally
- JavaScript onerror Event
- JavaScript Multimedia
- JavaScript Animation
- JavaScript Image Map
- JavaScript Debugging
- JavaScript Browser Detection
- JavaScript Security
- JavaScript Misc
- JavaScript innerHTML
- JavaScript getElementById()
- JS getElementsByClassName()
- JS getElementsByName()
- JS getElementsByTagName()
- JavaScript querySelector()
- JavaScript querySelectorAll()
- JavaScript document.write()
- JavaScript console.log()
- JavaScript instanceof
- JavaScript Programs
- JavaScript Programs
- JavaScript Test
- JavaScript Online Test
- Give Online Test
- All Test List
Conditional (Ternary) Operator in JavaScript
Conditional or ternary operator in JavaScript takes three operands, used as an alternative to if...else. For example:
<!DOCTYPE html> <html> <body> <script> let x = 10, y = 20; document.write("Largest = "); x>y ? document.write(x) : document.write(y); </script> </body> </html>
The same JavaScript code can also be written as:
<script> let x = 10, y = 20; x>y ? document.write("Largest = ", x) : document.write("Largest = ", y); </script>
And here is another way, the same program/example can be written:
<script> let x = 10, y = 20, large; large = x>y ? x : y; document.write("Largest = ", large); </script>
JavaScript Ternary Operator (?:) Syntax
The syntax of ternary operator in JavaScript, is:
condition ? evaluateIfTrue : evaluateIfFalse
That is, if the condition evaluates to be True, then the whole expression replaced with evaluateIfTrue, otherwise replaced with evaluateIfFalse. For example:
20==20 ? document.write("Both numbers are equal") : document.write("Both numbers are not equal")
Since the condition 20==20 evaluates to be true, therefore the first expression gets executed, that is:
document.write("Both numbers are equal")
will be executed, and Both numbers are equal will be displayed on the output.
Nested Ternary Operator in JavaScript
To understand nested ternary operator in JavaScript, the best and simple example that I can show you is, finding the largest of three numbers using ternary operator:
<!DOCTYPE html> <html> <body> <script> let a = 10, b = 20, c = 30, large; large = (a>b) ? ((b>c) ? (a) : (c>a ? c : a)) : (b>c ? b : c); document.write("Largest = ", large); </script> </body> </html>
In above example, the following expression:
(a>b) ? ((b>c) ? (a) : (c>a ? c : a)) : (b>c ? b : c);
will be evaluated in a way that:
- First the condition (a>b) gets evaluated
- Since the condition (a>b) or (10>20) evaluates to be false
- Therefore, (b>c ? b : c) replaced the whole expression
- Now the condition b>c gets evaluated
- Since the condition b>c or 20>30 evaluates to be false
- Therefore, c replaced the whole expression
- Since the value of c is 30, therefore 30 gets initialized to large variable
« Previous Tutorial Next Tutorial »