I have seen these lines code.

this.tween && this.tween.kill(),
this.tween = TweenMax.to(object, 1, {
  ...
})

Is that a shorthand for

if(this.tween){
  this.tween.kill();
}
this.tween = TweenMax.to(object, 1, {
  ...
})

thanks ;)

I have seen these lines code.

this.tween && this.tween.kill(),
this.tween = TweenMax.to(object, 1, {
  ...
})

Is that a shorthand for

if(this.tween){
  this.tween.kill();
}
this.tween = TweenMax.to(object, 1, {
  ...
})

thanks ;)

• javascript
• if-statement
• ampersand
• shorthand
• double-ampersand

• 1 A couple of things to take away, be carefulll its && and not &, if has the upper hand for readability and if you end up expanding into muliple statement block. – Keith Commented Apr 9, 2019 at 5:51
• 2 Don't press developement code, just use if as it shows the intention clearly. – Teemu Commented Apr 9, 2019 at 5:58
• I agree with && being less readable than an if. It's a sort of "sideways Yo Yo problem". You would read the first part, see the && then see the action and you have to go back and read when the action is to be performed. It's because it's not clear when you begin reading the line that it would be a conditional. This is not idiomatic usage of JS unless you're doing an assignment. It does appear in PHP and I think Ruby and/or PERL when re you could have a line like db.connect() OR die() to terminate if a connection cannot be made. – VLAZ Commented Apr 9, 2019 at 6:30

4 Answers 4

Yes, the two are equivalent in execution.

function test(value) {
  console.log(value);
  
  value && console.log("\texecute using AND");
  if (value) console.log("\texecuted using if");
}

test(true);
test(false);
test("string");
test(""); //empty string
test(0);
test(null);
test(undefined);
test(1);
test({});

However, with that said, it's not idiomatic usage of JavaScript. So you probably shouldn't be using this construct as it can throw other developers off. Your example illustrates that well, a code that looks like

function f (condition) {
  condition && one(),
  two();
}

function one() {
  console.log("one");
}

function two() {
  console.log("two")
}

f(false);
f(true);

This is indeed effectively

function f(condition) {
  if (condition) {
    one();
 }

  two();
}

So, one() would be executed some times, while two would always be executed. However, without knowing the precedence rules, it could seem like both one() and two() would be executed conditionally. This is an easy mistake to make and even easier if it's a plex conditions and logic

person.account.moneyAmount > 0 && creditor.getDebt(person).moneyOwed > 0 && person.account.moneyAmount > creditor.getDebt(person).moneyOwed  && (deductTaxes(payAndReturnAmount(person, creditor)), printStatement()), printHello()

This is only slightly exaggerated but it's entirely possible to end up in a similar situation. If your code is as simple as a single condition and a single action then you save 2 bytes from using an inline condition vs an if statement

condition && action()
if (condition) action()
                     ^^
"extra" characters __||

Not exactly.

this.tween && this.tween.kill(),
this.tween = TweenMax.to(object, 1, {
  ...
})

if this.tween is truthy value in this statement, it is evaluated and stays there. So it bees like this code.

this.tween,
this.tween = TweenMax.to(object, 1, {
  ...
})

Yes, this is a short Hand for the above code. Here if this.tween is undefined, the code after "&&" won't be executed. After that the code following "," will be executed. here are some examples:

this.a= undefined;
this.b= 20;
this.a && this.b.toString(),   // if a is true then b will be executed and converted to string
  console.log(this.b); // if a is true the output will be a string but in this case, a is undefined and the string conversion didn't happen, the console returns an integer

this.a = 10;
this.b=20
this.a && this.b.toString(),
  console.log(this.b); // this will return a string
  
if(this.a){ // if a is true be will be converted to string
this.b = parseInt(this.b);
}
this.a = this.b;  
console.log(this.a) // if a is true be will be converted back to integet and assigend to a

if the a is undefined

// a is undefined then
this.a = undefined;
this.b=20
this.a && this.b.toString(),
  console.log(this.b); // this will return a integer
  
if(this.a){ // since a is undefined it will fail and conversion won't take place
this.b.toString();
}
this.a = this.b;  
console.log(this.a) // a integer is returned 

If "state" is "true", the right side value "test" of double ampersand is displayed in Console:

let state = true // Here

function test() {
  return "test"
}

console.log(state && test()) // test

If "state" is "false", the left side value "false" of double ampersand is displayed in Console:

let state = false // Here

function test() {
  return "test"
}

console.log(state && test()) // false