You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: coderoad.json
+134-1Lines changed: 134 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -7,6 +7,130 @@
7
7
{
8
8
"title": "Array Methods",
9
9
"pages": [
10
+
{
11
+
"title": "Filter",
12
+
"description": "Array -> Array of items that match a condition",
13
+
"explanation": "You've hacked into the school's computer system, and just in time. The grades are in, aren't you're not too proud of your performance. But that's okay, you have a plan: you're going to create a fake report card.\n\nIt would be great if you could `filter` the scores that your parents will see. A `filter` takes a matching condition function and only returns items that result in true. As an example, look at `isA` below:\n\n```\nfunction isA(x) {\n return x === 'a';\n}\n```\n\n\nLike all of the methods in this chapter, `filter` is already part of the `Array.prototype`, so you can run it following any array. Each item in the array is passed into the params of the condition function, one by one.\n\n```\nvar list = ['a', 'b'];\nlist.filter(isA);\n\n// if isA(list[0]), add to output array\n// if isA(list[1]), add to output array\n//\n//> ['a']\n```\n\nIf your data was composed of objects, we could use dot notation to find matches. Checkout `isB` below.\n\n```\nfunction isB(x) {\n return x.item === 'b'\n}\n\nvar list = [{item: 'a'}, {item: 'b'}];\nlist.filter(isB);\n//> [{item: 'b'}]\n```\n\nWhere were we? Back to filtering our grades.\n\nThere's too much student data in the computer system. We'll have to sort through it. Have a look at an example below:\n\n```\nconsole.log(data[0]);\n//> { course: 'Web Security',\n// instructor: 'Sue Denim',\n// name: 'Rebecca Heineman',\n// score: 93,\n// grade: 'A' }\n```",
14
+
"tasks": [
15
+
{
16
+
"description": "Write a filter condition function called `isAda` that returns true only if the name matches your name: \"Ada Lovelace\".",
17
+
"tests": [
18
+
"1/01/01-filter"
19
+
],
20
+
"actions": [
21
+
"open('01-filter.js')",
22
+
"set('/**\n * Data is set as a global. Example:\n * [{\n * \"title\": \"Relational Databases\",\n * \"instructor\": \"Sean Quentin Lewis\",\n * \"name\": \"Ada Lovelace\",\n * \"score\": 91,\n * \"grade\": \"A\"\n * },\n * ...\n * ]\n */\n')",
"description": "Write a filter condition called `isGoodGrade` that will filter out any \"D\" or \"F\" grades.",
37
+
"tests": [
38
+
"1/01/03-filter"
39
+
],
40
+
"actions": [
41
+
"insert('// return true if student \"grade\" is not a \"D\" or \"F\"\nfunction isGoodGrade(student) {\n\n}\n')"
42
+
]
43
+
},
44
+
{
45
+
"description": "Set `var myBest` to your scores, excluding any grades that are \"D\" or \"F\".",
46
+
"tests": [
47
+
"1/01/04-filter"
48
+
],
49
+
"actions": [
50
+
"insert('// filter out \"D\"'s and \"F\"'s here\nvar myBest = myData.filter();\n\n')"
51
+
]
52
+
}
53
+
]
54
+
},
55
+
{
56
+
"title": "Sort",
57
+
"description": "Array -> sorted Array",
58
+
"explanation": "Your grades are filtered down to your name and good scores - but wouldn't it be better if your best grades were shown at the top? Besides, your parents rarely read all the way down to the bottom.\n\nWe can use the array method `sort` to arrange our data. Let's see how it works.\n\n```js\n['c', 'b', 'a'].sort();\n//> ['a', 'b', 'c']\n\n[3, 2, 1].sort();\n//> [1, 2, 3]\n```\n\nBut what about sorting the scores inside of an object? We can write a custom `compareScore` function.\n\nA sort function takes two params, and compares the first to the second. It should return values saying where the second value should go:\n\n * -1 : sort to a lower index\n * 1 : sort to a higher index\n * 0 : stay the same\n\nAlright, now time to sort your best grades to the top.",
59
+
"tasks": [
60
+
{
61
+
"description": "Write a sort condition function called `compareScore` that can sort your data by score.",
62
+
"tests": [
63
+
"1/02/01-sort"
64
+
],
65
+
"actions": [
66
+
"open('02-sort.js')",
67
+
"set('function compareScore(a, b) {\n switch (true) {\n case b < a:\n // it should return 1 if b's score is less than a's\n return;\n case b > a:\n // it should return -1 if b's score is more than a's\n return;\n default:\n // it should return 0 if b has the same score as a\n return;\n }\n}\n')"
68
+
]
69
+
},
70
+
{
71
+
"description": "Set `mySortedGrades` to `myBest` data sorted with `compareScore`",
72
+
"tests": [
73
+
"1/02/01-sort"
74
+
],
75
+
"actions": [
76
+
"insert('// use the compare function to sort myBest\nvar mySorted = myBest\n')"
77
+
]
78
+
}
79
+
]
80
+
},
81
+
{
82
+
"title": "Map",
83
+
"description": "Array -> run a function over each item -> Array",
84
+
"explanation": "You've filtered and sorted our data, but wouldn't it be better if you could just change your grades? You can use the array method `map` to run a function that returns changes to your data.\n\nAs an example, let's look at how you would increment each number in an array.\n\n```\nfunction addOne(num) {\n return num + 1;\n}\n\nfunction addTwo(num) {\n return num + 2;\n}\n\n[1, 2, 3].map(addOne);\n//> [2, 3, 4]\n\n[1, 2, 3].map(addOne).map(addTwo);\n//> [4, 5, 6]\n```\n\n`map` is powerful.\n\nThose D & F's would look a lot better if they suddenly became A's.\n\nLet's go back to before we filtered out the bad grades.",
85
+
"tasks": [
86
+
{
87
+
"description": "Make a function `changeGrades` that takes student data and changes any \"D\"s and \"F\"s to \"A\"s.",
88
+
"tests": [
89
+
"1/03/01-map"
90
+
],
91
+
"actions": [
92
+
"open('03-map.js')",
93
+
"set('// change any student.grade's that are D's or F's into A's\nfunction changeGrades(student) {\n\n}\n')"
94
+
]
95
+
},
96
+
{
97
+
"description": "Map over the student data with the `changeGrades` function",
98
+
"tests": [
99
+
"1/03/02-map"
100
+
],
101
+
"actions": [
102
+
"insert('// map over `myData` with the `changeGrades` function\nvar myChanged = myData.map();\n')"
103
+
]
104
+
},
105
+
{
106
+
"description": "Hold up. An A in Data Science looks way to suspicious. Your parents might catch on.\nInstead, let's go back to myData and increment each score by 12 points.",
107
+
"tests": [
108
+
"1/03/03-map"
109
+
],
110
+
"actions": [
111
+
"insert('// map over `mySlightlyChanged` with a function `increaseGrades` to increment each score by 12\nvar mySlightlyChanged = myData.map();\n')"
112
+
]
113
+
},
114
+
{
115
+
"description": "Wait. Now you're getting 105 in Algorithm Design class. Set `mySlightlyFixed` to your scores with a maximum score of 95. That should be less suspicious.",
116
+
"tests": [
117
+
"1/03/04-map"
118
+
],
119
+
"actions": [
120
+
"insert('// set `mySlightlyFixed` to change any scores over 100 to a score of 95\nvar mySlightlyFixed = mySlightlyChanged.map();\n')"
121
+
]
122
+
},
123
+
{
124
+
"description": "One more problem. Now the scores don't match the grades. Set `myFixed` as the result of using the `getGrade` function to set grades according to the new scores.",
125
+
"tests": [
126
+
"1/03/05-map"
127
+
],
128
+
"actions": [
129
+
"insert('function getGrade(score) {\n switch (true) {\n case (score >= 90):\n return \"A\";\n case (score >= 80):\n return \"B\";\n case (score >= 70):\n return \"C\";\n case (score >= 60):\n return \"D\";\n default:\n return \"F\";\n }\n}\n// set `myFixed` to update grades to the new scores\nvar myFixed = mySlightlyChanged.map();\n')"
130
+
]
131
+
}
132
+
]
133
+
},
10
134
{
11
135
"title": "forEach",
12
136
"description": "Array -> run a function for each item",
@@ -56,6 +180,9 @@
56
180
"description": "`find` the name that isn't in the list of known students",
57
181
"tests": [
58
182
"1/05/01-find"
183
+
],
184
+
"actions": [
185
+
"open('05-find.js')"
59
186
]
60
187
},
61
188
{
@@ -86,6 +213,9 @@
86
213
"description": "`filter` down \"Hack Kerr\"'s data",
87
214
"tests": [
88
215
"1/06/01-concat"
216
+
],
217
+
"actions": [
218
+
"open('06-concat.js')"
89
219
]
90
220
},
91
221
{
@@ -116,6 +246,9 @@
116
246
"description": "Use `reduce` to calculate the class average",
117
247
"tests": [
118
248
"1/07/01-reduce"
249
+
],
250
+
"actions": [
251
+
"open('07-reduce.js')"
119
252
]
120
253
},
121
254
{
@@ -147,7 +280,7 @@
147
280
"description": "coming soon"
148
281
}
149
282
],
150
-
"description": "Using common built-in Javascript array methods such as `map` & `reduce`.\n\nBy the end, you should have an understanding of how to use array methods to manipulate semi-complex data.\n\n<!-- @import('./tutorial/1/01/filter') -->\n<!-- @import('./tutorial/1/02/sort') -->\n<!-- @import('./tutorial/1/03/map') -->"
283
+
"description": "Using common built-in Javascript array methods such as `map` & `reduce`.\n\nBy the end, you should have an understanding of how to use array methods to manipulate semi-complex data."
0 commit comments