1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: 逻辑与(&&)
slug: Web/JavaScript/Reference/Operators/逻辑和
translation_of: Web/JavaScript/Reference/Operators/Logical_AND
---
<div>{{jsSidebar("Operators")}}</div>
<p>The logical AND (<code>&&</code>) operator (logical conjunction) for a set of operands is true if and only if all of its operands are true. It is typically used with {{jsxref("Boolean")}} (logical) values. When it is, it returns a Boolean value. However, the <code>&&</code> operator actually returns the value of one of the specified operands, so if this operator is used with non-Boolean values, it will return a non-Boolean value.</p>
<div>{{EmbedInteractiveExample("pages/js/expressions-logical-and.html", "shorter")}}</div>
<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox notranslate"><em>expr1</em> && <em>expr2</em>
</pre>
<h2 id="Description">Description</h2>
<p>If <code>expr<strong>1</strong></code> can be converted to <code>true</code>, returns <code>expr<strong>2</strong></code>; else, returns <code>expr<strong>1</strong></code>.</p>
<p>If a value can be converted to <code>true</code>, the value is so-called {{Glossary("truthy")}}. If a value can be converted to <code>false</code>, the value is so-called {{Glossary("falsy")}}.</p>
<p>Examples of expressions that can be converted to false are:</p>
<ul>
<li><code>null</code>;</li>
<li><code>NaN</code>;</li>
<li><code>0</code>;</li>
<li>empty string (<code>""</code> or <code>''</code> or <code>``</code>);</li>
<li><code>undefined</code>.</li>
</ul>
<p>Even though the <code>&&</code> operator can be used with operands that are not Boolean values, it can still be considered a boolean operator since its return value can always be converted to a <a href="/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">boolean primitive</a>. To explicitly convert its return value (or any expression in general) to the corresponding boolean value, use a double <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">NOT operator</a> or the {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}} constructor.</p>
<h3 id="Short-circuit_evaluation">Short-circuit evaluation</h3>
<p>The logical AND expression is evaluated left to right, it is tested for possible "short-circuit" evaluation using the following rule:</p>
<p><code>(some falsy expression) && <em>expr</em></code> is short-circuit evaluated to the falsy expression;</p>
<p>Short circuit means that the <code><em>expr</em></code> part above is <strong>not evaluated</strong>, hence any side effects of doing so do not take effect (e.g., if <code><em>expr</em></code> is a function call, the calling never takes place). This happens because the value of the operator is already determined after the evaluation of the first operand. See example:</p>
<pre class="brush: js notranslate">function A(){ console.log('called A'); return false; }
function B(){ console.log('called B'); return true; }
console.log( A() && B() );
// logs "called A" due to the function call,
// then logs false (which is the resulting value of the operator)
</pre>
<h3 id="Operator_precedence">Operator precedence</h3>
<p>The following expressions might seem equivalent, but they are not, because the <code>&&</code> operator is executed before the <code>||</code> operator (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>).</p>
<pre class="brush: js notranslate">true || false && false // returns true, because && is executed first
(true || false) && false // returns false, because operator precedence cannot apply</pre>
<h2 id="Examples">Examples</h2>
<h3 id="Using_AND">Using AND</h3>
<p>The following code shows examples of the <code>&&</code> (logical AND) operator.</p>
<pre class="brush: js notranslate">a1 = true && true // t && t returns true
a2 = true && false // t && f returns false
a3 = false && true // f && t returns false
a4 = false && (3 == 4) // f && f returns false
a5 = 'Cat' && 'Dog' // t && t returns "Dog"
a6 = false && 'Cat' // f && t returns false
a7 = 'Cat' && false // t && f returns false
a8 = '' && false // f && f returns ""
a9 = false && '' // f && f returns false</pre>
<h3 id="Conversion_rules_for_booleans">Conversion rules for booleans</h3>
<h4 id="Converting_AND_to_OR">Converting AND to OR</h4>
<p>The following operation involving <strong>booleans</strong>:</p>
<pre class="brush: js notranslate">bCondition1 && bCondition2</pre>
<p>is always equal to:</p>
<pre class="brush: js notranslate">!(!bCondition1 || !bCondition2)</pre>
<h4 id="Converting_OR_to_AND">Converting OR to AND</h4>
<p>The following operation involving <strong>booleans</strong>:</p>
<pre class="brush: js notranslate">bCondition1 || bCondition2</pre>
<p>is always equal to:</p>
<pre class="brush: js notranslate">!(!bCondition1 && !bCondition2)</pre>
<h3 id="Removing_nested_parentheses">Removing nested parentheses</h3>
<p>As logical expressions are evaluated left to right, it is always possible to remove parentheses from a complex expression following some rules.</p>
<p>The following composite operation involving <strong>booleans</strong>:</p>
<pre class="brush: js notranslate">bCondition1 || (bCondition2 && bCondition3)</pre>
<p>is always equal to:</p>
<pre class="brush: js notranslate">bCondition1 || bCondition2 && bCondition3</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#prod-LogicalANDExpression', 'Logical AND expression')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("javascript.operators.logical_and")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{jsxref("Boolean")}}</li>
<li>{{Glossary("Truthy")}}</li>
<li>{{Glossary("Falsy")}}</li>
</ul>
|
