113 lines
8.2 KiB
JSON
113 lines
8.2 KiB
JSON
{
|
|
"name": "System Design and Concept Questions",
|
|
"order": 3,
|
|
"time": "",
|
|
"helpRoom": "HelpJavaScript",
|
|
"challenges": [
|
|
{
|
|
"id": "59874fc749228906236a3275",
|
|
"title": "Array.prototype.map",
|
|
"description": [
|
|
{
|
|
"subtitle": "Flooring an Array",
|
|
"question": "What will the following code print out?\n<pre><code class='language-javascript'>const results = [1.32, 2.43, 3.9]\n .map(Math.floor);\nconsole.log(results);</code></pre>",
|
|
"choices": [
|
|
"<pre><code class='language-javascript'>1.32 2.43 3.9</code></pre>",
|
|
"<pre><code class='language-javascript'>['1.32', '2.43', '3.9']</code></pre>",
|
|
"<pre><code class='language-javascript'>[1, 2, 3]</code></pre>",
|
|
"<pre><code class='language-javascript'>'1 2 3'</code></pre>"
|
|
],
|
|
"answer": 2,
|
|
"explanation": "The map function takes a callback function as it's first parameter and applies that function against every value inside the array. In this example, our callback function is the <code>Math.floor</code> function which will truncate the decimal points of all the numbers and convert them to integers."
|
|
},
|
|
{
|
|
"subtitle": "Custom Map Functions",
|
|
"question": "What will the following code print out?\n<pre><code class='language-javascript'>const results = ['a', 'b', 'c']\n .map(a => [a.toUpperCase()]);\nconsole.log(results);</code></pre>",
|
|
"choices": [
|
|
"<pre><code class='language-javascript'>[['A'], ['B'], ['C']]</code></pre>",
|
|
"<pre><code class='language-javascript'>['A', 'B', 'C']</code></pre>",
|
|
"<pre><code class='language-javascript'>['a', 'b', 'c]</code></pre>",
|
|
"<pre><code class='language-javascript'>'ABC'</code></pre>"
|
|
],
|
|
"answer": 0,
|
|
"explanation": "The map function will return a new array with each element equal to the old element ran through a callback function. Our callback function takes our original element, changes it to a upper case, and then wraps it in an array; thus, leaving us with <code>[['A'], ['B'], ['C']]</code>"
|
|
},
|
|
{
|
|
"subtitle": "Maps on Maps",
|
|
"question": "What will the following code print out?\n<pre><code class='language-javascript'>const results = [[4, 1], [2, 0], [3, 3]]\n .map(a => \n a.map(b => b % 2)[0] + a.map(b => b - 1)[1]\n )\nconsole.log(results);</code></pre>",
|
|
"choices": [
|
|
"<pre><code class='language-javascript'>[[0, 1], [0, 0], [1, 1]]</code></pre>",
|
|
"<pre><code class='language-javascript'>[[0, 0], [0, -1], [1, 2]]</code></pre>",
|
|
"<pre><code class='language-javascript'>[1, 1, 2]</code></pre>",
|
|
"<pre><code class='language-javascript'>[0, -1, 3]</code></pre>"
|
|
],
|
|
"answer": 3,
|
|
"explanation": "This answer can be explained by first looking at the example of what happens with the first element in our array, <code>[4, 1]</code>. Our first map callback will run a mod 2 map function over <code>[4, 1]</code> leaving us with a new array of <code>[0, 1]</code>. The second map call which is inside our callback will subtract 1 from every element, leaving us with <code>[3, 0]</code>. Last, we take element at index 0, <code>0</code>, and add it to element of index 1 from our second map function, <code>0</code>, leaving us with 0; thus, after the first iteration of the top level map function, we are left with an array that looks like so: <code>[1, [2, 0], [3, 3]]</code>. We simply keep doing that logic for the other elements until we finish: <code>[1, -1, [3, 3]]</code>, and <code>[1, -1, 3]</code>"
|
|
},
|
|
{
|
|
"subtitle": "Words Containing 'a'",
|
|
"question": "What will the following code print out?\n<pre><code class='language-javascript'>const results = ['apple', 'dog', 'cat']\n .map((a, i) => \n a.indexOf('a') !== -1 ? i : null)\nconsole.log(results);</code></pre>",
|
|
"choices": [
|
|
"<pre><code class='language-javascript'>[0, -1, 1]</code></pre>",
|
|
"<pre><code class='language-javascript'>[0, null, 2]</code></pre>",
|
|
"<pre><code class='language-javascript'>[null, null, null]</code></pre>",
|
|
"<pre><code class='language-javascript'>[-1, null, 2]</code></pre>"
|
|
],
|
|
"answer": 1,
|
|
"explanation": "This map example will return an array where each elements of the new array is either the original array index when the element contains the character 'a'; otherwise, an element of null for any words that do not have the character 'a'."
|
|
},
|
|
{
|
|
"subtitle": "Accessing the Original Array Elements",
|
|
"question": "What will the following code print out?\n<pre><code class='language-javascript'>const results = [1, 2, 3]\n .map((a, _, o) => a + o[0])\nconsole.log(results);</code></pre>",
|
|
"choices": [
|
|
"<pre><code class='language-javascript'>[1, 2, 3]</code></pre>",
|
|
"<pre><code class='language-javascript'>[0, 0, 0]</code></pre>",
|
|
"<pre><code class='language-javascript'>[3, 2, 1]</code></pre>",
|
|
"<pre><code class='language-javascript'>[2, 3, 4]</code></pre>"
|
|
],
|
|
"answer": 3,
|
|
"explanation": "This map example will add the value of the first element in the original array to all the other elements in the array."
|
|
},
|
|
{
|
|
"subtitle": "More Map Hacking",
|
|
"question": "What will the following code print out?\n<pre><code class='language-javascript'>const results = [8, 5, 3]\n .map((a, i, o) => o[o.length - i - 1])\nconsole.log(results);</code></pre>",
|
|
"choices": [
|
|
"<pre><code class='language-javascript'>[3, 5, 8]</code></pre>",
|
|
"<pre><code class='language-javascript'>[5, 3, 8]</code></pre>",
|
|
"<pre><code class='language-javascript'>[8, 5, 3]</code></pre>",
|
|
"<pre><code class='language-javascript'>[3, 8, 5]</code></pre>"
|
|
],
|
|
"answer": 0,
|
|
"explanation": "This map example will reverse the array. The third argument to the map callback function is the original array; therefore, we can use the current index in the map function, and work our way backwards from the end of the array using the o.length."
|
|
},
|
|
{
|
|
"subtitle": "Custom Scoping",
|
|
"question": "What will the following code print out?\n<pre><code class='language-javascript'>const results = ['a', 'b', 'c']\n .map(function(a) { return this[a]; }, {a: 9, b: 3, c: 1})\nconsole.log(results);</code></pre>",
|
|
"choices": [
|
|
"<pre><code class='language-javascript'>['a', 'b', 'c']</code></pre>",
|
|
"<pre><code class='language-javascript'>[9, 3, 1]</code></pre>",
|
|
"<pre><code class='language-javascript'>[3, 9, 1]</code></pre>",
|
|
"<pre><code class='language-javascript'>[{a: 9}, {b: 3}, {c: 1}]</code></pre>"
|
|
],
|
|
"answer": 1,
|
|
"explanation": "This map example will reverse the array. The third argument to the map callback function is the original array; therefore, we can use the current index in the map function, and work our way backwards from the end of the array using the o.length."
|
|
},
|
|
{
|
|
"subtitle": "Reversing in Map, Just Because",
|
|
"question": "What will the following code print out?\n<pre><code class='language-javascript'>const results = [1, 2, 3, 4, 5]\n .map((a, _, o) => o.reverse() && a)\nconsole.log(results);</code></pre>",
|
|
"choices": [
|
|
"<pre><code class='language-javascript'>[5, 4, 3, 2, 1]</code></pre>",
|
|
"<pre><code class='language-javascript'>[5, 2, 3, 5, 1]</code></pre>",
|
|
"<pre><code class='language-javascript'>[1, 2, 3, 4, 5]</code></pre>",
|
|
"<pre><code class='language-javascript'>[1, 4, 3, 2, 5]</code></pre>"
|
|
],
|
|
"answer": 3,
|
|
"explanation": "This map example will reverse the array. The third argument to the map callback function is the original array; therefore, we can use the current index in the map function, and work our way backwards from the end of the array using the o.length."
|
|
}
|
|
],
|
|
"tests": [],
|
|
"challengeType": 8
|
|
}
|
|
]
|
|
}
|