1

I was working with ng-flow example for basic image upload. I saw an expression which I didn't understand how it works.

Basically, this is the expression:

<p>Demo object array expression in Javascript:</p>
<p id="demo"></p>

<script>
  var expr = !!{png:1,gif:1,jpg:1,jpeg:1}['pdf', 'gif', 'jpg'];
  document.getElementById("demo").innerHTML = expr ;
</script>

It seems that the above means return true if the array has a valid image in the last element. I am not sure why, but after I studied the code, this is my conclusion.

Appreciate if someone could help me understand the above and give me a link for documentation. I searched everywhere but didn't find any reference.

Click here to see the html which has this expression from ng-flow

I think the intention of the code is to disable upload of the file if it is not an image.

Anyone could recommend and easier alternative, please let me know.

Tarek

tarekahf
  • 738
  • 1
  • 16
  • 42
  • Where do you see that expression on the page you linked to? It has `!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]` – Barmar Aug 22 '16 at 17:00
  • That is exactly the one you mentioned. I just simplified it, and replaced [$file.getExtension()] with ['pdf', 'gif', 'jpg']. – tarekahf Aug 22 '16 at 18:07
  • But `$file.getExtension()` is just one string, not 3 strings. You didn't simplify it, you made it more confusing. – Barmar Aug 22 '16 at 18:54

1 Answers1

3

There's actually quite a bit going on in that statement but it's mostly just boolean logic.

First look at the statement ['pdf', 'gif', 'jpg']. This contains the javascript , operator which sets the return value of the statement it's contained in to the value after the last comma.

E.g.

var a = 1, 2, 'foo'; // a -> 'foo'

var foo = ['a', 'b', 'c'];
foo[0, 2, 1]; // foo[0, 2, 1] -> foo[1] -> 'b'

In this case this case it resolves to ['jpg']

Some documentation on that here:

Javascript comma operator

And as you probably already guessed, the ! returns a boolean expression that reverses the value of a truthy or true statement to false and a falsey or false statement to true.

{png:1,gif:1,jpg:1,jpeg:1}['jpg']; is 1 which is a truthy value. !1 becomes false. Finally !false is simply true;

See more here:

Truthy

Falsy

Logical operators

Mike
  • 3,830
  • 2
  • 16
  • 23
  • 1
    It seems like this expression is trying to be deliberately confusing. `['pdf', 'gif', 'jpg']` looks like an array of strings, but it's actually being used as a property accessor of the object. – Barmar Aug 22 '16 at 16:57
  • @Barmar Yeah, it makes no sense that they would use it here – Mike Aug 22 '16 at 17:06
  • I'm not even sure where he got it from. It's not in the link in the question. – Barmar Aug 22 '16 at 17:07
  • OK, I got it. So it is actually using the [] brackets to get the object property. I thought it was an array. So, if the property is not defined, it will be "undefined", and that is why it uses double negation. Thank you ...! – tarekahf Aug 22 '16 at 18:16
  • @tarekahf It also uses the double negation to turn `1` into `true` , but that could be done by changing the object to `{png:true, gif:true, jpg: true, jpeg: true}`. I guess they used `1` to make it shorter. – Barmar Aug 22 '16 at 18:57