{"id":1550,"date":"2018-02-27T11:01:12","date_gmt":"2018-02-27T16:01:12","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1550"},"modified":"2018-06-29T07:31:37","modified_gmt":"2018-06-29T12:31:37","slug":"javascript-use-conditional-ternary-operator","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/02\/27\/javascript-use-conditional-ternary-operator\/","title":{"rendered":"JavaScript: How to use the conditional ternary operator"},"content":{"rendered":"

In addition to “normal” comparison operators (see the links below), JavaScript has a unique comparison operator that can assign values rather than just return a boolean true or false. This is called the “Conditional (Ternary) Operator”.\u00a0 It follows this syntactical construction:<\/p>\n

variablename = (condition) ? value1 : value2<\/pre>\n
The question mark means: If the condition is true, then variablename is set to value1. Else, variablename is set to value2.<\/p>\n
For example, one way to check if someone is old enough to vote is with a traditional if\/else block, where the one conditional is evaluated to be either true or false. For example:<\/p>\n
var age = 16;\r\n\r\nif(age < 18) {\r\n  voteable = \"Too young\";\r\n}\r\nelse {\r\n  voteable = \"Old enough\";\r\n}\r\n\r\nconsole.log(voteable);<\/pre>\n
Using the conditional ternary operator, the if\/else block can be reduced down to one statement:<\/p>\n
var age = 16;\r\n\r\nvar voteable = (age < 18) ? \"Too young\" : \"Old enough\"; \r\n\r\nconsole.log(voteable);<\/pre>\n
This is also useful for determining what happens in some random condition. For example, if you have a series of random numbers between 0 and 1 and you want to divide the results such that any random number below 0.5 will be assigned a 2 and above 0.5 will be assigned a 4:<\/p>\n
let randNum = Math.random(1);\r\ngameboard[randomSquare.x][randomSquare.y] = randNum > 0.5 ? 2 : 4;<\/pre>\n
Here is another example of an if block being reduced to one line:<\/p>\n
if (colorIndex === 4) {\r\n    colorIndex = 0;\r\n} else {\r\n    colorIndex++;\r\n}<\/pre>\n
can be reduced to:<\/p>\n
colorIndex = (colorIndex === 4) ? 0 : colorIndex+=1;<\/pre>\n
 <\/p>\n
For more information about traditional conditional operators in JavaScript see:
\nhttps:\/\/www.w3schools.com\/js\/js_comparisons.asp<\/a>
\nhttps:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Expressions_and_Operators#Comparison<\/a><\/p>\n
For more information about the ternary operator, see:
\nhttps:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Conditional_Operator<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In addition to “normal” comparison operators (see the links below), JavaScript has a unique comparison operator that can assign values rather than just return a boolean true or false. This is called the “Conditional (Ternary) Operator”.\u00a0 It follows this syntactical construction: variablename = (condition) ? value1 : value2 The question mark means: If the condition … Continue reading JavaScript: How to use the conditional ternary operator<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[45,107],"class_list":["post-1550","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-javascript","tag-ternary-operator"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1550"}],"version-history":[{"count":7,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1550\/revisions"}],"predecessor-version":[{"id":2027,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1550\/revisions\/2027"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}