The && operator

JavaScriptJunior~3 min read

&& is the logical AND operator: it returns the first falsy operand, and when every operand is truthy it returns the last one. It works not only as a logical comparison but also as a control-flow tool, thanks to short-circuit evaluation.

Theory

TL;DR

a && b returns a when a is falsy, and returns b otherwise.
It returns the operand's own value, not a coerced true or false.
When the left operand is falsy, the right one is never evaluated.
That gives the idioms condition && action() and {isAdmin && <AdminPanel />} in JSX.
In a chain a && b && c the result is the first falsy operand, or the last operand.

Quick example

javascript

console.log(1 && 2);       // 2   (both truthy, the second one is returned)
console.log(0 && 2);       // 0   (the first is falsy, we stop there)
console.log('hi' && 123);  // 123
console.log(null && 'ok'); // null
console.log(true && 'JS'); // "JS"

How `&&` works step by step

JavaScript evaluates the first expression a.
If a is falsy, the operator immediately returns a and nothing else is evaluated.
If a is truthy, the operator evaluates and returns the second expression b.

With plain boolean values this matches ordinary logic, "true if both are true":

javascript

true  && true   // true
true  && false  // false
false && true   // false
false && false  // false

It returns a value, not `true` or `false`

JavaScript does not coerce the operands to a boolean in the result: it returns one of the expressions themselves. That is why null && 'ok' gives null rather than false.

To predict the result you need to know which values count as falsy:

falsy values	truthy values
`false`	everything else
`0`, `-0`, `0n`	non-empty strings
`''` (empty string)	`[]`, `{}`
`null`	`true`
`undefined`	any objects
`NaN`	functions

Note that an empty array [] and an empty object {} are truthy, even though they intuitively look "empty".

Short-circuit evaluation

If the first value is falsy, the second one is not evaluated at all. This is not an optimisation but a guarantee of the specification that you can rely on:

javascript

false && console.log('Will not run');
0 && console.log('Will not run');
null && console.log('Will not run');

Because of that, && is used as conditional execution:

javascript

isLoggedIn && showDashboard();

The showDashboard() call happens only when isLoggedIn is truthy.

Compared with if, it is simply a shorter way to write the same thing:

javascript

if (user) {
  console.log(user.name);
}

// the same in one line
user && console.log(user.name);

In JSX, short-circuiting is enough for conditional rendering, because JSX only allows expressions, not statements:

jsx

{isAdmin && <AdminPanel />}

The <AdminPanel /> component renders only when isAdmin is truthy.

Safe property access

Before optional chaining (?.) existed, && was the standard way to avoid throwing on null:

javascript

const user = { name: 'Alice' };

console.log(user && user.name); // "Alice"

const guest = null;
console.log(guest && guest.name); // null, no error

Today ?. reads better for that specific job, but && is still useful when the check is more than "does this property exist":

javascript

console.log(guest?.name);            // undefined
console.log(items.length && items[0]); // 0 or the first element

Summary table

Expression	Result	Explanation
`true && "JS"`	`"JS"`	both truthy, the second is returned
`false && "JS"`	`false`	the first is falsy
`null && 5`	`null`	the first is falsy
`"hi" && 0`	`0`	the second is falsy
`1 && 2 && 3`	`3`	all truthy, the last is returned
`0 && 2 && 3`	`0`	the first is falsy, evaluation stops

In short, && is used for one-line condition checks, short conditional function calls, safe property access and conditional rendering in JSX.

Common mistakes

Expecting a boolean result. 0 && 2 returns 0, not false. When a real boolean is required, wrap the expression: Boolean(a && b) or !!(a && b).
Rendering 0 in JSX. {items.length && <List />} prints 0 on the page for an empty array, because that is a valid ReactNode. Write {items.length > 0 && <List />} instead.
Confusing && with &. A single ampersand is bitwise AND over 32-bit integers: 5 & 3 gives 1, not 3.
Relying on && where the value may legitimately be 0 or ''. For default values prefer ??, because || and && react to every falsy value.
Counting on a side effect in the right operand. When the left operand is falsy the right one never runs, so logging or an increment placed there simply will not happen.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.