-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathconditions.html
More file actions
277 lines (239 loc) · 57.6 KB
/
conditions.html
File metadata and controls
277 lines (239 loc) · 57.6 KB
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JavsScript - Conditions</title>
<meta name="generator" content="VuePress 1.8.2">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="description" content="Ternary operators, Switch statement, If / Else If / Else Control, Strategy, Using || and && short circuiting">
<meta property="og:site_name" content="DevTut">
<meta property="og:title" content="JavsScript - Conditions">
<meta property="og:description" content="Ternary operators, Switch statement, If / Else If / Else Control, Strategy, Using || and && short circuiting">
<meta property="og:type" content="article">
<meta property="og:url" content="/javascript/conditions.html">
<meta property="og:image" content="/logo.png">
<meta name="twitter:title" content="JavsScript - Conditions">
<meta name="twitter:description" content="Ternary operators, Switch statement, If / Else If / Else Control, Strategy, Using || and && short circuiting">
<meta name="twitter:url" content="/javascript/conditions.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/logo.png">
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="google-site-verification" content="76_rKXgwMVIjd-axJC_1zPV9OS4mEjvtgjYOWVkAdnQ">
<link rel="preload" href="/assets/css/0.styles.60619e34.css" as="style"><link rel="preload" href="/assets/js/app.1779e102.js" as="script"><link rel="preload" href="/assets/js/3.2cfa8016.js" as="script"><link rel="preload" href="/assets/js/1718.2ef4af43.js" as="script">
<link rel="stylesheet" href="/assets/css/0.styles.60619e34.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">DevTut</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>JavaScript</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/javascript/" aria-current="page" class="sidebar-link">Disclaimer</a></li><li><a href="/javascript/getting-started-with-javascript.html" class="sidebar-link">Getting started with JavaScript</a></li><li><a href="/javascript/javascript-variables.html" class="sidebar-link">JavaScript Variables</a></li><li><a href="/javascript/built-in-constants.html" class="sidebar-link">Built-in Constants</a></li><li><a href="/javascript/comments.html" class="sidebar-link">Comments</a></li><li><a href="/javascript/console.html" class="sidebar-link">Console</a></li><li><a href="/javascript/datatypes-in-javascript.html" class="sidebar-link">Datatypes in Javascript</a></li><li><a href="/javascript/strings.html" class="sidebar-link">Strings</a></li><li><a href="/javascript/date.html" class="sidebar-link">Date</a></li><li><a href="/javascript/date-comparison.html" class="sidebar-link">Date Comparison</a></li><li><a href="/javascript/comparison-operations.html" class="sidebar-link">Comparison Operations</a></li><li><a href="/javascript/conditions.html" aria-current="page" class="active sidebar-link">Conditions</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/javascript/conditions.html#ternary-operators" class="sidebar-link">Ternary operators</a></li><li class="sidebar-sub-header"><a href="/javascript/conditions.html#switch-statement" class="sidebar-link">Switch statement</a></li><li class="sidebar-sub-header"><a href="/javascript/conditions.html#if-else-if-else-control" class="sidebar-link">If / Else If / Else Control</a></li><li class="sidebar-sub-header"><a href="/javascript/conditions.html#strategy" class="sidebar-link">Strategy</a></li><li class="sidebar-sub-header"><a href="/javascript/conditions.html#using-and-short-circuiting" class="sidebar-link">Using || and && short circuiting</a></li></ul></li><li><a href="/javascript/arrays.html" class="sidebar-link">Arrays</a></li><li><a href="/javascript/objects.html" class="sidebar-link">Objects</a></li><li><a href="/javascript/arithmetic-math.html" class="sidebar-link">Arithmetic (Math)</a></li><li><a href="/javascript/bitwise-operators.html" class="sidebar-link">Bitwise operators</a></li><li><a href="/javascript/constructor-functions.html" class="sidebar-link">Constructor functions</a></li><li><a href="/javascript/declarations-and-assignments.html" class="sidebar-link">Declarations and Assignments</a></li><li><a href="/javascript/loops.html" class="sidebar-link">Loops</a></li><li><a href="/javascript/functions.html" class="sidebar-link">Functions</a></li><li><a href="/javascript/functional-javascript.html" class="sidebar-link">Functional JavaScript</a></li><li><a href="/javascript/prototypes-objects.html" class="sidebar-link">Prototypes, objects</a></li><li><a href="/javascript/classes.html" class="sidebar-link">Classes</a></li><li><a href="/javascript/namespacing.html" class="sidebar-link">Namespacing</a></li><li><a href="/javascript/context-this.html" class="sidebar-link">Context (this)</a></li><li><a href="/javascript/setters-and-getters.html" class="sidebar-link">Setters and Getters</a></li><li><a href="/javascript/events.html" class="sidebar-link">Events</a></li><li><a href="/javascript/inheritance.html" class="sidebar-link">Inheritance</a></li><li><a href="/javascript/method-chaining.html" class="sidebar-link">Method Chaining</a></li><li><a href="/javascript/callbacks.html" class="sidebar-link">Callbacks</a></li><li><a href="/javascript/intervals-and-timeouts.html" class="sidebar-link">Intervals and Timeouts</a></li><li><a href="/javascript/regular-expressions.html" class="sidebar-link">Regular expressions</a></li><li><a href="/javascript/cookies.html" class="sidebar-link">Cookies</a></li><li><a href="/javascript/web-storage.html" class="sidebar-link">Web Storage</a></li><li><a href="/javascript/data-attributes.html" class="sidebar-link">Data attributes</a></li><li><a href="/javascript/json.html" class="sidebar-link">JSON</a></li><li><a href="/javascript/ajax.html" class="sidebar-link">AJAX</a></li><li><a href="/javascript/enumerations.html" class="sidebar-link">Enumerations</a></li><li><a href="/javascript/map.html" class="sidebar-link">Map</a></li><li><a href="/javascript/timestamps.html" class="sidebar-link">Timestamps</a></li><li><a href="/javascript/unary-operators.html" class="sidebar-link">Unary Operators</a></li><li><a href="/javascript/generators.html" class="sidebar-link">Generators</a></li><li><a href="/javascript/promises.html" class="sidebar-link">Promises</a></li><li><a href="/javascript/set.html" class="sidebar-link">Set</a></li><li><a href="/javascript/modals-prompts.html" class="sidebar-link">Modals - Prompts</a></li><li><a href="/javascript/execcommand-and-contenteditable.html" class="sidebar-link">execCommand and contenteditable</a></li><li><a href="/javascript/history.html" class="sidebar-link">History</a></li><li><a href="/javascript/navigator-object.html" class="sidebar-link">Navigator Object</a></li><li><a href="/javascript/bom-browser-object-model.html" class="sidebar-link">BOM (Browser Object Model)</a></li><li><a href="/javascript/the-event-loop.html" class="sidebar-link">The Event Loop</a></li><li><a href="/javascript/strict-mode.html" class="sidebar-link">Strict mode</a></li><li><a href="/javascript/custom-elements.html" class="sidebar-link">Custom Elements</a></li><li><a href="/javascript/data-manipulation.html" class="sidebar-link">Data Manipulation</a></li><li><a href="/javascript/binary-data.html" class="sidebar-link">Binary Data</a></li><li><a href="/javascript/template-literals.html" class="sidebar-link">Template Literals</a></li><li><a href="/javascript/fetch.html" class="sidebar-link">Fetch</a></li><li><a href="/javascript/scope.html" class="sidebar-link">Scope</a></li><li><a href="/javascript/modules.html" class="sidebar-link">Modules</a></li><li><a href="/javascript/screen.html" class="sidebar-link">Screen</a></li><li><a href="/javascript/variable-coercion-conversion.html" class="sidebar-link">Variable coercion/conversion</a></li><li><a href="/javascript/destructuring-assignment.html" class="sidebar-link">Destructuring assignment</a></li><li><a href="/javascript/websockets.html" class="sidebar-link">WebSockets</a></li><li><a href="/javascript/arrow-functions.html" class="sidebar-link">Arrow Functions</a></li><li><a href="/javascript/workers.html" class="sidebar-link">Workers</a></li><li><a href="/javascript/requestanimationframe.html" class="sidebar-link">requestAnimationFrame</a></li><li><a href="/javascript/creational-design-patterns.html" class="sidebar-link">Creational Design Patterns</a></li><li><a href="/javascript/detecting-browser.html" class="sidebar-link">Detecting browser</a></li><li><a href="/javascript/symbols.html" class="sidebar-link">Symbols</a></li><li><a href="/javascript/transpiling.html" class="sidebar-link">Transpiling</a></li><li><a href="/javascript/automatic-semicolon-insertion-asi.html" class="sidebar-link">Automatic Semicolon Insertion - ASI</a></li><li><a href="/javascript/localization.html" class="sidebar-link">Localization</a></li><li><a href="/javascript/geolocation.html" class="sidebar-link">Geolocation</a></li><li><a href="/javascript/indexeddb.html" class="sidebar-link">IndexedDB</a></li><li><a href="/javascript/modularization-techniques.html" class="sidebar-link">Modularization Techniques</a></li><li><a href="/javascript/proxy.html" class="sidebar-link">Proxy</a></li><li><a href="/javascript/postmessage-and-messageevent.html" class="sidebar-link">.postMessage() and MessageEvent</a></li><li><a href="/javascript/weakmap.html" class="sidebar-link">WeakMap</a></li><li><a href="/javascript/weakset.html" class="sidebar-link">WeakSet</a></li><li><a href="/javascript/escape-sequences.html" class="sidebar-link">Escape Sequences</a></li><li><a href="/javascript/behavioral-design-patterns.html" class="sidebar-link">Behavioral Design Patterns</a></li><li><a href="/javascript/server-sent-events.html" class="sidebar-link">Server-sent events</a></li><li><a href="/javascript/async-functions-async-await.html" class="sidebar-link">Async functions (async/await)</a></li><li><a href="/javascript/async-iterators.html" class="sidebar-link">Async Iterators</a></li><li><a href="/javascript/how-to-make-iterator-usable-inside-async-callback-function.html" class="sidebar-link">How to make iterator usable inside async callback function</a></li><li><a href="/javascript/tail-call-optimization.html" class="sidebar-link">Tail Call Optimization</a></li><li><a href="/javascript/bitwise-operators-real-world-examples-snippets.html" class="sidebar-link">Bitwise Operators - Real World Examples (snippets)</a></li><li><a href="/javascript/tilde.html" class="sidebar-link">Tilde ~</a></li><li><a href="/javascript/using-javascript-to-get-set-css-custom-variables.html" class="sidebar-link">Using javascript to get/set CSS custom variables</a></li><li><a href="/javascript/selection-api.html" class="sidebar-link">Selection API</a></li><li><a href="/javascript/file-api-blobs-and-filereaders.html" class="sidebar-link">File API, Blobs and FileReaders</a></li><li><a href="/javascript/notifications-api.html" class="sidebar-link">Notifications API</a></li><li><a href="/javascript/vibration-api.html" class="sidebar-link">Vibration API</a></li><li><a href="/javascript/battery-status-api.html" class="sidebar-link">Battery Status API</a></li><li><a href="/javascript/fluent-api.html" class="sidebar-link">Fluent API</a></li><li><a href="/javascript/web-cryptography-api.html" class="sidebar-link">Web Cryptography API</a></li><li><a href="/javascript/security-issues.html" class="sidebar-link">Security issues</a></li><li><a href="/javascript/same-origin-policy-cross-origin-communication.html" class="sidebar-link">Same Origin Policy & Cross-Origin Communication</a></li><li><a href="/javascript/error-handling.html" class="sidebar-link">Error Handling</a></li><li><a href="/javascript/global-error-handling-in-browsers.html" class="sidebar-link">Global error handling in browsers</a></li><li><a href="/javascript/debugging.html" class="sidebar-link">Debugging</a></li><li><a href="/javascript/unit-testing-javascript.html" class="sidebar-link">Unit Testing Javascript</a></li><li><a href="/javascript/evaluating-javascript.html" class="sidebar-link">Evaluating JavaScript</a></li><li><a href="/javascript/linters-ensuring-code-quality.html" class="sidebar-link">Linters - Ensuring code quality</a></li><li><a href="/javascript/anti-patterns.html" class="sidebar-link">Anti-patterns</a></li><li><a href="/javascript/performance-tips.html" class="sidebar-link">Performance Tips</a></li><li><a href="/javascript/memory-efficiency.html" class="sidebar-link">Memory efficiency</a></li><li><a href="/javascript/reserved-keywords.html" class="sidebar-link">Reserved Keywords</a></li><li><a href="/javascript/contributors.html" class="sidebar-link">The Contributors</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="conditions"><a href="#conditions" class="header-anchor">#</a> Conditions</h1> <p>Conditional expressions, involving keywords such as if and else, provide JavaScript programs with the ability to perform different actions depending on a Boolean condition: true or false. This section covers the use of JavaScript conditionals, Boolean logic, and ternary statements.</p> <h2 id="ternary-operators"><a href="#ternary-operators" class="header-anchor">#</a> Ternary operators</h2> <p>Can be used to shorten if/else operations. This comes in handy for returning a value quickly (i.e. in order to assign it to another variable).</p> <p>For example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> animal <span class="token operator">=</span> <span class="token string">'kitty'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token punctuation">(</span>animal <span class="token operator">===</span> <span class="token string">'kitty'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'cute'</span> <span class="token operator">:</span> <span class="token string">'still nice'</span><span class="token punctuation">;</span>
</code></pre></div><p>In this case, <code>result</code> gets the 'cute' value, because the value of animal is 'kitty'. If animal had another value, result would get the 'still nice' value.</p> <p>Compare this to what the code would like with <code>if/else</code> conditions.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> animal <span class="token operator">=</span> <span class="token string">'kitty'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>animal <span class="token operator">===</span> <span class="token string">'kitty'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
result <span class="token operator">=</span> <span class="token string">'cute'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
result <span class="token operator">=</span> <span class="token string">'still nice'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>The <code>if</code> or <code>else</code> conditions may have several operations. In this case the operator returns the result of the last expression.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">'not a'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
b <span class="token operator">=</span> a <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token punctuation">(</span>a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> str <span class="token operator">+=</span> <span class="token string">' test'</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">(</span>a <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Because <code>a</code> was equal to 0, it becomes <code>1</code>, and <code>str</code> becomes 'not a test'. The operation which involved <code>str</code> was the last, so <code>b</code> receives the result of the operation, which is the value contained in <code>str</code>, i.e. 'not a test'.</p> <p>Ternary operators <strong>always</strong> expect else conditions, otherwise you'll get a syntax error. As a workaround you could return a zero something similar in the else branch - this doesn't matter if you aren't using the return value but just shortening (or attempting to shorten) the operation.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
a <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hey, it is 1!'</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
</code></pre></div><p>As you see, <code>if (a === 1) alert('Hey, it is 1!');</code> would do the same thing. It would be just a char longer, since it doesn't need an obligatory <code>else</code> condition. If an <code>else</code> condition was involved, the ternary method would be much cleaner.</p> <div class="language-js extra-class"><pre class="language-js"><code>a <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hey, it is 1!'</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Weird, what could it be?'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hey, it is 1!'</span><span class="token punctuation">)</span> <span class="token keyword">else</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Weird, what could it be?'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Ternaries can be nested to encapsulate additional logic. For example</p> <div class="language-js extra-class"><pre class="language-js"><code>foo <span class="token operator">?</span> bar <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">2</span> <span class="token operator">:</span> <span class="token number">3</span>
<span class="token comment">// To be clear, this is evaluated left to right </span>
<span class="token comment">// and can be more explicitly expressed as:</span>
foo <span class="token operator">?</span> <span class="token punctuation">(</span>bar <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token number">3</span>
</code></pre></div><p>This is the same as the following <code>if/else</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>bar<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token number">1</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token number">2</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token number">3</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Stylistically this should only be used with short variable names, as multi-line ternaries can drastically decrease readability.</p> <p>The only statements which cannot be used in ternaries are control statements. For example, you cannot use return or break with ternaries. The following expression will be invalid.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> animal <span class="token operator">=</span> <span class="token string">'kitty'</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">(</span>animal <span class="token operator">===</span> <span class="token string">'kitty'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token keyword">break</span><span class="token operator">:</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>For return statements, the following would also be invalid:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> animal <span class="token operator">=</span> <span class="token string">'kitty'</span><span class="token punctuation">;</span>
<span class="token punctuation">(</span>animal <span class="token operator">===</span> <span class="token string">'kitty'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token keyword">return</span> <span class="token string">'meow'</span> <span class="token operator">:</span> <span class="token keyword">return</span> <span class="token string">'woof'</span><span class="token punctuation">;</span>
</code></pre></div><p>To do the above properly, you would return the ternary as follows:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> animal <span class="token operator">=</span> <span class="token string">'kitty'</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>animal <span class="token operator">===</span> <span class="token string">'kitty'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'meow'</span> <span class="token operator">:</span> <span class="token string">'woof'</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="switch-statement"><a href="#switch-statement" class="header-anchor">#</a> Switch statement</h2> <p>Switch statements compare the value of an expression against 1 or more values and executes different sections of code based on that comparison.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> value <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">switch</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token number">1</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I will always run'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token number">2</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I will never run'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>The <code>break</code> statement "breaks" out of the switch statement and ensures no more code within the switch statement is executed. This is how sections are defined and allows the user to make "fall through" cases.</p> <blockquote></blockquote> <p><strong>Warning</strong>: lack of a <code>break</code> or <code>return</code> statement for each case means the program will continue to evaluate the next case, even if the case criteria is unmet!</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">switch</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token number">1</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I will only run if value === 1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Here, the code "falls through" and will run the code under case 2</span>
<span class="token keyword">case</span> <span class="token number">2</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I will run if value === 1 or value === 2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token number">3</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I will only run if value === 3'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>The last case is the <code>default</code> case. This one will run if no other matches were made.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> animal <span class="token operator">=</span> <span class="token string">'Lion'</span><span class="token punctuation">;</span>
<span class="token keyword">switch</span> <span class="token punctuation">(</span>animal<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token string">'Dog'</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I will not run since animal !== "Dog"'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token string">'Cat'</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I will not run since animal !== "Cat"'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">default</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I will run since animal does not match any other case'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>It should be noted that a case expression can be any kind of expression. This means you can use comparisons, function calls, etc. as case values.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">john</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token string">'John'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">jacob</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token string">'Jacob'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">switch</span> <span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token function">john</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token comment">// Compare name with the return value of john() (name == "John")</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I will run if name === "John"'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token string">'Ja'</span> <span class="token operator">+</span> <span class="token string">'ne'</span><span class="token operator">:</span> <span class="token comment">// Concatenate the strings together then compare (name == "Jane")</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I will run if name === "Jane"'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token function">john</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token function">jacob</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">' Jingleheimer Schmidt'</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'His name is equal to name too!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="multiple-inclusive-criteria-for-cases"><a href="#multiple-inclusive-criteria-for-cases" class="header-anchor">#</a> <strong>Multiple Inclusive Criteria for Cases</strong></h3> <p>Since cases "fall through" without a <code>break</code> or <code>return</code> statement, you can use this to create multiple inclusive criteria:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">"c"</span>
<span class="token keyword">switch</span> <span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token string">"a"</span><span class="token operator">:</span>
<span class="token keyword">case</span> <span class="token string">"b"</span><span class="token operator">:</span>
<span class="token keyword">case</span> <span class="token string">"c"</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Either a, b, or c was selected."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">case</span> <span class="token string">"d"</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Only d was selected."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token keyword">default</span><span class="token operator">:</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"No case was matched."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token comment">// precautionary break if case order changes</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="if-else-if-else-control"><a href="#if-else-if-else-control" class="header-anchor">#</a> If / Else If / Else Control</h2> <p>In its most simple form, an <code>if</code> condition can be used like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"i is smaller than 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>The condition <code>i < 1</code> is evaluated, and if it evaluates to <code>true</code> the block that follows is executed. If it evaluates to <code>false</code>, the block is skipped.</p> <p>An <code>if</code> condition can be expanded with an <code>else</code> block. The condition is checked <strong>once</strong> as above, and if it evaluates to <code>false</code> a secondary block will be executed (which would be skipped if the condition were <code>true</code>). An example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"i is smaller than 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"i was not smaller than 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Supposing the <code>else</code> block contains nothing but another <code>if</code> block (with optionally an <code>else</code> block) like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"i is smaller than 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"i is smaller than 2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"none of the previous conditions was true"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Then there is also a different way to write this which reduces nesting:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"i is smaller than 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"i is smaller than 2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"none of the previous conditions was true"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Some important footnotes about the above examples:</p> <li>
If any one condition evaluated to `true`, no other condition in that chain of blocks will be evaluated, and all corresponding blocks (including the `else` block) will not be executed.
</li> <li>
The number of `else if` parts is practically unlimited. The last example above only contains one, but you can have as many as you like.
</li> <li>
The **condition** inside an `if` statement can be anything that can be coerced to a boolean value, see the topic on [boolean logic](http://stackoverflow.com/documentation/javascript/208/boolean-logic) for more details;
</li> <li>
The `if-else-if` ladder exits at the first success. That is, in the example above, if the value of `i` is 0.5 then the first branch is executed. If the conditions overlap, the first criteria occurring in the flow of execution is executed. The other condition, which could also be true is ignored.
</li> <li>
If you have only one statement, the braces around that statement are technically optional, e.g this is fine:
<div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"i is smaller than 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>And this will work as well:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"i is smaller than 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>If you want to execute multiple statements inside an <code>if</code> block, then the curly braces around them are mandatory. Only using indentation isn't enough. For example, the following code:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"i is smaller than 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"this will run REGARDLESS of the condition"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Warning, see text!</span>
</code></pre></div><p>is equivalent to:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"i is smaller than 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"this will run REGARDLESS of the condition"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li> <h2 id="strategy"><a href="#strategy" class="header-anchor">#</a> Strategy</h2> <p>A strategy pattern can be used in Javascript in many cases to replace a switch statement. It is especially helpful when the number of conditions is dynamic or very large. It allows the code for each condition to be independent and separately testable.</p> <p>Strategy object is simple an object with multiple functions, representing each separate condition. Example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> AnimalSays <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">dog</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token string">'woof'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">cat</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token string">'meow'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">lion</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token string">'roar'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// ... other animals</span>
<span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token string">'moo'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>The above object can be used as follows:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">makeAnimalSpeak</span> <span class="token punctuation">(</span><span class="token parameter">animal</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Match the animal by type</span>
<span class="token keyword">const</span> speak <span class="token operator">=</span> AnimalSays<span class="token punctuation">[</span>animal<span class="token punctuation">]</span> <span class="token operator">||</span> AnimalSays<span class="token punctuation">.</span>default<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>animal <span class="token operator">+</span> <span class="token string">' says '</span> <span class="token operator">+</span> <span class="token function">speak</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Results:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">makeAnimalSpeak</span><span class="token punctuation">(</span><span class="token string">'dog'</span><span class="token punctuation">)</span> <span class="token comment">// => 'dog says woof'</span>
<span class="token function">makeAnimalSpeak</span><span class="token punctuation">(</span><span class="token string">'cat'</span><span class="token punctuation">)</span> <span class="token comment">// => 'cat says meow'</span>
<span class="token function">makeAnimalSpeak</span><span class="token punctuation">(</span><span class="token string">'lion'</span><span class="token punctuation">)</span> <span class="token comment">// => 'lion says roar'</span>
<span class="token function">makeAnimalSpeak</span><span class="token punctuation">(</span><span class="token string">'snake'</span><span class="token punctuation">)</span> <span class="token comment">// => 'snake says moo'</span>
</code></pre></div><p>In the last case, our default function handles any missing animals.</p> <h2 id="using-and-short-circuiting"><a href="#using-and-short-circuiting" class="header-anchor">#</a> Using || and && short circuiting</h2> <p>The Boolean operators <code>||</code> and <code>&&</code> will "short circuit" and not evaluate the second parameter if the first is true or false respectively. This can be used to write short conditionals like:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">10</span>
x <span class="token operator">==</span> <span class="token number">10</span> <span class="token operator">&&</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"x is 10"</span><span class="token punctuation">)</span>
x <span class="token operator">==</span> <span class="token number">10</span> <span class="token operator">||</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"x is not 10"</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="syntax"><a href="#syntax" class="header-anchor">#</a> Syntax</h4> <ul><li>if (<strong>condition</strong>) <strong>statement</strong>;</li> <li>if (<strong>condition</strong>) <strong>statement_1</strong>, <strong>statement_2</strong>, <strong>...</strong>, <strong>statement_n</strong>;
</li><li>if (<strong>condition</strong>) {<br> <strong>statement</strong><br>
}</li> <li>if (<strong>condition</strong>) {<br> <strong>statement_1</strong>;<br> <strong>statement_2</strong>;<br> <strong>...</strong><br> <strong>statement_n</strong>;<br>
}</li> <li>if (<strong>condition</strong>) {<br> <strong>statement</strong><br>
} else {<br> <strong>statement</strong><br>
}</li> <li>if (<strong>condition</strong>) {<br> <strong>statement</strong><br>
} else if (<strong>condition</strong>) {<br> <strong>statement</strong><br>
} else {<br> <strong>statement</strong><br>
}</li> <li>switch (<strong>expression</strong>) {<br>
case <strong>value1</strong>:<br> <strong>statement</strong><br>
[break;]<br>
case <strong>value2</strong>:<br> <strong>statement</strong><br>
[break;]<br>
case <strong>valueN</strong>:<br> <strong>statement</strong><br>
[break;]<br>
default:<br> <strong>statement</strong><br>
[break;]<br>
}</li> <li><strong>condition</strong> ? <strong>value_for_true</strong> : <strong>value_for_false</strong>;</li></ul> <h4 id="remarks"><a href="#remarks" class="header-anchor">#</a> Remarks</h4> <p>Conditions can break normal program flow by executing code based on the value of an expression. In JavaScript, this means using <code>if</code>, <code>else if</code> and <code>else</code> statements and ternary operators.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/devtut/generate/edit/master/docs/javascript/conditions.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/javascript/comparison-operations.html" class="prev">
Comparison Operations
</a></span> <span class="next"><a href="/javascript/arrays.html">
Arrays
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/assets/js/app.1779e102.js" defer></script><script src="/assets/js/3.2cfa8016.js" defer></script><script src="/assets/js/1718.2ef4af43.js" defer></script>
</body>
</html>