Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript ternary operator example with functions

I am using jQuery 1.7.1

I am just starting to use the JavaScript ternary operator to replace simple if/else statements. I have done so successfully in several places. I was surprised when I successfully made something else work when I thought for sure it wouldn't, but I tried anyway.

Here's the original statement:

function updateItem() {     $this = $(this);     var IsChecked = $this.hasClass("IsChecked");     if (IsChecked == true){         removeItem($this);     } else {         addItem($this);     } } 

Here's the same function using the ternary operator:

function updateItem() {     $this = $(this);     var IsChecked = $this.hasClass("IsChecked");     (IsChecked == true) ? removeItem($this) : addItem($this); } 

I was surprised because all of the examples I saw being used were merely setting variables like this:

x = (1 < 2) ? true : false; 

My question is whether this is "normal" use and will it work in most versions of JavaScript? Where will it fail? Are there other less obvious uses for it?

UPDATE -- Thanks for the "real world" advice!!!

I am using this as my function:

function updateItem() {     $this = $(this);     $this.hasClass("IsChecked") ? removeItem($this) : addItem($this); } 
like image 950
Evik James Avatar asked Apr 25 '12 21:04

Evik James


People also ask

Can you use functions in ternary operator?

Nope, you can only assign values when doing ternary operations, not execute functions.

What is ternary operator give an example?

The ternary operator is an operator that exists in some programming languages, which takes three operands rather than the typical one or two that most operators use. It provides a way to shorten a simple if else block. For example, consider the below JavaScript code. var num = 4, msg = ""; if (num === 4) {

Which one of the following is an ternary operator in JavaScript?

“Question mark” or “conditional” operator in JavaScript is a ternary operator that has three operands. The expression consists of three operands: the condition, value if true and value if false.

How do you write else if in ternary operator?

The ternary operator, also known as the conditional operator, is used as shorthand for an if...else statement. A ternary operator is written with the syntax of a question mark ( ? ) followed by a colon ( : ), as demonstrated below. In the above statement, the condition is written first, followed by a ? .


1 Answers

Heh, there are some pretty exciting uses of ternary syntax in your question; I like the last one the best...

x = (1 < 2) ? true : false; 

The use of ternary here is totally unnecessary - you could simply write

x = (1 < 2); 

Likewise, the condition element of a ternary statement is always evaluated as a Boolean value, and therefore you can express:

(IsChecked == true) ? removeItem($this) : addItem($this); 

Simply as:

(IsChecked) ? removeItem($this) : addItem($this); 

In fact, I would also remove the IsChecked temporary as well which leaves you with:

($this.hasClass("IsChecked")) ? removeItem($this) : addItem($this); 

As for whether this is acceptable syntax, it sure is! It's a great way to reduce four lines of code into one without impacting readability. The only word of advice I would give you is to avoid nesting multiple ternary statements on the same line (that way lies madness!)

like image 64
JonnyReeves Avatar answered Sep 17 '22 23:09

JonnyReeves