58

I just saw someone use this piece of code:

ctx = canvas.getContext && canvas.getContext('2d');

How does the double ampersand work in this context? Would it not just assign "true" to the ctx variable?

NullUserException
  • 83,810
  • 28
  • 209
  • 234
Andy Hin
  • 30,345
  • 42
  • 99
  • 142
  • Did you try some possible usecases??? But no, although it might, depending on what the function returns, if it exists. – Dave Newton Oct 14 '12 at 01:47
  • You might be interested in: http://stackoverflow.com/questions/3826473/boolean-operations-in-python-ie-the-and-or-operators, it's Python but it applies to JS (and few other languages) as well. – NullUserException Oct 14 '12 at 02:01

2 Answers2

80

This is a common way to make sure your function exists before you call it.

It works like this (From developer.mozilla.com):

expr1 && expr2 Returns expr1 if it can be converted to false; otherwise, returns expr2. Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false.

In other words, Javascript does not coerce the operands to boolean values unless it has to.

4 && 5 Returns 5, not true.

In your case, if the first expression is undefined (which is convertible to false), then ctx will be false, and the second expression does not get evaluated. If the first expression is a function (which cannot be converted to false), then Javascript evaluates the second expression, and assigns it's value to the ctx variable.

Seth
  • 45,033
  • 10
  • 85
  • 120
  • Yours and @Trott answers were correct. Although he did post first, I felt like this one gave a clearer explanation on what was actually happening. Not sure what the proper etiquette is. – Andy Hin Oct 14 '12 at 02:05
  • A minor nitpick here as well: the first expression would be `undefined` rather than `null` if `canvas` didn't have a `.getContext` defined. – NullUserException Oct 14 '12 at 02:07
  • 8
    @AndyHin I'm way late here, but since you mentioned etiquette: You did the right thing. If you felt this was the best answer, then you should accept it, even if it wasn't the first correct answer. The point is to mark the answer that most helped you most and is most likely to help someone else coming to the site. The fact that I got my answer up first doesn't really factor into it. The first answer doesn't help someone needing help. The best answer does! – Trott Jan 25 '13 at 20:12
  • Just curious, but what if we did want a boolean result? Instead of returning the result of the first truthy expression. – Evan Sevy Aug 05 '19 at 02:27
  • You can use the Boolean object to coerce the result of the expression, i.e., `Boolean(4 && 5) -> true`, `Boolean(undefined && 5) -> false` – Seth Aug 05 '19 at 17:56
27

It will assign the return value of canvas.getContext('2d') to ctx if canvas.getContext is actually a function.

The part on the left is just to avoid an error. It makes sure that canvas has a getContext property before trying to call getContext(). This way, the code won't call canvas.getContext() if the function doesn't exist. If it didn't check first and called when the function didn't exist, an error would be logged to the console and execution would halt.

Trott
  • 66,479
  • 23
  • 173
  • 212