JavaScript: Conditional Operator
?: (Conditional operator)
The conditional operator is used as a shortcut for standard if statement. It takes three operands.
Syntax
Condition ? expr1: expr2
Parameters
condition : An expression that evaluates to true or false.
expr1, expr2 : Expressions with values of any types.
If the condition is true, the operator returns the value of expr1; otherwise, it returns the value of expr2.
For example
status = (marks >= 30) ? "Pass" : "Fail"
The statement assigns value "Pass" to the variable status if marks are 30 or more. Otherwise, it assigns the value of "Fail" to status.
Example:
In the following web document the conditional operator statement [status = (marks >= 30) ? "Pass" : "Fail"] assigns value "Pass" to the variable status if marks are 30 or more. Otherwise, it assigns the value of "Fail" to status.
HTML Code
<!doctype html><head>
<meta charset="utf-8">
<title>JavaScript conditional operator example with DOM</title>
<meta name="description" content="This document contains an example of JavaScript conditional operator with DOM" />
</head>
<form name="example" onsubmit="ViewOutput()">
<input type="text" id="marks" placeholder="Enter Marks" />
<input type="submit" value="Submit" />
</form>
<body>
<script src="javascript-conditional-operator-example1.js">
</script>
</body>
</html>
JS Code
function ViewOutput()
{
'use strict';
var marks = document.getElementById("marks").value;
var status1 = (marks >= 30) ? "Pass" : "Fail";
var newParagraph = document.createElement("p"); //creates a new paragraph element
var newText = document.createTextNode(status1); //creates text along with ouput to be displayed
newParagraph.appendChild(newText); //created text is appended to the paragraph element created
document.body.appendChild(newParagraph); // created paragraph and text along with output is appended to the document body
}
View the example in the browser
JavaScript: Conditional Operator and If else statement
The conditional operator statement of the above example
status = (marks >= 30) ? "Pass" : "Fail"
is equivalent to the following statement.
if marks>=30
document.write("Pass");
else
document.write("Fail");
See also
comma
delete
function
in
instanceof
new
this
typeof
void
Want to Test your JavaScript skill ?
Want to Practice JavaScript exercises ?
- JavaScript basic [ 13 Exercises with Solution ]
- JavaScript functions [ 21 Exercises with Solution ]
- JavaScript conditional statements and loops [ 10 Exercises with Solution ]
- JavaScript array [ 13 Exercise with Solution ]
- JavaScript regular expression [ 6 Exercises with Solution ]
- JavaScript HTML DOM [ 14 Exercises with Solution ]
- JavaScript Drawing [ 5 Exercises with Solution ]
- JavaScript Object [ 4 Exercises with Solution ]
Previous: JavaScript: String Operators
Next: JavaScript: Comma Operator
Test your Programming skills with w3resource's quiz.
JavaScript: Tips of the Day
Parse an HTTP Cookie header string and return an object of all cookie name-value pairs
Example:
const parseCookie = str =>
str
.split(';')
.map(v => v.split('='))
.reduce((acc, v) => {
acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim());
return acc;
}, {});
console.log(parseCookie('foo=bar; equation=E%3Dmc%5E2')); // { foo: 'bar', equation: 'E=mc^2' }
Output:
[object Object] {
equation: "E=mc^2",
foo: "bar"
}
- Weekly Trends
- Java Basic Programming Exercises
- SQL Subqueries
- Adventureworks Database Exercises
- C# Sharp Basic Exercises
- SQL COUNT() with distinct
- JavaScript String Exercises
- JavaScript HTML Form Validation
- Java Collection Exercises
- SQL COUNT() function
- SQL Inner Join
- JavaScript functions Exercises
- Python Tutorial
- Python Array Exercises
- SQL Cross Join
- C# Sharp Array Exercises
We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook