-3

enter image description here

Question 1

What does options.left = options.left || _KSM.drawOption.left means? I know _KSM.drawOption is referring to the object (also a function), but how does the || operator work here? Does it mean if _KMS.drawOption.left is undefinded, assign options.left to options.left?

Question 2

Why the author didn't use this keyword in this case? I assume it's because in this demo he didn't create an instance, because he just do the calling once. Rigtht? (I've seen a lots of this in jquery plugin that's why I'm consufed when the author call the function name instead of this within a function)

Code Lღver
  • 15,573
  • 16
  • 56
  • 75
Alex becker
  • 23
  • 5
  • 2
    Please post the code here, instead in a screenshot. – Eun Dec 22 '14 at 13:42
  • @Eun it's a video I don't have the code. – Alex becker Dec 22 '14 at 13:43
  • 2
    Then type the code manually from the screenshot. And please ask only one question per post. – JJJ Dec 22 '14 at 13:44
  • It means if `options.left` is falsy (`undefined`, `0`, `false`, ...) then use `_KMS.drawOption.left` instead (`_KMS.drawOption.left` is the default value if no `left` is passed with the options) – t.niese Dec 22 '14 at 13:49
  • Or in other words, if options.left is null (i.e. not specified) then use the defaults from _KMS.drawOption.left. – Abhitalks Dec 22 '14 at 13:50

2 Answers2

0

Question 1

This is a way to set a default value to a variable. It actually evaluate the left side and if it is falsy, the variable will be equal to the right side (even if it is also falsy).

That is a bad way of assigning default variable especially when working with integer. 0 is considered as falsy, so you will never be able to assign 0 as a left property. Instead, it will always be the default parameter of _KMS.drawOption .

Question 2

We don't have the full code so we can only assume. But my assumption would be that draw is an event, a function bind with addEventListener. That mean the context (this value) is the target of the event. My guess would be a canvas.

Community
  • 1
  • 1
Karl-André Gagnon
  • 33,662
  • 5
  • 50
  • 75
0

Logical Operators in JavaScript work a bit differently than most people expect.

Logical OR (||)

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

So instead of the expression resulting in a boolean value, it returns the first value that isn't "falsey". This has the benefit of being a great way to fill in default values in case it is undefined, null, 0, or an empty string.

var myObj = { name: 'Josh' };

myObj.age = myObj.age || 33;

Logical AND (&&)

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.

Basically just the opposite. Since any expression that evaluates to false will short circuit the logical check, it can be useful to test for the existence of a field, before trying to use it. 

var myObj = null;

if(myObj && myObj.person && myObj.person.name === "Josh") // false, no error

var myObj = {};

if(myObj && myObj.person && myObj.person.name === "Josh") // false, no error

var myObj = {person: {}};

if(myObj && myObj.person && myObj.person.name === "Josh") // false, no error

var myObj = {person: {name: "Josh"}};

if(myObj && myObj.person && myObj.person.name === "Josh") // true

However! Caution should be taken here because in the case of both boolean values true or false and integer values 0 or anything not 0 you might end up overwriting a legitimate value.

Question 2: Not enough context

Josh
  • 44,706
  • 7
  • 102
  • 124