Merge pull request #3789 from ltegman/fix/OOP-functional-lesson-cleanup-3760
Add Better Explanations to the Functional Programming Lessons
This commit is contained in:
Quincy Larson
@ -178,17 +178,19 @@
|
||||
"title":"Iterate over Arrays with .map",
|
||||
"difficulty":0,
|
||||
"description":[
|
||||
"The map method is one of the easiest ways to iterate through an array or object there is. Let's use it now.",
|
||||
"<code>array = array.map(function(val){</code>",
|
||||
"<code>  return val+1;</code>",
|
||||
"The <code>map</code> method is a convenient way to iterate through arrays. Here's an example usage:",
|
||||
"<code>var timesFour = array.map(function(val){</code>",
|
||||
"<code>  return val*4;</code>",
|
||||
"<code>});</code>",
|
||||
"",
|
||||
"The <code>map</code> method will iterate through every element of the array, creating a new array with values that have been modified by the callback function, and return it.",
|
||||
"In our example the callback only uses the value of the array element (the <code>val</code> argument) but your callback can also include arguments for the <code>index</code> and <code>array</code> being acted on.",
|
||||
"Use the map function to add 3 to every value in the variable <code>array</code>."
|
||||
],
|
||||
"tests":[
|
||||
"assert.deepEqual(array, [4,5,6,7,8], 'message: You should add three to each value in the array.');",
|
||||
"assert(editor.getValue().match(/\\.map\\s*\\(/gi), 'message: You should be making use of the map method.');",
|
||||
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\]/gi), 'message: You should only modify the array with <code>.map</code>.');"
|
||||
"assert(editor.getValue().match(/\\.map\\s*\\(/gi), 'message: You should be making use of the <code>map</code> method.');",
|
||||
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\]/gi), 'message: You should only modify the array with <code>map</code>.');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"//Use map to add three to each value in the array",
|
||||
@ -211,15 +213,18 @@
|
||||
"title":"Condense arrays with .reduce",
|
||||
"difficulty":0,
|
||||
"description":[
|
||||
"Reduce can be useful for condensing an array of numbers into one value.",
|
||||
"The array method <code>reduce</code> is used to iterate through an array and condense it into one value.",
|
||||
"To use <code>reduce</code> you pass in a callback whose arguments are an accumulator (in this case, <code>previousVal</code>) and the current value (<code>currentVal</code>).",
|
||||
"<code>reduce</code> has an optional second argument which can be used to set the initial value of the accumulator. If no initial value is specified if will be the first array element.",
|
||||
"Here is an example of <code>reduce</code> being used to sum all the values of an array:",
|
||||
"<code>var singleVal = array.reduce(function(previousVal, currentVal){</code>",
|
||||
"<code>  return previousVal+currentVal;</code>",
|
||||
"<code>});</code>",
|
||||
"Use the <code>reduce</code> function to sum all the values in <code>array</code> and assign it to <code>singleVal</code>."
|
||||
"Use the <code>reduce</code> method to sum all the values in <code>array</code> and assign it to <code>singleVal</code>."
|
||||
],
|
||||
"tests":[
|
||||
"assert(singleVal == 30, 'message: <code>singleVal</code> should be equal to the sum of all items in the <code>array</code> variable.');",
|
||||
"assert(editor.getValue().match(/\\.reduce\\s*\\(/gi), 'message: You should have made use of the reduce method.');"
|
||||
"assert(editor.getValue().match(/\\.reduce\\s*\\(/gi), 'message: You should have made use of the <code>reduce</code> method.');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"var array = [4,5,6,7,8];",
|
||||
@ -242,24 +247,27 @@
|
||||
"title":"Filter Arrays with .filter",
|
||||
"difficulty":0,
|
||||
"description":[
|
||||
"Filter is a useful method that can filter out values that don't match a certain criteria",
|
||||
"Let's remove all the values greater than five",
|
||||
"The <code>filter</code> method is used to iterate through an array and filter out elements where a given condition is not true.",
|
||||
"<code>filter</code> is passed a callback function which takes the current value (we've called that <code>val</code>) as an argument. It can also use arguments for the <code>index</code> and <code>array</code> being acted on.",
|
||||
"Any array element for which the callback returns true will be kept and elements that return false will be filtered out.",
|
||||
"The following code is an example of using filter to remove array elements that are not even numbers:",
|
||||
"<code>array = array.filter(function(val) {</code>",
|
||||
"<code>  return val <= 5;</code>",
|
||||
"<code>});</code>"
|
||||
"<code>  return val % 2 === 0;</code>",
|
||||
"<code>});</code>",
|
||||
"Use <code>filter</code> to remove all elements from <code>array</code> that are greater than 5."
|
||||
],
|
||||
"tests":[
|
||||
"assert.deepEqual(array, [1,2,3,4,5], 'message: You should have removed all the values from the array that are greater than 5.');",
|
||||
"assert(editor.getValue().match(/array\\.filter\\s*\\(/gi), 'message: You should be using the filter method to remove the values from the array.');",
|
||||
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7\\,8\\,9\\,10\\]/gi), 'message: You should only be using <code>.filter</code> to modify the contents of the array.');"
|
||||
"assert(editor.getValue().match(/array\\.filter\\s*\\(/gi), 'message: You should be using the <code>filter</code> method to remove the values from the array.');",
|
||||
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7\\,8\\,9\\,10\\]/gi), 'message: You should only be using <code>filter</code> to modify the contents of the array.');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"var array = [1,2,3,4,5,6,7,8,9,10];",
|
||||
" // Only change code below this line.",
|
||||
"// Only change code below this line.",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"// Only change code above this line.",
|
||||
"(function() {return array;})();"
|
||||
],
|
||||
"MDNlinks":[
|
||||
@ -273,16 +281,20 @@
|
||||
"title": "Sort Arrays with .sort",
|
||||
"difficulty":0,
|
||||
"description":[
|
||||
"You can use the method <code>sort</code> to easily sort the values in the array alphabetically or numerically.",
|
||||
"<code>var array = [1, 3, 2];</code>",
|
||||
"<code>array = array.sort();</code>",
|
||||
"<code>array</code> is now <code>[1, 2, 3]</code>.",
|
||||
"You can use the method <code>sort</code> to easily sort the values in an array alphabetically or numerically.",
|
||||
"Unlike the previous array methods we have been looking at, <code>sort</code> actually alters the array in place. However, it also returns this sorted array.",
|
||||
"<code>sort</code> can be passed a compare function as a callback. If no compare function is passed in it will convert the values to strings and sort alphabetically.",
|
||||
"Here is an example of using sort with a compare function that will sort the elements from smallest to largest number:",
|
||||
"<code>var array = [1, 12, 21, 2];</code>",
|
||||
"<code>array.sort(function(a, b) {</code>",
|
||||
"<code>  return a - b;</code>",
|
||||
"<code>});</code>",
|
||||
"Use <code>sort</code> to sort <code>array</code> alphabetically."
|
||||
],
|
||||
"tests":[
|
||||
"assert.deepEqual(array, ['alpha', 'beta', 'charlie'], 'message: You should have sorted the array alphabetically.');",
|
||||
"assert(editor.getValue().match(/\\[\\'beta\\'\\,\\s\\'alpha\\'\\,\\s'charlie\\'\\];/gi), 'message: You should only be using <code>.sort</code> to modify the array.');",
|
||||
"assert(editor.getValue().match(/\\.sort\\s*\\(\\)/gi), 'message: You should have made use of the sort method.');"
|
||||
"assert(editor.getValue().match(/\\[\\'beta\\'\\,\\s\\'alpha\\'\\,\\s'charlie\\'\\];/gi), 'message: You should only be using <code>sort</code> to modify the array.');",
|
||||
"assert(editor.getValue().match(/\\.sort\\s*\\(\\)/gi), 'message: You should have made use of the <code>sort</code> method.');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"var array = ['beta', 'alpha', 'charlie'];",
|
||||
@ -290,7 +302,7 @@
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"// Only change code above this line.",
|
||||
"(function() {return array;})();"
|
||||
],
|
||||
"MDNlinks":[
|
||||
@ -303,7 +315,8 @@
|
||||
"id": "cf1111c1c16feddfaeb2bdef",
|
||||
"title": "Reverse Arrays with .reverse",
|
||||
"description": [
|
||||
"You can use the <code>reverse</code> function to reverse the contents of an array.",
|
||||
"You can use the <code>reverse</code> method to reverse the elements of an array.",
|
||||
"<code>reverse</code> is another array method that alters the array in place, but it also returns the reversed array.",
|
||||
"Add a line of code that uses <code>reverse</code> to reverse the <code>array</code> variable."
|
||||
],
|
||||
"tests": [
|
||||
@ -313,11 +326,11 @@
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var array = [1,2,3,4,5,6,7];",
|
||||
" // Only change code below this line.",
|
||||
"// Only change code below this line.",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"// Only change code above this line.",
|
||||
"(function() {return array;})();"
|
||||
],
|
||||
"MDNlinks":[
|
||||
@ -330,12 +343,14 @@
|
||||
"id": "cf1111c1c16feddfaeb3bdef",
|
||||
"title": "Concatenate Strings with .concat",
|
||||
"description": [
|
||||
"<code>.concat()</code> can be used to merge the contents of two arrays into one.",
|
||||
"<code>concat</code> can be used to merge the contents of two arrays into one.",
|
||||
"<code>concat</code> takes an array as an argument and returns a new array with the elements of this array concatenated onto the end.",
|
||||
"Here is an example of <code>concat</code> being used to concatenate <code>otherArray</code> onto the end of <code>array</code>:",
|
||||
"<code>array = array.concat(otherArray);</code>",
|
||||
"Use <code>.concat()</code> to concatenate <code>concatMe</code> onto the end of <code>array</code> and assign it back to array."
|
||||
"Use <code>.concat()</code> to concatenate <code>concatMe</code> onto the end of <code>array</code> and assign it back to <code>array</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert.deepEqual(array, [1,2,3,4,5,6], 'message: You should concat the two arrays together.');",
|
||||
"assert.deepEqual(array, [1,2,3,4,5,6], 'message: You should concatenate the two arrays together.');",
|
||||
"assert(editor.getValue().match(/\\.concat\\s*\\(/gi), 'message: You should be using the <code>concat</code> method to merge the two arrays.');",
|
||||
"assert(editor.getValue().match(/\\[1\\,2\\,3\\]/gi) && editor.getValue().match(/\\[4\\,5\\,6\\]/gi), 'message: You should only be using <code>concat</code> to modify the arrays.');"
|
||||
],
|
||||
@ -361,14 +376,15 @@
|
||||
"title":"Split Strings with .split",
|
||||
"difficulty":0,
|
||||
"description":[
|
||||
"You can use the <code>.split()</code> method to split a string into an array.",
|
||||
"<code>.split()</code> uses the argument you pass in as a delimiter to determine which points the string should be split at.",
|
||||
"You can use the <code>split</code> method to split a string into an array.",
|
||||
"<code>split</code> uses the argument you pass in as a delimiter to determine which points the string should be split at.",
|
||||
"Here is an example of <code>split</code> being used to split an array at every space character:",
|
||||
"<code>var array = string.split(' ');</code>",
|
||||
"Use <code>.split()</code> to create an array of words from <code>string</code> and assign it to <code>array</code>."
|
||||
"Use <code>split</code> to create an array of words from <code>string</code> and assign it to <code>array</code>."
|
||||
],
|
||||
"tests":[
|
||||
"assert(typeof(array) === 'object' && array.length === 5, 'message: You should split the string by its spaces.');",
|
||||
"assert(/\\.split\\(/gi, 'message: You should use the split method on the string.');"
|
||||
"assert(/\\.split\\(/gi, 'message: You should use the <code>split</code> method on the string.');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"var string = \"Split me into an array\";",
|
||||
@ -390,25 +406,26 @@
|
||||
"title":"Join Strings with .join",
|
||||
"difficulty":0,
|
||||
"description":[
|
||||
"We can use the <code>.join()</code> method to join each element in an array into a string separated by whatever delimiter you provide as an argument to the join operation.",
|
||||
"<code>var joinMe = joinMe.join(\" \");</code>",
|
||||
"Use the <code>.join()</code> method to create a string from <code>joinMe</code> with spaces in between each element and assign it back to <code>joinMe</code>."
|
||||
"We can use the <code>join</code> method to join each element of an array into a string separated by whatever delimiter you provide as an argument.",
|
||||
"The following is an example of using <code>join</code> to join all of the elements of an array into a string with all the elements seperated by a space:",
|
||||
"<code>var joinedString = joinMe.join(\" \");</code>",
|
||||
"Use the <code>join</code> method to create a string from <code>joinMe</code> with spaces in between each element and assign it to <code>joinedString</code>."
|
||||
],
|
||||
"tests":[
|
||||
"assert(typeof(joinMe) === 'string' && joinMe === \"Split me into an array\", 'message: You should join the elements of the array with spaces.');",
|
||||
"assert(/\\.join\\(/gi, 'message: You should use of the join method on the array.');"
|
||||
"assert(typeof(joinedString) === 'string' && joinedString === \"Split me into an array\", 'message: You should join the elements of the array with spaces.');",
|
||||
"assert(/\\.join\\(/gi, 'message: You should use of the <code>join</code> method on the array.');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];",
|
||||
"// Only change code below this line.",
|
||||
"",
|
||||
"joinMe = joinMe;",
|
||||
"var joinedString = joinMe;",
|
||||
"",
|
||||
"// Only change code above this line.",
|
||||
"(function() {return joinMe;})();"
|
||||
"(function() {return joinedString;})();"
|
||||
],
|
||||
"MDNlinks":[
|
||||
"Array.join()"
|
||||
"Array.join()"
|
||||
],
|
||||
"challengeType":1,
|
||||
"type": "waypoint"
|
||||
|
||||
Reference in New Issue
Block a user