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: README.md
+3-117Lines changed: 3 additions & 117 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,6 +9,9 @@ Keywords: javascript, functional
9
9
Length: 1-2 hours
10
10
11
11
12
+
<!-- @import('00/setup') -->
13
+
<!-- @import('01/filter') -->
14
+
<!-- @import('02/sort') -->
12
15
<!-- @import('08/challenge-1') -->
13
16
<!-- @import('09/challenge-2') -->
14
17
@@ -29,123 +32,6 @@ CodeRoad is an open-sourced interactive tutorial platform for the Atom Editor. L
29
32
30
33
## Outline
31
34
32
-
##### Start
33
-
34
-
Understanding the Data Set
35
-
36
-
Over this tutorial series, we'll be changing and working with two different data sets. It'll be a big help to first understand what the data looks like.
37
-
38
-
```json
39
-
var students = [
40
-
{
41
-
"title": "Relational Databases",
42
-
"instructor": "Sean Quentin Lewis",
43
-
"name": "Ada Lovelace",
44
-
"score": 91,
45
-
"grade": "A"
46
-
},
47
-
...
48
-
]
49
-
```
50
-
51
-
Here we have an array of "student" objects. To get the first item in the array, you can use the array index. Array indexes start at 0.
52
-
53
-
```js
54
-
console.log(
55
-
'first instructor', students[0].instructor
56
-
);
57
-
// first instructor Sean Quentin Lewis
58
-
```
59
-
60
-
##### Filter
61
-
62
-
Array -> Array of items that match a condition
63
-
64
-
You've hacked into the school's computer system, and just in time. The grades are in, but you're not too proud of your performance. That's okay, you have a plan: you're going to create a fake report card.
65
-
66
-
It would be great if you could `filter` the scores that your parents will see.
67
-
68
-
`filter` takes a matching condition function and only returns items that result in true. As an example, look at `isA` below:
69
-
70
-
```
71
-
function isA(x) {
72
-
return x === 'a';
73
-
}
74
-
```
75
-
76
-
77
-
Like 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. [Learn more](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).
78
-
79
-
```
80
-
var list = ['a', 'b'];
81
-
list.filter(isA);
82
-
83
-
// if isA(list[0]), add to output array
84
-
// if isA(list[1]), add to output array
85
-
//
86
-
//> ['a']
87
-
```
88
-
89
-
If your data was composed of objects, we could use dot notation to find matches. Checkout `isB` below.
90
-
91
-
```
92
-
function isB(x) {
93
-
return x.item === 'b'
94
-
}
95
-
96
-
var list = [{item: 'a'}, {item: 'b'}];
97
-
list.filter(isB);
98
-
//> [{item: 'b'}]
99
-
```
100
-
101
-
Where were we? Back to filtering our grades.
102
-
103
-
There's too much student data in the computer system. We'll have to sort through it. Have a look at an example below:
104
-
105
-
```
106
-
console.log(students[0]);
107
-
//> { course: 'Web Security',
108
-
// instructor: 'Sue Denim',
109
-
// name: 'Rebecca Heineman',
110
-
// score: 93,
111
-
// grade: 'A' }
112
-
```
113
-
114
-
##### Sort
115
-
116
-
Array -> sorted Array
117
-
118
-
Your grades are filtered down to your name and good scores - but wouldn't it be better if your best grades were displayed first, at the top? Besides, your parents rarely read anything through.
119
-
120
-
You can use the array method `sort` to arrange your data. Let's see how it works.
121
-
122
-
```js
123
-
['c', 'b', 'a'].sort();
124
-
//> ['a', 'b', 'c']
125
-
126
-
[3, 2, 1].sort();
127
-
//> [1, 2, 3]
128
-
```
129
-
130
-
But what about sorting scores inside of an object?
131
-
132
-
```js
133
-
[{a:3}, {a:1}, {a:2}].sort();
134
-
//> [{a: 3}, {a: 1}, {a: 2}]
135
-
```
136
-
137
-
That didn't work. Instead, you can write a custom `compareScore` function.
138
-
139
-
A sort function takes two params, and compares the first to the second. It should return values saying where the second value should go in the array:
140
-
141
-
* -1 : sort to a lower index (front)
142
-
* 1 : sort to a higher index (back)
143
-
* 0 : stay the same
144
-
145
-
Alright, now time to sort your best grades to the top.
146
-
147
-
First you'll need to write a sort condition function called `compareScore`.
Copy file name to clipboardExpand all lines: tutorial/01/filter.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,7 +17,7 @@ function isA(x) {
17
17
Like 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. [Learn more](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).
18
18
19
19
```
20
-
var list = ['a', 'b'];
20
+
const list = ['a', 'b'];
21
21
list.filter(isA);
22
22
23
23
// if isA(list[0]), add to output array
@@ -33,7 +33,7 @@ function isB(x) {
33
33
return x.item === 'b'
34
34
}
35
35
36
-
var list = [{item: 'a'}, {item: 'b'}];
36
+
const list = [{item: 'a'}, {item: 'b'}];
37
37
list.filter(isB);
38
38
//> [{item: 'b'}]
39
39
```
@@ -70,12 +70,12 @@ function isAda(student) {
70
70
@hint('Check if `student.name` matches "Ada Lovelace"')
71
71
@hint('Use `===` to check equality')
72
72
73
-
+ Set `var myData` to filter with the `isAda` function.
73
+
+ Set `const myData` to filter with the `isAda` function.
74
74
@test('01/02')
75
75
@action(insert(
76
76
```
77
77
// run the function name in filter
78
-
var myData = students.filter(::>);
78
+
const myData = students.filter(::>);
79
79
```
80
80
))
81
81
@hint('Add a function to the `filter` call: `Array.filter(function() {})`')
@@ -97,13 +97,13 @@ function isGoodGrade(student) {
97
97
@hint('use `!==` to check non-equality')
98
98
@hint('Match for both: `student.grade !== "D" && student.grade !== "F"`')
99
99
100
-
+ Set `var myBest` to your scores, excluding any grades that are "D" or "F".
100
+
+ Set `const myBest` to your scores, excluding any grades that are "D" or "F".
0 commit comments