Understanding JavaScript evaluation [duplicate] - javascript

This question already has answers here:
Operator precedence with JavaScript's ternary operator
(7 answers)
Closed 3 years ago.
I am fixing some code and trying to understand a certain evaluation that is happening. There was a little snippet written where 2 evaluations should happen like so :
const active = true;
const isPerson = true;
const person1Time = null;
const person2Time = null;
// this one is not working as intended
const original = !active && isPerson ? !person1Time : !person2Time;
console.log("original", original);
// fixed when second evaluation is wrapped in parens
const fix = !active && (isPerson ? !person1Time : !person2Time);
console.log("fixed", fix);
I was able to fix the code to the desired result by wrapping the ternary evaluation in parentheses. What I am wondering is - why it works like this? The !active evaluates to false, and the ternary evaluates to true, and a console.log(true && false), this evaluates to false. Perhaps I am misunderstanding something here.

Boolean operators take precedence over ternary operators. In other words, this:
!active && isPerson ? !person1Time : !person2Time;
is equivalent to this:
(!active && isPerson) ? !person1Time : !person2Time;
Therefore, you obtain a different result.

Follow the operator precedence rules:
Binary AND (x && y) is priority 6.
Ternary (x ? y : z) is priority 4.
Unary NOT (!x) is priority 17.
Therfore, the NOT operator is evaluated first, then the binary AND, and lastly the ternary operator.

The original is evaluating the entire conditional expression on the left side of the ternary operator: !active && isPerson. Then based on the result of that expression - true or false - it evaluates the correct result.

Related

Javascript/Typescript if variable exists return if not return something else [duplicate]

This question already has answers here:
JavaScript shorthand ternary operator
(10 answers)
Closed 1 year ago.
There is the syntax
variable ? variable : something else, but can I somehow leave out the second variable?
It would be cool to have a syntax like variable ?: something else.
Does something like this exists?
Thanks
You can do it like variable ?? something else or variable || something else depending on what behaviour you want exactly
The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
This can be contrasted with the logical OR (||) operator, which returns the right-hand side operand if the left operand is any falsy value, not only null or undefined. In other words, if you use || to provide some default value to another variable foo, you may encounter unexpected behaviors if you consider some falsy values as usable (e.g., '' or 0). See below for more examples.
?? Nullish coalescing operator
|| Logical OR

JavaScript conditionals, terminate on first "true"? [duplicate]

This question already has answers here:
Does a javascript if statement with multiple conditions test all of them?
(10 answers)
Closed 5 years ago.
Does JavaScript operate the same as languages like C where if multiple conditionals are given, then the if statement when the entire thing can be guaranteed to be evaluated false/true?
I.E.
if( x == y || y == z)
or
if( x == y && y == z)
I know C doesn't check the second conditional in the first statement if the first conditional is evaluated true, as well as not checking the second conditional in the second statement is the first conditional is evaluated false.
I realize this is a quick Google, but I completely forgot what this compiler-level behavior is called and as a result was not able to find the answer.
We can run a simple javascript test to see this in action.
function check(){
console.log('called');
return true;
}
let x = true, y = true;
if(x != y || x == check()){
console.log('or verified');
}
if(x != y && x == check()){
console.log('and verified');
}
Our console doesn't display and verified for our second if statement since it never runs.
What you are looking for is short circuit evaluation. Yes, javascript short circuits so that the second expression won't be evaluated if it doesn't need to be.
Yes. It's called short-circuit evaluation!
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Short-circuit_evaluation
Yes Javascript has it and the name is "short circuit evaluation" just like C. In fact I often use this to make sure I don't read a property from a object that doesn't exist.
For example:
return object && object.property
You can read more about this here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

var w = q||q2; what does this expression means? [duplicate]

This question already has answers here:
JavaScript || or operator with an undefined variable
(6 answers)
Closed 7 years ago.
what does this means?
var q = [];
var q2 = ["canada","usa","mexico"];
var w = q||q2;
document.writeln(w);
the value of the variable w is : [] the empty list.
can someone explain to me why it is displaying this [] instead of ["canada","usa","mexico"].
You should read Logical Operators from MDN. According to the documentation
The logical operator OR (||) expr1 || expr2
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.
In a nutshell, logical operators evaluate from left to right. In your situation, since you have declare q as an empty array ([]), it evaluates to true and immediately goes and assigns w to that.
If you want q2 to take precedence, you can simply do
var w = q2 || q;
so that way only if q2 evaluates to falsey will it assign w to be q instead. The other option is to not declare q at all or declare it as something falsey. You can find out what evaluates to false here.

Why does `(state == 1 && 3)` make sense? [duplicate]

This question already has answers here:
Why the result of bool(true) && string is string in javascript?
(4 answers)
Closed 8 years ago.
I came across this code in Mithril.js:
finish(state == 1 && 3)
To my (Java/C programmer's) eyes it looks like it should always invoke finish(true) if state is 1 and finish(false) if state is not 1. But it actually seems to do finish(3) for the former and finish(false) for the latter.
What is the logic behind this?
Is this idiomatic in JavaScript, or is it a bad idea? To me it's horribly obscure.
You can interpret the operators || and && like this:
A || B
→ A ? A : B
A && B
→ A ? B : A
But without evaluating A twice.
It is a characteristic of JavaScript, && and || operators always return the last value it evaluated.
In JavaScript, the && operator doesn't force the result to a boolean. It's instead similar to:
var _temp = state == 1;
finish(_temp ? 3 : _temp);
Testing the truthiness of the left side, then returning either the right when truthy or the left otherwise.
The comparison a && b actually returns the value the last value evaluated in the expression and not true or false.
You can refer to the spec:
The production LogicalANDExpression : LogicalANDExpression &&
BitwiseORExpression is evaluated as follows:
Let lref be the result of evaluating LogicalANDExpression.
Let lval be GetValue(lref).
If ToBoolean(lval) is false, return lval.
Let rref be the result of evaluating BitwiseORExpression.
Return GetValue(rref).

javascript ternary statement equivilance [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
JavaScript: Is “z=(x||y)” same as “z=x?x:y” for non-boolean?
Are the following two lines of code equivalent in javascript?
a = b ? b : c
a = b || c
I want to express: "a should be assigned b if b is truthy, otherwise a should be assigned c"
I expect they would both work exactly the same, but I'm not 100% sure.
Yes. The two are almost exactly identical.
Both will first evaluate b. If it's truthy, it'll return b. Else, it'll return c.
As pointed out by #thesystem, if you have a getter method on b, it'll be called twice for the ternary, but only once for the or statement.
Test it using the following snippet:
var o = {};
o.__defineGetter__("b", function() {
console.log('ran');
return true;
});
var d = o.b || o.not;
console.log('-----');
var d = o.b ? o.b : o.not;
Here's the fiddle: http://jsfiddle.net/bqsey/
Logical operators are typically used with Boolean (logical) values;
when they are, they return a Boolean value. However, the && and ||
operators actually return the value of one of the specified operands,
so if these operators are used with non-Boolean values, they may
return a non-Boolean value.
ref: Logical Operators - MDN

Categories

Resources