-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path2021-03-14_JavaScript-Rotate--Array--ProblemWalkthrough-31deb19ebba1.html
More file actions
256 lines (253 loc) · 19.8 KB
/
2021-03-14_JavaScript-Rotate--Array--ProblemWalkthrough-31deb19ebba1.html
File metadata and controls
256 lines (253 loc) · 19.8 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Rotate (Array) ProblemWalkthrough</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<article class="h-entry">
<header>
<h1 class="p-name">JavaScript Rotate (Array) ProblemWalkthrough</h1>
</header>
<section data-field="subtitle" class="p-summary">
Explanation for Rotate Right
</section>
<section data-field="body" class="e-content">
<section name="e16d" class="section section--body section--first">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h4 name="501e" id="501e" class="graf graf--h4 graf--leading graf--kicker"><a
href="http://medium.com/codex" data-href="http://medium.com/codex"
class="markup--anchor markup--h4-anchor">CODEX</a></h4>
<h3 name="c438" id="c438" class="graf graf--h3 graf-after--h4 graf--title">JavaScript Rotate (Array)
Problem Walkthrough</h3>
<h3 name="26f2" id="26f2" class="graf graf--h3 graf-after--h3">Explanation for Rotate Right</h3>
</div>
<div class="section-inner sectionLayout--outsetColumn">
<figure name="e08d" id="e08d" class="graf graf--figure graf--layoutOutsetCenter graf-after--h3"><img
class="graf-image" data-image-id="0*3_vbGvHeWOgSTxk7.png" data-width="1450" data-height="1196"
src="https://cdn-images-1.medium.com/max/1200/0*3_vbGvHeWOgSTxk7.png"></figure>
</div>
<div class="section-inner sectionLayout--insetColumn">
<h3 name="281e" id="281e" class="graf graf--h3 graf-after--figure">Question</h3>
<p name="d0e2" id="d0e2" class="graf graf--p graf--hasDropCapModel graf--hasDropCap graf-after--h3"><span
class="graf-dropCap">W</span>rite a function <code
class="markup--code markup--p-code">rotateRight(array, num)</code> that takes in an array and a number
as arguments.</p>
<blockquote name="d8e7" id="d8e7" class="graf graf--blockquote graf-after--p">The function should return a
new array where the elements of the array are rotated to the right number times.<br>The function should
not mutate the original array and instead return a new array.</blockquote>
<blockquote name="08cc" id="08cc" class="graf graf--blockquote graf-after--blockquote">Define this
function using <code class="markup--code markup--blockquote-code"><a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function"
data-href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function"
class="markup--anchor markup--blockquote-anchor" rel="noopener" target="_blank"><em
class="markup--em markup--blockquote-em">function expression syntax</em></a></code><a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function"
data-href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function"
class="markup--anchor markup--blockquote-anchor" rel="noopener" target="_blank">.</a></blockquote>
<p name="81fa" id="81fa" class="graf graf--p graf-after--blockquote graf--trailing"><strong
class="markup--strong markup--p-strong">HINT:</strong> you can use <a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"
data-href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"
class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Array#slice</a> to create a
copy of an array</p>
</div>
</div>
</section>
<section name="9116" class="section section--body section--last">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<blockquote name="2372" id="2372" class="graf graf--blockquote graf--leading">JavaScript gives us four
methods to add or remove items from the beginning or end of arrays:</blockquote>
<h3 name="d6f0" id="d6f0" class="graf graf--h3 graf-after--blockquote">pop(): Remove an item from the end
of an array</h3>
<pre name="8d25" id="8d25"
class="graf graf--pre graf-after--h3"><code class="markup--code markup--pre-code">let cats = ['Bob', 'Willy', 'Mini'];</code></pre>
<pre name="737b" id="737b"
class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">cats.pop(); // ['Bob', 'Willy']</code></pre>
<blockquote name="c4e7" id="c4e7" class="graf graf--blockquote graf-after--pre">pop() returns the removed
item.</blockquote>
<h3 name="7483" id="7483" class="graf graf--h3 graf-after--blockquote">push(): Add items to the end of
an array</h3>
<pre name="821f" id="821f"
class="graf graf--pre graf-after--h3"><code class="markup--code markup--pre-code">let cats = ['Bob'];</code></pre>
<pre name="af03" id="af03"
class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">cats.push('Willy'); // ['Bob', 'Willy']</code></pre>
<pre name="8dea" id="8dea"
class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">cats.push('Puff', 'George'); // ['Bob', 'Willy', 'Puff', 'George']</code></pre>
<blockquote name="a010" id="a010" class="graf graf--blockquote graf-after--pre">push() returns the new
array length.</blockquote>
<h3 name="6094" id="6094" class="graf graf--h3 graf-after--blockquote">shift(): Remove an item from the
beginning of an array</h3>
<pre name="7d74" id="7d74"
class="graf graf--pre graf-after--h3"><code class="markup--code markup--pre-code">let cats = ['Bob', 'Willy', 'Mini'];</code></pre>
<pre name="9455" id="9455"
class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">cats.shift(); // ['Willy', 'Mini']</code></pre>
<blockquote name="0751" id="0751" class="graf graf--blockquote graf-after--pre">shift() returns the
removed item.</blockquote>
<h3 name="197a" id="197a" class="graf graf--h3 graf-after--blockquote">unshift(): Add items to the
beginning of an array</h3>
<pre name="67b1" id="67b1"
class="graf graf--pre graf-after--h3"><code class="markup--code markup--pre-code">let cats = ['Bob'];</code></pre>
<pre name="a676" id="a676"
class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">cats.unshift('Willy'); // ['Willy', 'Bob']</code></pre>
<pre name="17b7" id="17b7"
class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">cats.unshift('Puff', 'George'); // ['Puff', 'George', 'Willy', 'Bob']</code></pre>
<blockquote name="d2b7" id="d2b7" class="graf graf--blockquote graf-after--pre">unshift() returns the new
array length.</blockquote>
<p name="ae15" id="ae15" class="graf graf--p graf-after--blockquote"><strong
class="markup--strong markup--p-strong">We are being asked for two things:</strong></p>
<ol class="postList">
<li name="0000" id="0000" class="graf graf--li graf-after--p">To return an array with all the elements
shifted over ‘num’ times.</li>
<li name="8d90" id="8d90" class="graf graf--li graf-after--li">To <code
class="markup--code markup--li-code">NOT</code> mutate the original array</li>
</ol>
<p name="ab3b" id="ab3b" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Step 1.</strong><br>We need to start the function and create a
variable to hold a COPY of our input array.</p>
<figure name="7445" id="7445" class="graf graf--figure graf--iframe graf-after--p">
<script src="https://gist.github.com/bgoonz/ca7a48c316345f6f7acd9383e13fb23e.js"></script>
</figure>
<div name="3204" id="3204" class="graf graf--mixtapeEmbed graf-after--figure"><a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"
data-href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"
class="markup--anchor markup--mixtapeEmbed-anchor"
title="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"><strong
class="markup--strong markup--mixtapeEmbed-strong">Array.prototype.slice()</strong><br><em
class="markup--em markup--mixtapeEmbed-em">The slice() method returns a shallow copy of a portion of
an array into a new array object selected from start to end…</em>developer.mozilla.org</a><a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"
class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="2636903e1ff286115fc10089403c52a9"
data-thumbnail-img-id="0*IKSDQEpQRog3_cCT"
style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*IKSDQEpQRog3_cCT);"></a>
</div>
<ul class="postList">
<li name="313d" id="313d" class="graf graf--li graf-after--mixtapeEmbed">We assign array.slice(0) to a
variable called result.</li>
<li name="6bdb" id="6bdb" class="graf graf--li graf-after--li">Slicing our input array simply creates a
sliced copy of the data.</li>
<li name="1d93" id="1d93" class="graf graf--li graf-after--li">Remember that by excluding a second
argument in our slice parameter allows us to slice from the first argument all the way to the end.
</li>
</ul>
<p name="d230" id="d230" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Step 2.</strong><br>We need to create a for loop to tell our
function how many times we want to rotate.</p>
<figure name="052f" id="052f" class="graf graf--figure graf--iframe graf-after--p">
<script src="https://gist.github.com/bgoonz/b2a934289a677f337a72bcd7751a55df.js"></script>
</figure>
<ul class="postList">
<li name="8a82" id="8a82" class="graf graf--li graf-after--figure">By setting our second delimiter to i
< num we will ask our loops to run num times.</li>
<li name="820c" id="820c" class="graf graf--li graf-after--li">Running num times is the same as
executing the code block within num times.</li>
</ul>
<p name="564d" id="564d" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Step 3.</strong><br>We need to put some executable code within
our for loop to be run during every cycle.</p>
<figure name="5a5e" id="5a5e" class="graf graf--figure graf--iframe graf-after--p">
<script src="https://gist.github.com/bgoonz/44e66960ba5cc0ffe04ea0499f7c3134.js"></script>
</figure>
<ul class="postList">
<li name="c573" id="c573" class="graf graf--li graf-after--figure">Since we are rotating to the right,
every change to our result array under the hood will look like this (if we ref. our first test case):
</li>
<li name="ab3a" id="ab3a" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">['a', 'b', 'c', 'd',
'e'];</code> (how it looks like at the start)</li>
<li name="5fab" id="5fab" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">['e', 'a', 'b', 'c',
'd'];</code> (after one run of the for loop)</li>
<li name="e31e" id="e31e" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">['d', 'e', 'a', 'b',
'c'];</code> (after second/last run of the for loop)</li>
<li name="aa2f" id="aa2f" class="graf graf--li graf-after--li">To accomplish this we first need to
‘<code class="markup--code markup--li-code">pop</code>' off or remove our last element.</li>
<li name="d19e" id="d19e" class="graf graf--li graf-after--li">Two things happen when we use this
built-in function.</li>
<li name="687c" id="687c" class="graf graf--li graf-after--li">Our copied array is mutated to lose it’s
last ele.</li>
<li name="392e" id="392e" class="graf graf--li graf-after--li">The removed element is stored in the
variable we assigned to the function.</li>
<li name="7c06" id="7c06" class="graf graf--li graf-after--li">Our second step is to add it to the start
of our array, to do this we can use <code class="markup--code markup--li-code">unshift</code>.</li>
<li name="4a0f" id="4a0f" class="graf graf--li graf-after--li">By inputting the variable we are using to
hold our removed element into the parameter of unshift we are adding our element to the front of the
array.</li>
</ul>
<p name="eb49" id="eb49" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Step 4.</strong></p>
<p name="f7e6" id="f7e6" class="graf graf--p graf-after--p">Now that our for loop has ended and our copied
array looks just like how the answer looks, we need to output the answer.</p>
<figure name="48c4" id="48c4" class="graf graf--figure graf--iframe graf-after--p">
<script src="https://gist.github.com/bgoonz/b033f820c35869af0869ce712af68bda.js"></script>
</figure>
<ul class="postList">
<li name="5d8c" id="5d8c" class="graf graf--li graf-after--figure">We accomplish this by creating a
<code class="markup--code markup--li-code">return</code> line AFTER the for loop.</li>
</ul>
<h3 name="0388" id="0388" class="graf graf--h3 graf-after--li">End Result</h3>
<figure name="cdf3" id="cdf3" class="graf graf--figure graf--iframe graf-after--h3">
<script src="https://gist.github.com/bgoonz/4e2a040cd94006bb887a77a68f4287b9.js"></script>
</figure>
<h3 name="d8a4" id="d8a4" class="graf graf--h3 graf-after--figure">If you found this guide helpful feel
free to checkout my GitHub/gists where I host similar content:</h3>
<div name="1c2f" id="1c2f" class="graf graf--mixtapeEmbed graf-after--h3"><a
href="https://gist.github.com/bgoonz" data-href="https://gist.github.com/bgoonz"
class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong
class="markup--strong markup--mixtapeEmbed-strong">bgoonz’s gists</strong><br><em
class="markup--em markup--mixtapeEmbed-em">Instantly share code, notes, and snippets. Web Developer,
Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a
href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"
data-media-id="ab25adbb500306703daab23d08a7739a" data-thumbnail-img-id="0*3O67jrqm3EHjTK2H"
style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*3O67jrqm3EHjTK2H);"></a>
</div>
<div name="3585" id="3585" class="graf graf--mixtapeEmbed graf-after--mixtapeEmbed"><a
href="https://github.com/bgoonz" data-href="https://github.com/bgoonz"
class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong
class="markup--strong markup--mixtapeEmbed-strong">bgoonz — Overview</strong><br><em
class="markup--em markup--mixtapeEmbed-em">Web Developer, Electrical Engineer JavaScript | CSS |
Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a
href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"
data-media-id="6ee74d5200d495ddc7ddad0c92bd6dce" data-thumbnail-img-id="0*Udg3rbeFyslZ9dyl"
style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*Udg3rbeFyslZ9dyl);"></a>
</div>
<h3 name="cb1a" id="cb1a" class="graf graf--h3 graf-after--mixtapeEmbed">Or Checkout my personal
Resource Site:</h3>
<h3 name="c9db" id="c9db" class="graf graf--h3 graf-after--h3"><strong
class="markup--strong markup--h3-strong">==>currently under development & very buggy</strong>
</h3>
<div name="4bce" id="4bce" class="graf graf--mixtapeEmbed graf-after--h3 graf--trailing"><a
href="https://web-dev-resource-hub.netlify.app/" data-href="https://web-dev-resource-hub.netlify.app/"
class="markup--anchor markup--mixtapeEmbed-anchor"
title="https://web-dev-resource-hub.netlify.app/"><strong
class="markup--strong markup--mixtapeEmbed-strong">a/A-Student-Resources</strong><br><em
class="markup--em markup--mixtapeEmbed-em">Edit
description</em>web-dev-resource-hub.netlify.app</a><a
href="https://web-dev-resource-hub.netlify.app/"
class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"
data-media-id="142b348a1c3b7cab095decda3afd6236"></a></div>
</div>
</div>
</section>
</section>
<footer>
<p>By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on <a
href="https://medium.com/p/31deb19ebba1"><time class="dt-published"
datetime="2021-03-14T00:59:48.287Z">March 14, 2021</time></a>.</p>
<p><a href="https://medium.com/@bryanguner/javascript-rotate-array-problemwalkthrough-31deb19ebba1"
class="p-canonical">Canonical link</a></p>
<p>Exported from <a href="https://medium.com">Medium</a> on April 3, 2021.</p>
</footer>
</article>
</body>
</html>