-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path07-arrays.html
312 lines (296 loc) · 57.8 KB
/
07-arrays.html
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
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Arrays - Intuitive JavaScript</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Inconsolata:wght@400;700&family=Inter:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="../css/reset.css" />
<link rel="stylesheet" href="../css/default.css" />
<link rel="stylesheet" href="../css/vs2015.css" />
</head>
<body>
<header id="top">
<nav>
<a href="../">Intuitive JavaScript</a>
</nav>
</header>
<main role="main">
<p class="lesson-number">7.</p>
<nav id="toc" class="card">
<h1>Contents</h1>
<ul>
<li><a href="#arrays" id="toc-arrays">Arrays</a>
<ul>
<li><a href="#create" id="toc-create">Create</a></li>
<li><a href="#index" id="toc-index">Index</a></li>
<li><a href="#length" id="toc-length">Length</a></li>
<li><a href="#gotcha-equality" id="toc-gotcha-equality">Gotcha! Equality</a></li>
<li><a href="#methods" id="toc-methods">Methods</a></li>
<li><a href="#gotcha-sneaky-methods" id="toc-gotcha-sneaky-methods">Gotcha! Sneaky Methods</a></li>
<li><a href="#adding-to-arrays" id="toc-adding-to-arrays">Adding to Arrays</a></li>
<li><a href="#exercises" id="toc-exercises">Exercises</a></li>
</ul></li>
</ul>
</nav>
<article class="card"><section id="lesson-body"><h1 id="arrays">Arrays</h1>
<p>What’s more common than dealing with a single primitive value, like a number, is dealing with a collection of values. That’s where <strong>arrays</strong> come in. Arrays are values that are sort of like strings, but instead of holding a list of characters, they can hold a list of any values. We often refer to the values in arrays as <strong>elements</strong>. If we have an array of values, we can treat those values as a collection and deal with them all at once. Arrays always have an order: from left to right. Just like writing down a list of groceries, there is an order (top-to-bottom), even if you don’t care about it or use it. This may sound obvious, but there are other common data structures that are not ordered, such as objects and sets.</p>
<h2 id="create">Create</h2>
<p>To create an array, we can use square brackets to surround a bunch of values separated by commas, like so: <code>[2, 3, 4, 5]</code>.</p>
<div class="sourceCode" id="cb1" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>([<span class="dv">2</span><span class="op">,</span> <span class="dv">3</span><span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">5</span>])<span class="op">;</span> <span class="co">// print the array</span></span></code></pre></div>
<p>Naturally, an array itself is a value (even though it holds multiple values inside of it), so we can assign it to a variable.</p>
<div class="sourceCode" id="cb2" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> evenNumbers <span class="op">=</span> [<span class="dv">2</span><span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">6</span><span class="op">,</span> <span class="dv">8</span><span class="op">,</span> <span class="dv">10</span>]<span class="op">;</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(evenNumbers)<span class="op">;</span></span></code></pre></div>
<p>Of course, we don’t have to limit ourselves to numbers. Any values work in arrays!</p>
<div class="sourceCode" id="cb3" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> fruits <span class="op">=</span> [<span class="st">'apple'</span><span class="op">,</span> <span class="st">'banana'</span><span class="op">,</span> <span class="st">'cherry'</span>]<span class="op">;</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits)<span class="op">;</span></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> booleans <span class="op">=</span> [<span class="kw">true</span><span class="op">,</span> <span class="kw">false</span>]<span class="op">;</span></span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(booleans)<span class="op">;</span></span></code></pre></div>
<p>JavaScript allows us to put different types of values in the same array, although it may not be useful.</p>
<div class="sourceCode" id="cb4" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> mix <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="st">'apple'</span><span class="op">,</span> <span class="kw">true</span><span class="op">,</span> <span class="kw">undefined</span><span class="op">,</span> <span class="kw">null</span><span class="op">,</span> <span class="kw">false</span><span class="op">,</span> <span class="op">-</span><span class="dv">1000</span>]<span class="op">;</span></span>
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(mix)<span class="op">;</span></span></code></pre></div>
<p>We can even put arrays in arrays. This is often useful!</p>
<div class="sourceCode" id="cb5" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> matrix <span class="op">=</span> [[<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">,</span> [<span class="dv">4</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">6</span>]<span class="op">,</span> [<span class="dv">7</span><span class="op">,</span> <span class="dv">8</span><span class="op">,</span> <span class="dv">9</span>]]<span class="op">;</span></span>
<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(matrix)<span class="op">;</span></span></code></pre></div>
<p>If we need to create an array and we have a size in mind but not values, sort of like an empty box to fill later, we can use the following syntax as a shortcut.</p>
<div class="sourceCode" id="cb6" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> xs <span class="op">=</span> [<span class="op">...</span><span class="bu">Array</span>(<span class="dv">10</span>)]<span class="op">;</span> <span class="co">// Creates an array of 10 elements, all undefined</span></span></code></pre></div>
<p>This will come in handy later.</p>
<h2 id="index">Index</h2>
<p>Because an array is a list of values, we often need to get one element from that list. Like strings, we can get an element by its <strong>index</strong> number. Remember that index numbers start from 0, not 1.</p>
<div class="sourceCode" id="cb7" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> fruits <span class="op">=</span> [<span class="st">'apple'</span><span class="op">,</span> <span class="st">'banana'</span><span class="op">,</span> <span class="st">'cherry'</span>]<span class="op">;</span></span>
<span id="cb7-2"><a href="#cb7-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits[<span class="dv">0</span>])<span class="op">;</span> <span class="co">// apple</span></span>
<span id="cb7-3"><a href="#cb7-3" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits[<span class="dv">1</span>])<span class="op">;</span> <span class="co">// banana</span></span>
<span id="cb7-4"><a href="#cb7-4" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits[<span class="dv">2</span>])<span class="op">;</span> <span class="co">// cherry</span></span></code></pre></div>
<p>This also works for nested arrays.</p>
<div class="sourceCode" id="cb8" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> matrix <span class="op">=</span> [[<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">,</span> [<span class="dv">4</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">6</span>]<span class="op">,</span> [<span class="dv">7</span><span class="op">,</span> <span class="dv">8</span><span class="op">,</span> <span class="dv">9</span>]]<span class="op">;</span></span>
<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(matrix[<span class="dv">1</span>])<span class="op">;</span> <span class="co">// [4, 5, 6]</span></span>
<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(matrix[<span class="dv">1</span>][<span class="dv">0</span>])<span class="op">;</span> <span class="co">// 4</span></span></code></pre></div>
<h2 id="length">Length</h2>
<p>Also like strings, arrays have the <strong>length</strong> property.</p>
<div class="sourceCode" id="cb9" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> empty <span class="op">=</span> []<span class="op">;</span></span>
<span id="cb9-2"><a href="#cb9-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(empty<span class="op">.</span><span class="at">length</span>)<span class="op">;</span> <span class="co">// 0</span></span>
<span id="cb9-3"><a href="#cb9-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb9-4"><a href="#cb9-4" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> little <span class="op">=</span> [<span class="dv">0</span>]<span class="op">;</span></span>
<span id="cb9-5"><a href="#cb9-5" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(little<span class="op">.</span><span class="at">length</span>)<span class="op">;</span> <span class="co">// 1</span></span>
<span id="cb9-6"><a href="#cb9-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb9-7"><a href="#cb9-7" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> evenNumbers <span class="op">=</span> [<span class="dv">2</span><span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">6</span><span class="op">,</span> <span class="dv">8</span><span class="op">,</span> <span class="dv">10</span>]<span class="op">;</span></span>
<span id="cb9-8"><a href="#cb9-8" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(evenNumbers<span class="op">.</span><span class="at">length</span>)<span class="op">;</span> <span class="co">// 5</span></span>
<span id="cb9-9"><a href="#cb9-9" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb9-10"><a href="#cb9-10" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> fruits <span class="op">=</span> [<span class="st">'apple'</span><span class="op">,</span> <span class="st">'banana'</span><span class="op">,</span> <span class="st">'cherry'</span>]<span class="op">;</span></span>
<span id="cb9-11"><a href="#cb9-11" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits<span class="op">.</span><span class="at">length</span>)<span class="op">;</span> <span class="co">// 3</span></span>
<span id="cb9-12"><a href="#cb9-12" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits[fruits<span class="op">.</span><span class="at">length</span> <span class="op">-</span> <span class="dv">1</span>])<span class="op">;</span> <span class="co">// cherry</span></span>
<span id="cb9-13"><a href="#cb9-13" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb9-14"><a href="#cb9-14" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> matrix <span class="op">=</span> [</span>
<span id="cb9-15"><a href="#cb9-15" aria-hidden="true" tabindex="-1"></a> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">,</span></span>
<span id="cb9-16"><a href="#cb9-16" aria-hidden="true" tabindex="-1"></a> [<span class="dv">4</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">6</span>]<span class="op">,</span></span>
<span id="cb9-17"><a href="#cb9-17" aria-hidden="true" tabindex="-1"></a> [<span class="dv">7</span><span class="op">,</span> <span class="dv">8</span><span class="op">,</span> <span class="dv">9</span>]</span>
<span id="cb9-18"><a href="#cb9-18" aria-hidden="true" tabindex="-1"></a>]<span class="op">;</span></span>
<span id="cb9-19"><a href="#cb9-19" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(matrix<span class="op">.</span><span class="at">length</span>)<span class="op">;</span> <span class="co">// 3</span></span>
<span id="cb9-20"><a href="#cb9-20" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(matrix[matrix<span class="op">.</span><span class="at">length</span> <span class="op">-</span> <span class="dv">1</span>])<span class="op">;</span> <span class="co">// [7, 8, 9]</span></span>
<span id="cb9-21"><a href="#cb9-21" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(matrix[<span class="dv">0</span>]<span class="op">.</span><span class="at">length</span>)<span class="op">;</span> <span class="co">// 3 -- because the first row of the matrix is an array of 3 elements</span></span></code></pre></div>
<h2 id="gotcha-equality">Gotcha! Equality</h2>
<p>JavaScript has quite a few “gotchas”, or quirks that don’t work as you would expect them to.</p>
<p>Checking if two arrays are equal (i.e., the same values) is counter-intuitive in JavaScript. Let’s look at an example.</p>
<div class="sourceCode" id="cb10" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> numbers <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">;</span></span>
<span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> sameNumbers <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">;</span></span>
<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(numbers <span class="op">===</span> numbers)<span class="op">;</span> <span class="co">// true</span></span>
<span id="cb10-4"><a href="#cb10-4" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(numbers <span class="op">===</span> sameNumbers)<span class="op">;</span> <span class="co">// false!</span></span></code></pre></div>
<p>What? How could this be false? The two arrays are clearly identical. It turns out that JavaScript’s equality operator (<code>===</code>) is not checking intuitive equality when it comes to arrays. It’s checking whether they are the same exact variable. The bottom line is, don’t try to compare arrays with the equality operator (<code>===</code>). In a real project, if you need to check if two arrays are equal, use a library like <a href="https://ramdajs.com/docs/#equals">Ramda</a> or <a href="https://underscorejs.org/#isEqual">Underscore.js</a>.</p>
<h2 id="methods">Methods</h2>
<p>Arrays have many methods to make use of.<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a> Here we will highlight a few of the most useful ones.</p>
<h3 id="includes">includes()</h3>
<p>The <code>includes()</code> method lets us check if a specific value is included in an array, returning true or false.</p>
<div class="sourceCode" id="cb11" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> empty <span class="op">=</span> []<span class="op">;</span></span>
<span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(empty<span class="op">.</span><span class="fu">includes</span>(<span class="dv">0</span>))<span class="op">;</span> <span class="co">// false</span></span>
<span id="cb11-3"><a href="#cb11-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-4"><a href="#cb11-4" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> little <span class="op">=</span> [<span class="dv">0</span>]<span class="op">;</span></span>
<span id="cb11-5"><a href="#cb11-5" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(little<span class="op">.</span><span class="fu">includes</span>(<span class="dv">0</span>))<span class="op">;</span> <span class="co">// true</span></span>
<span id="cb11-6"><a href="#cb11-6" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(little<span class="op">.</span><span class="fu">includes</span>(<span class="st">'anything'</span>))<span class="op">;</span> <span class="co">// false</span></span>
<span id="cb11-7"><a href="#cb11-7" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-8"><a href="#cb11-8" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> evenNumbers <span class="op">=</span> [<span class="dv">2</span><span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">6</span><span class="op">,</span> <span class="dv">8</span><span class="op">,</span> <span class="dv">10</span>]<span class="op">;</span></span>
<span id="cb11-9"><a href="#cb11-9" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(evenNumbers<span class="op">.</span><span class="fu">includes</span>(<span class="dv">4</span>))<span class="op">;</span> <span class="co">// true</span></span>
<span id="cb11-10"><a href="#cb11-10" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(evenNumbers<span class="op">.</span><span class="fu">includes</span>(<span class="dv">3</span>))<span class="op">;</span> <span class="co">// false</span></span>
<span id="cb11-11"><a href="#cb11-11" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-12"><a href="#cb11-12" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> fruits <span class="op">=</span> [<span class="st">'apple'</span><span class="op">,</span> <span class="st">'banana'</span><span class="op">,</span> <span class="st">'cherry'</span>]<span class="op">;</span></span>
<span id="cb11-13"><a href="#cb11-13" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits<span class="op">.</span><span class="fu">includes</span>(<span class="st">'banana'</span>))<span class="op">;</span> <span class="co">// true</span></span>
<span id="cb11-14"><a href="#cb11-14" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits<span class="op">.</span><span class="fu">includes</span>(<span class="st">'app'</span>))<span class="op">;</span> <span class="co">// false</span></span>
<span id="cb11-15"><a href="#cb11-15" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits<span class="op">.</span><span class="fu">includes</span>(<span class="st">'Apple'</span>))<span class="op">;</span> <span class="co">// false</span></span>
<span id="cb11-16"><a href="#cb11-16" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits[<span class="dv">0</span>]<span class="op">.</span><span class="fu">includes</span>(<span class="st">'app'</span>))<span class="op">;</span> <span class="co">// true -- using string includes()</span></span>
<span id="cb11-17"><a href="#cb11-17" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits<span class="op">.</span><span class="fu">includes</span>(<span class="st">'donut'</span>))<span class="op">;</span> <span class="co">// false</span></span>
<span id="cb11-18"><a href="#cb11-18" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-19"><a href="#cb11-19" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> matrix <span class="op">=</span> [</span>
<span id="cb11-20"><a href="#cb11-20" aria-hidden="true" tabindex="-1"></a> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">,</span></span>
<span id="cb11-21"><a href="#cb11-21" aria-hidden="true" tabindex="-1"></a> [<span class="dv">4</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">6</span>]<span class="op">,</span></span>
<span id="cb11-22"><a href="#cb11-22" aria-hidden="true" tabindex="-1"></a> [<span class="dv">7</span><span class="op">,</span> <span class="dv">8</span><span class="op">,</span> <span class="dv">9</span>]</span>
<span id="cb11-23"><a href="#cb11-23" aria-hidden="true" tabindex="-1"></a>]<span class="op">;</span></span>
<span id="cb11-24"><a href="#cb11-24" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(matrix<span class="op">.</span><span class="fu">includes</span>([<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]))<span class="op">;</span> <span class="co">// false -- because of the equality gotcha!</span></span>
<span id="cb11-25"><a href="#cb11-25" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(matrix[<span class="dv">2</span>]<span class="op">.</span><span class="fu">includes</span>(<span class="dv">9</span>))<span class="op">;</span> <span class="co">// true</span></span></code></pre></div>
<h3 id="slice">slice()</h3>
<p>The <code>slice()</code> method lets us grab just a portion of an array. The first argument is the index to start from. The optional second argument is the index to stop at (without the second argument, it goes until the end). It returns an array containing the elements between. It will always return an array, even if it’s empty.</p>
<div class="sourceCode" id="cb12" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> empty <span class="op">=</span> []<span class="op">;</span></span>
<span id="cb12-2"><a href="#cb12-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(empty<span class="op">.</span><span class="fu">slice</span>(<span class="dv">0</span>))<span class="op">;</span> <span class="co">// []</span></span>
<span id="cb12-3"><a href="#cb12-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb12-4"><a href="#cb12-4" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> little <span class="op">=</span> [<span class="dv">0</span>]<span class="op">;</span></span>
<span id="cb12-5"><a href="#cb12-5" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(little<span class="op">.</span><span class="fu">slice</span>(<span class="dv">1</span>))<span class="op">;</span> <span class="co">// []</span></span>
<span id="cb12-6"><a href="#cb12-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb12-7"><a href="#cb12-7" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> evenNumbers <span class="op">=</span> [<span class="dv">2</span><span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">6</span><span class="op">,</span> <span class="dv">8</span><span class="op">,</span> <span class="dv">10</span>]<span class="op">;</span></span>
<span id="cb12-8"><a href="#cb12-8" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(evenNumbers<span class="op">.</span><span class="fu">slice</span>(<span class="dv">1</span>))<span class="op">;</span> <span class="co">// [4, 6, 8, 10]</span></span>
<span id="cb12-9"><a href="#cb12-9" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(evenNumbers<span class="op">.</span><span class="fu">slice</span>(<span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>))<span class="op">;</span> <span class="co">// [6]</span></span>
<span id="cb12-10"><a href="#cb12-10" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb12-11"><a href="#cb12-11" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> fruits <span class="op">=</span> [<span class="st">'apple'</span><span class="op">,</span> <span class="st">'banana'</span><span class="op">,</span> <span class="st">'cherry'</span>]<span class="op">;</span></span>
<span id="cb12-12"><a href="#cb12-12" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits<span class="op">.</span><span class="fu">slice</span>(<span class="dv">2</span>))<span class="op">;</span> <span class="co">// ['cherry']</span></span>
<span id="cb12-13"><a href="#cb12-13" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb12-14"><a href="#cb12-14" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> matrix <span class="op">=</span> [</span>
<span id="cb12-15"><a href="#cb12-15" aria-hidden="true" tabindex="-1"></a> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">,</span></span>
<span id="cb12-16"><a href="#cb12-16" aria-hidden="true" tabindex="-1"></a> [<span class="dv">4</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">6</span>]<span class="op">,</span></span>
<span id="cb12-17"><a href="#cb12-17" aria-hidden="true" tabindex="-1"></a> [<span class="dv">7</span><span class="op">,</span> <span class="dv">8</span><span class="op">,</span> <span class="dv">9</span>]</span>
<span id="cb12-18"><a href="#cb12-18" aria-hidden="true" tabindex="-1"></a>]<span class="op">;</span></span>
<span id="cb12-19"><a href="#cb12-19" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(matrix<span class="op">.</span><span class="fu">slice</span>(<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span>))<span class="op">;</span> <span class="co">// [[4, 5, 6]]</span></span>
<span id="cb12-20"><a href="#cb12-20" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(matrix<span class="op">.</span><span class="fu">slice</span>(<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span>)[<span class="dv">0</span>]<span class="op">.</span><span class="fu">slice</span>(<span class="dv">0</span><span class="op">,</span> <span class="dv">1</span>))<span class="op">;</span> <span class="co">// [4]</span></span></code></pre></div>
<h3 id="sort">sort()</h3>
<p>It’s often that we have a list of numbers, words, or other things that need to be sorted into order. The <code>sort()</code> method lets us do exactly that!</p>
<div class="sourceCode" id="cb13" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> someNumbers <span class="op">=</span> [<span class="dv">3</span><span class="op">,</span> <span class="dv">99</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> <span class="op">-</span><span class="dv">6</span><span class="op">,</span> <span class="dv">10</span>]<span class="op">;</span></span>
<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers<span class="op">.</span><span class="fu">sort</span>())<span class="op">;</span> <span class="co">// [ -6, 0, 10, 3, 99 ]</span></span>
<span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb13-4"><a href="#cb13-4" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> fruits <span class="op">=</span> [<span class="st">'banana'</span><span class="op">,</span> <span class="st">'cherry'</span><span class="op">,</span> <span class="st">'fig'</span><span class="op">,</span> <span class="st">'apple'</span><span class="op">,</span> <span class="st">'date'</span><span class="op">,</span> <span class="st">'elderberry'</span>]<span class="op">;</span></span>
<span id="cb13-5"><a href="#cb13-5" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits<span class="op">.</span><span class="fu">sort</span>())<span class="op">;</span> <span class="co">// [ 'apple', 'banana', 'cherry', 'date', 'elderberry', 'fig' ]</span></span></code></pre></div>
<h3 id="reverse">reverse()</h3>
<p>We can use <code>reverse()</code> to reverse the order of an array.</p>
<div class="sourceCode" id="cb14" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb14-1"><a href="#cb14-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> someNumbers <span class="op">=</span> [<span class="dv">3</span><span class="op">,</span> <span class="dv">99</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> <span class="op">-</span><span class="dv">6</span><span class="op">,</span> <span class="dv">10</span>]<span class="op">;</span></span>
<span id="cb14-2"><a href="#cb14-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers<span class="op">.</span><span class="fu">reverse</span>())<span class="op">;</span> <span class="co">// [ 10, -6, 0, 99, 3 ]</span></span>
<span id="cb14-3"><a href="#cb14-3" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers<span class="op">.</span><span class="fu">sort</span>()<span class="op">.</span><span class="fu">reverse</span>())<span class="op">;</span> <span class="co">// [ 99, 3, 10, 0, -6 ]</span></span>
<span id="cb14-4"><a href="#cb14-4" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb14-5"><a href="#cb14-5" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> fruits <span class="op">=</span> [<span class="st">'banana'</span><span class="op">,</span> <span class="st">'cherry'</span><span class="op">,</span> <span class="st">'fig'</span><span class="op">,</span> <span class="st">'apple'</span><span class="op">,</span> <span class="st">'date'</span><span class="op">,</span> <span class="st">'elderberry'</span>]<span class="op">;</span></span>
<span id="cb14-6"><a href="#cb14-6" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fruits<span class="op">.</span><span class="fu">sort</span>()<span class="op">.</span><span class="fu">reverse</span>())<span class="op">;</span> <span class="co">// [ 'fig', 'elderberry', 'date', 'cherry', 'banana', 'apple' ]</span></span></code></pre></div>
<h2 id="gotcha-sneaky-methods">Gotcha! Sneaky Methods</h2>
<p>The <code>sort()</code> and <code>reverse()</code> methods do something sneaky that you probably didn’t realize. They <em>change the original array</em>. That means, after using <code>sort()</code> or <code>reverse()</code> on an array, you no longer have the original order! You can’t stop them from doing this, but being aware of it can help you track down tricky bugs caused by it.</p>
<div class="sourceCode" id="cb15" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> someNumbers <span class="op">=</span> [<span class="dv">3</span><span class="op">,</span> <span class="dv">99</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> <span class="op">-</span><span class="dv">6</span><span class="op">,</span> <span class="dv">10</span>]<span class="op">;</span></span>
<span id="cb15-2"><a href="#cb15-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers)<span class="op">;</span> <span class="co">// [ 3, 99, 0, -6, 10 ]</span></span>
<span id="cb15-3"><a href="#cb15-3" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers<span class="op">.</span><span class="fu">reverse</span>())<span class="op">;</span> <span class="co">// [ 10, -6, 0, 99, 3 ]</span></span>
<span id="cb15-4"><a href="#cb15-4" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers)<span class="op">;</span> <span class="co">// [ 10, -6, 0, 99, 3 ] -- not the original order!</span></span>
<span id="cb15-5"><a href="#cb15-5" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers<span class="op">.</span><span class="fu">sort</span>())<span class="op">;</span> <span class="co">// [ -6, 0, 10, 3, 99 ]</span></span>
<span id="cb15-6"><a href="#cb15-6" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers)<span class="op">;</span> <span class="co">// [ -6, 0, 10, 3, 99 ] -- updated again!</span></span></code></pre></div>
<p>We can know that <code>sort()</code> behaves this way because the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">MDN documentation</a> says it sorts the array <em>in place</em>.</p>
<h2 id="adding-to-arrays">Adding to Arrays</h2>
<p>Now that we have seen how to access elements and parts of an array, what about adding more elements to an array? If you search online something like “javascript array add element” you’ll probably discover the <code>push()</code> method. While that method technically works, it goes against the immutability principle of functional programming.<a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a> Instead, when we think about adding elements to an array, or modifying an array in any way, we should think of producing a modified <em>copy</em> of the array.</p>
<p>Now if we take a guess at the syntax, we might try something like the following.</p>
<div class="sourceCode" id="cb17" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb17-1"><a href="#cb17-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> someNumbers <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">;</span></span>
<span id="cb17-2"><a href="#cb17-2" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> moreNumbers <span class="op">=</span> [someNumbers<span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">6</span>]<span class="op">;</span> <span class="co">// we want: [1, 2, 3, 4, 5, 6]</span></span>
<span id="cb17-3"><a href="#cb17-3" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(moreNumbers)<span class="op">;</span> <span class="co">// [ [ 1, 2, 3 ], 4, 5, 6 ]</span></span></code></pre></div>
<p>But this doesn’t achieve the intended result. The array <code>someNumbers</code> is treated as a single value, put inside a new array, followed by the next few numbers.</p>
<p>We need some new syntax: the <strong>spread</strong> operator: <code>...</code> . We can spread out an array’s elements as separate values.</p>
<div class="sourceCode" id="cb18" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb18-1"><a href="#cb18-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> someNumbers <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">;</span></span>
<span id="cb18-2"><a href="#cb18-2" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> moreNumbers <span class="op">=</span> [<span class="op">...</span>someNumbers<span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">6</span>]<span class="op">;</span></span>
<span id="cb18-3"><a href="#cb18-3" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(moreNumbers)<span class="op">;</span> <span class="co">// [ 1, 2, 3, 4, 5, 6 ]</span></span></code></pre></div>
<p>The spread operator can be used on any array. Adding arrays together becomes very easy.</p>
<div class="sourceCode" id="cb19" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb19-1"><a href="#cb19-1" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>([<span class="op">...</span>[<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">,</span> <span class="op">...</span>[<span class="dv">4</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">6</span>]<span class="op">,</span> <span class="op">...</span>[<span class="st">'apple'</span><span class="op">,</span> <span class="st">'banana'</span><span class="op">,</span> <span class="st">'cherry'</span>]])<span class="op">;</span> <span class="co">// [ 1, 2, 3, 4, 5, 6, 'apple', 'banana', 'cherry' ]</span></span>
<span id="cb19-2"><a href="#cb19-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb19-3"><a href="#cb19-3" aria-hidden="true" tabindex="-1"></a><span class="co">// Watch what happens without spread</span></span>
<span id="cb19-4"><a href="#cb19-4" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>([ [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">,</span> [<span class="dv">4</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">6</span>]<span class="op">,</span> [<span class="st">'apple'</span><span class="op">,</span> <span class="st">'banana'</span><span class="op">,</span> <span class="st">'cherry'</span>] ])<span class="op">;</span> <span class="co">// [ [1, 2, 3], [4, 5, 6], ['apple', 'banana', 'cherry'] ]</span></span></code></pre></div>
<p>Adding a new element to an array is easy now. We can even add it to the start or the end.</p>
<div class="sourceCode" id="cb20" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb20-1"><a href="#cb20-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> fruits <span class="op">=</span> [<span class="st">'banana'</span><span class="op">,</span> <span class="st">'cherry'</span>]<span class="op">;</span></span>
<span id="cb20-2"><a href="#cb20-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb20-3"><a href="#cb20-3" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> moreFruits <span class="op">=</span> [<span class="st">'apple'</span><span class="op">,</span> <span class="op">...</span>fruits]<span class="op">;</span></span>
<span id="cb20-4"><a href="#cb20-4" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(moreFruits)<span class="op">;</span> <span class="co">// [ 'apple', 'banana', 'cherry' ]</span></span>
<span id="cb20-5"><a href="#cb20-5" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb20-6"><a href="#cb20-6" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> evenMoreFruits <span class="op">=</span> [<span class="op">...</span>moreFruits<span class="op">,</span> <span class="st">'date'</span>]<span class="op">;</span></span>
<span id="cb20-7"><a href="#cb20-7" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(evenMoreFruits)<span class="op">;</span> <span class="co">// [ 'apple', 'banana', 'cherry', 'date' ]</span></span></code></pre></div>
<p>With a bit of cleverness, we can even add an element somewhere in the middle!</p>
<div class="sourceCode" id="cb21" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb21-1"><a href="#cb21-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> someNumbers <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span><span class="op">,</span> <span class="dv">5</span><span class="op">,</span> <span class="dv">6</span><span class="op">,</span> <span class="dv">7</span>]<span class="op">;</span></span>
<span id="cb21-2"><a href="#cb21-2" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> moreNumbers <span class="op">=</span> [<span class="op">...</span>someNumbers<span class="op">.</span><span class="fu">slice</span>(<span class="dv">0</span><span class="op">,</span> <span class="dv">3</span>)<span class="op">,</span> <span class="dv">4</span><span class="op">,</span> <span class="op">...</span>someNumbers<span class="op">.</span><span class="fu">slice</span>(<span class="dv">3</span>)]<span class="op">;</span></span>
<span id="cb21-3"><a href="#cb21-3" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(moreNumbers)<span class="op">;</span> <span class="co">// [ 1, 2, 3, 4, 5, 6, 7 ]</span></span></code></pre></div>
<p>Or replace the first element.</p>
<div class="sourceCode" id="cb22" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb22-1"><a href="#cb22-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> someNumbers <span class="op">=</span> [<span class="dv">99</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span><span class="op">,</span> <span class="dv">4</span>]<span class="op">;</span></span>
<span id="cb22-2"><a href="#cb22-2" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> betterNumbers <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span> <span class="op">...</span>someNumbers<span class="op">.</span><span class="fu">slice</span>(<span class="dv">1</span>)]<span class="op">;</span></span>
<span id="cb22-3"><a href="#cb22-3" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(betterNumbers)<span class="op">;</span> <span class="co">// [ 1, 2, 3, 4 ]</span></span></code></pre></div>
<p>In fact, the spread operator can be used to copy arrays so the <code>sort()</code> and <code>reverse()</code> gotcha doesn’t affect us!</p>
<div class="sourceCode" id="cb23" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb23-1"><a href="#cb23-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> someNumbers <span class="op">=</span> [<span class="dv">3</span><span class="op">,</span> <span class="dv">99</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> <span class="op">-</span><span class="dv">6</span><span class="op">,</span> <span class="dv">10</span>]<span class="op">;</span></span>
<span id="cb23-2"><a href="#cb23-2" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> fakeCopyNumbers <span class="op">=</span> someNumbers<span class="op">;</span> <span class="co">// not a real copy, only a reference</span></span>
<span id="cb23-3"><a href="#cb23-3" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> copyNumbers <span class="op">=</span> [<span class="op">...</span>someNumbers]<span class="op">;</span> <span class="co">// exact copy of someNumbers</span></span>
<span id="cb23-4"><a href="#cb23-4" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb23-5"><a href="#cb23-5" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers)<span class="op">;</span> <span class="co">// [3, 99, 0, -6, 10] -- original order</span></span>
<span id="cb23-6"><a href="#cb23-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb23-7"><a href="#cb23-7" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers<span class="op">.</span><span class="fu">sort</span>())<span class="op">;</span> <span class="co">// [ -6, 0, 10, 3, 99 ] -- sorted</span></span>
<span id="cb23-8"><a href="#cb23-8" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb23-9"><a href="#cb23-9" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers)<span class="op">;</span> <span class="co">// [ -6, 0, 10, 3, 99 ] -- not the original order!</span></span>
<span id="cb23-10"><a href="#cb23-10" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(fakeCopyNumbers)<span class="op">;</span> <span class="co">// [ -6, 0, 10, 3, 99 ] -- not the original order because it's a fake copy!</span></span>
<span id="cb23-11"><a href="#cb23-11" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(copyNumbers)<span class="op">;</span> <span class="co">// [3, 99, 0, -6, 10] -- still has the original order because it's a copy</span></span></code></pre></div>
<p>The most common real-world uses of adding to arrays are: adding an element to the end of an array, and adding two arrays together.</p>
<div class="sourceCode" id="cb24" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb24-1"><a href="#cb24-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> teachers <span class="op">=</span> [<span class="st">'Alice'</span><span class="op">,</span> <span class="st">'Bob'</span><span class="op">,</span> <span class="st">'Carol'</span>]<span class="op">;</span></span>
<span id="cb24-2"><a href="#cb24-2" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> newTeachers <span class="op">=</span> [<span class="op">...</span>teachers<span class="op">,</span> <span class="st">'Dave'</span>]<span class="op">;</span> <span class="co">// add the new teacher Dave</span></span>
<span id="cb24-3"><a href="#cb24-3" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(newTeachers)<span class="op">;</span> <span class="co">// [ 'Alice', 'Bob', 'Carol', 'Dave' ]</span></span>
<span id="cb24-4"><a href="#cb24-4" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb24-5"><a href="#cb24-5" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> managers <span class="op">=</span> [<span class="st">'Eve'</span><span class="op">,</span> <span class="st">'Frank'</span><span class="op">,</span> <span class="st">'Grace'</span>]<span class="op">;</span></span>
<span id="cb24-6"><a href="#cb24-6" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> staff <span class="op">=</span> [<span class="op">...</span>newTeachers<span class="op">,</span> <span class="op">...</span>managers]<span class="op">;</span> <span class="co">// gather all staff together</span></span>
<span id="cb24-7"><a href="#cb24-7" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(staff)<span class="op">;</span><span class="co">// [ 'Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace' ]</span></span></code></pre></div>
<h2 id="exercises">Exercises</h2>
<ul>
<li><a href="../exercises/07-arrays-exercises.js">View exercises</a></li>
<li><a href="../exercises/07-arrays-exercises.js" download type="application/octet-stream">Download exercises</a></li>
<li><a href="../exercises/07-arrays-solutions.js">View solutions</a></li>
<li><a href="../exercises/07-arrays-solutions.js" download type="application/octet-stream">Download solutions</a></li>
</ul>
<section id="footnotes" class="footnotes footnotes-end-of-document" role="doc-endnotes">
<hr />
<ol>
<li id="fn1"><p>See all the array methods on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">MDN</a>.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
<li id="fn2"><p>The <code>push()</code> method will add an element to the operating array, directly modifying it. Once this is done, our original array variable declaration is no longer true. For instance:</p>
<div class="sourceCode" id="cb16" data-org-language="js"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb16-1"><a href="#cb16-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> someNumbers <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span> <span class="dv">2</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">;</span></span>
<span id="cb16-2"><a href="#cb16-2" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers)<span class="op">;</span></span>
<span id="cb16-3"><a href="#cb16-3" aria-hidden="true" tabindex="-1"></a>someNumbers<span class="op">.</span><span class="fu">push</span>(<span class="dv">4</span>)<span class="op">;</span></span>
<span id="cb16-4"><a href="#cb16-4" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(someNumbers)<span class="op">;</span></span>
<span id="cb16-5"><a href="#cb16-5" aria-hidden="true" tabindex="-1"></a><span class="co">// Here, someNumbers = [1, 2, 3] is not true.</span></span></code></pre></div>
<a href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></li>
</ol>
</section></section>
<section id="prev-and-next-links">
<div>
<a id="next-link" href="../lessons/08-more-arrays.html">
<div>
<p>Next lesson</p>
<h2>More Arrays</h2>
</div>
<i class="fas fa-arrow-right"></i>
</a>
</div>
<div>
<a id="prev-link" href="../lessons/06-strings.html">
<i class="fas fa-arrow-left"></i>
<div>
<p>Prev lesson</p>
<h2>Strings</h2>
</div>
</a>
</div>
</section>
<section id="back-to-top"><a href="#top">Top</a></section>
</article>
</main>
<footer>
<div>
<h2><span id="created-by">Created by </span><a id="personal-link" href="https://timjohns.ca/">Tim Johns</a></h2>
<div id="social-links">
<!-- SVG icons from https://simpleicons.org/ -->
<a href="https://github.com/SlimTim10" target="_blank">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>
</a>
<a href="https://www.linkedin.com/in/tim-johns/" target="_blank">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
</a>
<a href="https://www.instagram.com/slimtim10_/" target="_blank">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"></path></svg>
</a>
</div>
</div>
<div>
<p>© 2021 Tim Johns</p>
<p>Site proudly generated by <a href="http://jaspervdj.be/hakyll">Hakyll</a> | <a href="https://github.com/SlimTim10/Intuitive-JavaScript"> View source</a></p>
</div>
</footer>
</body>
</html>