I want to know if the two JavaScript snippets are the same or not

Question

I am new to JavaScript and I want learn more about it.

For example:

a == true && alert("a is true");

Is this similar to:

if(a == true)
{
    alert("a is true");
}

If the above code is correct and if they both are equal, then I want to know all operators and conditions like this. Where can I find them?

Answer 1

Answer: the result, which is the alert box, will be the same.

Explanation:

Most languages are designed to evaluate the second expression only if the first one evaluated to true, in case of an && expression.

This means that if a evaluates to false, null, undefined, an empty string, 0, or NaN, alert("a is true") won't be evaluated, and you won't see the alert box.

JavaScript has values which can be "truthy" or "falsy", I suggest you read more about that here: http://11heavens.com/falsy-and-truthy-in-javascript.

So, it depends on your definition of "same", the result, i.e. seeing or not seeing the alert box, is the same.

If you want to know more about different operators in JavaScript, and how they work, check out: developer.mozilla.org/en-US/docs/JavaScript/Guide/Expressions_and_Operators.

Answer 2

The only difference between the two is that this is an expression:

a == true && alert("a is true");

But this is a statement:

if (a == true) {
    alert('a is true');
}

The outcome of the expression depends on what a == true evaluates to.

false && alert('a is true'); // false (and alert box does not show up)
true && alert('a is true');  // undefined (after alert box is clicked away)

This works thanks to the "short circuit" behaviour of evaluating expressions; using &&, the first condition that's falsy will become the result of the expression without evaluating the rest.

Another operator that has similar kind of behaviour is the logical or ||. Consider:

a || alert('a is false');

This shows the alert box if a evaluates to falsy.

false || alert('a is false'); // undefined (after alert box is clicked away)
true || alert('a is false');  // true (alert box does not show up)

Note that expressions with side effects like these are considered "clever" solutions; they may shorten your code, but the original intent is not always obvious.

That said, there are good uses of this as well, for instance:

a = a || 'default value';

This will assign a default value to a if it's falsy and the original value of a otherwise. You can see these expressions quite often and they're a powerful feature of the language.

Answer 3

It is not Javascript special syntax - it is just a tricks to shorten code.

There is no magic. It is just a plain logic. Usually such tricks are used by code-minimizers to shorten code. This behavior is based on && and || operators important property - they do not evaluate second part of expression if result becomes known from first part (in opposite to & and | operators, which are always evaluate both parts of expression).

Usages explained:

a==true && alert("a is true");

If 'a' is false - javascript engine analyzes that the whole expression MUST be false too (because of meaning of '&&' (AND) logic operator) - and it omits second part of expression because no matter what it returns result it will not change result of whole expression. So it does not run 'alert'. In opposite if 'a' is true - than Javascript engine need to know the result of second part of expression and it runs 'alert'. Such behavior mimics usual 'if' statement.

a==false || alert("a is true");

This one is using 'OR' logic operator. If 'a' is false then there is no need to evaulate second part of expression and 'alert' is fired. If 'a' is true' then there is a chance that second part of expression will be 'true' and whole expression evaluates to 'true' - so javascript engine runs 'alert'.

Moreover those shortcuts can be shortened even more. Because there is no need to compare two boolean values: 'a' and 'true', because 'a' is already boolean value. It makes following:

a && alert("a is true");

Basically you do not need to use such things manually, just use normal 'if' statements - it will make your code readable. You can then use code-minimizers to shorten your code for production if necessary.

Happy coding!