hard to read javascript code - single line logic to "demystify"

Question

Can someone demystify this line for me?
It's javascript and it works fine, I just don't understand the exact logic behind the code. Maybe it would help to split the code into several lines or write it in c# or delphi for "comparison".

(I got it from here: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions)

many thanks!

$('#inlay-container').animate(
{
    left: parseInt($('#container').css('left'),10) == 0 ? +$('#container').outerWidth() : 0
}...

Your code is too long, "Extramystified": `left: $('#container').css('left')?0:$('#container').outerWidth()` — Derek 朕會功夫, Jun 03 '12 at 17:44

score 2 · Answer 1 · answered Jun 03 '12 at 17:22

This is basically just a ternary expression. The form is (bool) ? (true val) : (false val). What it is doing is animating the #inlay-container by setting the left value to either +$('#container').outerWidth() or 0 depending on the return of the statement parseInt($('#container').css('left'),10) == 0 where we are comparing the left value of the #container to 0

score 1 · Answer 2 · edited May 23 '17 at 12:12

1

In plain language:

if #container's css left property is 0

   animate #inlay-container to right equal to the outer width of #container
else

   animate #inlay-container to left 0 from it's current position

We can elaborate that code into

var moveLeft;
if(parseInt($('#container').css('left'),10) == 0)
  moveLeft = $('#container').outerWidth();
else
  moveLeft = 0;
$('#inlay-container').animate(
{
    left: moveLeft
}

What it's using is a shorthand if else assignment. It's called ternary operator like

val =  condition? this : that

Read more Operator precedence with Javascript Ternary operator and http://msdn.microsoft.com/en-us/library/be21c7hw(v=vs.94).aspx

edited May 23 '17 at 12:12

Community

1
1

answered Jun 03 '12 at 17:21

Prasenjit Kumar Nag

13,391
3
45
57

I understood that it's doing a comparison etc but I see no if and else's, I have not seen code written like this before.I have no clue how to look this up since I'm not sure what to look up exactly. Google doesn't accept "?" or "+" since they are single characters. What is confusing me are both of these signs in relation to what they do as well as how the commands are chained up like this. – Stoikerty Jun 03 '12 at 17:27
1

Updated my answer. You have to search with `ternary operator` . Most of the languages have this shorthand `if-else` – Prasenjit Kumar Nag Jun 03 '12 at 17:32
thanks, I don't mind such short code but when you see it for the first time... it's an abyss ^^ – Stoikerty Jun 03 '12 at 17:43

Derek 朕會功夫 · Answer 3 · 2012-06-03T17:41:27.873

What it means is

Use container's width as inlay-container's left if container's left is 0, or else inlay-container's left will be 0.

Problem: "Demystified".

parseInt($('#container').css('left'),10) == 0 ?  //if its left is 0
    +$('#container').outerWidth() :              //then use container's width
    0                                            //else use 0

This is what we called Ternary operation (or Ternary expression).
Read more: Ternary operation ^{_{(A Wikipedia search always comes in handy!)}}

Syntax:

(condition) ? ture : false ;

//which is the same as:
if(condition){
    true
}else{
    false
}

However, the main difference between them is that ternary expression can be used inline.

var txt = a>1 ? a : 0;  //Yup!

var txt = 0;            //Too long.
if(a>1){
    txt = a;
}

Unrelated:
Actually your code is a bit long IMO. I can shorten it even more:

left: +$('#container').css('left')?0:+$('#container').outerWidth()

thecodeparadox · Accepted Answer · 2012-06-03T17:58:59.587

1

$('#inlay-container').animate(
{
    left: parseInt($('#container').css('left'),10) == 0 ? + $('#container').outerWidth() : 0
}

$('#container').css('left') get the left position of #container set by CSS.

parseInt($('#container').css('left'),10) convert to integer that left.

Now you should know about ternary operator --- ? --- : ---:

General if-else:

if(something) {
  alert('done');
} else {
  alert('not done');
}

In ternary it written as:

something ? alert('done') : alert('not done');

So ? act as if and : act as else.

$('#container').outerWidth() get the width of #container including padding and border.

So therefore,

 parseInt($('#container').css('left'),10) == 0  ?  // if left of #container is 0

                   + $('#container').outerWidth() // then left increase to outerwidth

                    : 0                             // else left will set to 0

So above condition can also be written as

if($('#container').css('left'),10) == 0) {
   left = $('#container').outerWidth();
} else {
   left = 0;
}

At last, whole statement can be written as

var left = null;
if($('#container').css('left'),10) == 0) {
   left = $('#container').outerWidth();
} else {
   left = 0;
}

$('#inlay-container').animate({
    left: left
});

Related refs:

edited Jun 03 '12 at 17:58

answered Jun 03 '12 at 17:26

thecodeparadox

86,271
21
138
164

ah I see! I didn't know about the ternary operator. Thanks for everyone's advice! So _"+$('#container').outerWidth()"_ basically means _"$('#container').outerWidth() = $('#container').outerWidth() + 1"_ – Stoikerty Jun 03 '12 at 17:35
1

@Yoschi - No it does not. What `+$('#container').outerWidth()` means is `turn the value return by $('#container').outerWidth() into number`. What you are saying (`outerWidth()+1`) is `++$('#container').outerWidth()`, which is a different thing. – Derek 朕會功夫 Jun 03 '12 at 17:38
why does it need to be translated into a number? I thought the `return` value here was already a number. – Stoikerty Jun 03 '12 at 17:47
1

@Yoschi no it always return string – thecodeparadox Jun 03 '12 at 17:52
@Yoschi I've updated my answer with some links, please see them – thecodeparadox Jun 03 '12 at 17:59

hard to read javascript code - single line logic to "demystify"

4 Answers4

Problem: "Demystified".

At last, whole statement can be written as