JS shorthand for if else

Question

I am trying to improve my coding skills, but I can not seem to figure this out. How do I write the following in shorthand?

/* fade */
$('.toggle-ui').on({
    'click': function (e) {
        e.preventDefault();
        var divToFade = ['#logo', '#hide-interface'];

        $.each(divToFade, function(intValue, currentElement) {
            // check alpha state and switch
            var currOp = $(currentElement).css('opacity');

            if (currOp == 1) $(currentElement).css('opacity', 0.5);
            if (currOp == 0.5) $(currentElement).css('opacity', 1);
        });
    }

*ternary operator* is shorthand for if-else in most programming languages. — Praveen, Mar 03 '14 at 10:40
i think u r looking for ternary Operator i.e. (test condition)?"successs result":"fail result"; — Sumant, Mar 03 '14 at 10:41

score 7 · Accepted Answer · edited May 23 '17 at 12:28

7

Use the ternary operator:

$(currentElement).css('opacity', currOp == 1 ? 0.5 : 1);

As a side note: I am used to using === over == to avoid accidental mistakes by unintended type coercion. To use it here, I would parse currOp to a number via +:

$(currentElement).css('opacity', +currOp === 1 ? 0.5 : 1);

For more information, have a look here.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 03 '14 at 10:40

Dennis

14,210
2
34
54

Thank you. This was the syntax I was looking for. I was confused by the operators being inside the brackets. I was putting them on the outside. – obmon Mar 03 '14 at 11:04
@obmon do not radically change answers. If something isn't working downvote and comment. and for the record, `===` works just fine, you must have done something else wrong. – Shadow The GPT Wizard Mar 03 '14 at 11:06
@ShadowWizard Or i can edit it and put an explanation to the edit. currOp === 1 doesn't work. currOp == 1 works. – obmon Mar 03 '14 at 11:07
1

@ShadowWizard Uh.. I tried it. It didn't work. Removed one of the eq signs. It worked. – obmon Mar 03 '14 at 11:11
@ShadowWizard Stop changing it back. I am testing the code myself and 3 "=" DO NOT WORK. – obmon Mar 03 '14 at 11:28
2

Agreed! `.css()` returns a string, so it needs 2 `==` to evaluate the string to int and do the comparison. – António Almeida Mar 03 '14 at 11:33
@obmon please dont change the answers at your own. If something isnt working for you, either comment about it or ask the author for the clarification and let the answerer do the required changes. – Sahil Mahajan Mj Mar 03 '14 at 11:34
1

why not? If I change it and put an explanation. What's the problem with that? – obmon Mar 03 '14 at 11:36
@Chips_100: your comments on the edit please, if it is correct or not. – Sahil Mahajan Mj Mar 03 '14 at 11:36
2

you should be able to use three `=` if you first parse `currOp` to a number, i.e. by a `+`. So it would be `+currOp === 1`. `==` will automatically coerce the types to match, whereas `===` doesn't. – Dennis Mar 03 '14 at 11:56
2

@obmon that's not your answer to change. Comment and let the author fix if needed, as is now the case. – Shadow The GPT Wizard Mar 03 '14 at 12:05
Thats why it is better to ask the author for clarification rather than changing someone else's code. Maybe he's having some different logic – Sahil Mahajan Mj Mar 03 '14 at 12:05
2

@SahilMahajanMj There is nothing wrong in *improving* someone else's answer, except if you care about his susceptibility... obmon has not been offensive by the way. – Mar 03 '14 at 12:20
1

I think it was totally OK to edit my answer to have a working version (as tested by obmon) until I can personally react to the edit. I did not feel offended by anyone in any way, especially considering that my first code snippet did not work correctly. As you have seen, I added my explanation about `==` vs `===` when I had time do so. – Dennis Mar 03 '14 at 12:50

score 2 · Answer 2 · answered Mar 03 '14 at 11:08

2

You can also do simple math:

$(currentElement).css('opacity', 1.5 - currOp);

Since

1.5 - 1.0 = 0.5
1.5 - 0.5 = 1.0

answered Mar 03 '14 at 11:08

Cyrille

25,014
12
67
90

That would confuse me or anyone else when reading the code in the future i think.. – obmon Mar 03 '14 at 11:09
@obmon It deserves an upvote though, really clever, +1. – Mar 03 '14 at 11:14
1

@obmon Me too. I tend to avoid this kind of writing, but it's a viable, shorter solution. – Cyrille Mar 03 '14 at 11:24
1

@obmon Moreover, a small comment would be helpful enough : `// currOp = 1 or .5`. – Mar 03 '14 at 11:26

JS shorthand for if else

2 Answers2