3

In jQuery Mobile I find the following code:

$.jqmData = function( elem, prop, value ){
   return $.data( elem, prop && $.mobile.ns + prop, value );
};

What I do not understand is this construct:

prop && $.mobile.ns + prop

It is using Javascript's logical and operator, but for the key parameter for the jQuery data which is a string parameter. Can someone please explain this construct?

BruceHill
  • 6,954
  • 8
  • 62
  • 114
  • 1
    Where'd you get this piece of code, it looks different (and easier to understand) here: https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.data.js#L92 – m90 Aug 26 '13 at 12:07
  • It is admittedly an older version of *jQuery Mobile* that is in production at a client site. – BruceHill Aug 26 '13 at 12:10
  • The corresponding version of *jQuery* is *1.6.2*, but this question pertains more to the javascript construct. I am aware that you can use the javascript || operator as a coalesce operator, but have never seen the && operator used in this way before. – BruceHill Aug 26 '13 at 12:17

2 Answers2

4

Javascript does not implicitly return Boolean values when using Boolean operators:

&& returns the second element, if both elements equal to true or the first, if one of them is false || returns the first element, if it equals to true, or the second, if the first matches false

Some examples:

("foo" && "bar") === "bar"
(1 && "foo") === "foo"
(undefined && false) === undefined
(1 || "foo") === 1
(0 || "foo") === "foo"
(undefined || "foo") === "foo"
(undefined || 1) === 1
(undefined || false) === false

Your case from jQuery mobile:

prop && $.mobile.ns + prop - in this case prop will be used if prop AND $.mobile.ns are equal to true. If one of them is false, $.mobile.ns will be used. I think in this situation it's used when prop === null which equals an empty string.

You could expand this to:

$.jqmData = function( elem, prop, value ){
   if(prop == false) 
      prop = $.mobile.ns

   return $.data( elem, prop + prop, value );
};
HenningCash
  • 2,030
  • 18
  • 17
  • 1
    For better understanding one should also note that ``undefined``, ``null``, ``NaN``, ``0``, ``""`` and ``false`` evaluate to ``false`` (falsy values) wheras every other value (like ``{}``, ``[]``, ``"hello"``) evaluates to ``true`` (truthy values). – prayerslayer Aug 26 '13 at 12:26
  • Why was this upvoted? "*prop will be used if prop AND $.mobile.ns are equal to true. If one of them is false, $.mobile.ns will be used*", and the expanded code, are plain wrong. – Bergi Aug 26 '13 at 12:30
  • `(undefined && false) === false` is wrong, too. – Bergi Aug 26 '13 at 12:33
  • I think that it was upvoted because it was closer to being accurate than the previous answer (which is now deleted) which implied that the expression would return either "true" or "false" – BruceHill Aug 26 '13 at 12:38
  • @BruceHill: Yeah, probably. The first sentence looked very good to me as well, but from there on the quality descends into a complete mess :-( – Bergi Aug 26 '13 at 12:43
  • Sorry for the low quality of the answer, I had to rush off. Edited it – HenningCash Aug 26 '13 at 15:18
2

Can someone please explain this construct?

JavaScript's logical operators do not only work on booleans, but on any type. They will internally convert the values to boolean to check their truthiness, but they won't change the result type.

For strings, only the empty string is considered falsy. The AND operator && works like "if the left operand is falsy, return it, otherwise return the right operand". So if invoked on the string prop, it will check whether prop is the empty string and then return it, or otherwise concatenate it with $.mobile.ns. It's a shortcut for

!prop ? prop : $.mobile.ns+prop
// or, if restricted to strings:
prop == "" ? "" : $.mobile.ns+prop
Bergi
  • 630,263
  • 148
  • 957
  • 1,375