Skip to content

Commit 8b22c5b

Browse files
ShMcKShMcK
committed
04-forEach init
1 parent fd8c47b commit 8b22c5b

File tree

6 files changed

+231
-1
lines changed

6 files changed

+231
-1
lines changed

‎coderoad.json

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,37 @@
133133
},
134134
{
135135
"title": "forEach",
136-
"description": "Array -> run a function for each item"
136+
"description": "Array -> run a function for each item",
137+
"explanation": "You've updated your grades, but they're still in an array. It's time to loop over them and log them to the console.\n\n`forEach` has a lot in common with `map`, but the major differences between the two is important to understand the difference between \"functional\" & \"imperative\" programming.\n\n> Imperative programming describes the order of actions\n\n> Functional programming describes the data transformation\n\nFunctional programming is a lot like math. As in math, 1 + 1 always equals 2.\n\nIn the same way, a \"pure\" function will always have the same result from a given input. Input 1, output 2. Every time.\n\n```js\n// a pure function\nfunction addOne(x) {\n return x + 1;\n}\naddOne(1)\n//> 2\naddOne(1)\n//> 2\n```\n\nA function is \"pure\" if it doesn't change anything outside of its scope. Pure functions are easy to test, reuse and reason about. Impure functions, on the other hand, are less predictable.\n\n```js\n// impure function\nvar y = 1;\nfunction increment(x) {\n y += x;\n return y;\n}\nincrement(1)\n//> 2\nincrement(1)\n//> 3\n```\n\nIt's good practice to ensure your `map` functions remain pure.\n\nBut `forEach` can be a little more dangerous. Why? Let's have a look.\n\n```js\n[1, 2, 3].map(addOne);\n//> [2, 3, 4]\n//\n[1, 2, 3].forEach(addOne);\n//> undefined\n```\n\nWhy `undefined`? `forEach` runs a function on each item in the array, and doesn't care what the function returns. The function must make changes, called \"side effects\", to even be noticed.\n\n```js\nfunction addOneToLog(x) {\n console.log(x);\n}\n\n[1, 2, 3].forEach(addOneToLog);\n//> 2\n//> 3\n//> 4\n```",
138+
"tasks": [
139+
{
140+
"description": "Use `forEach` to log out your report card to the console\n@open('04-forEach.js')",
141+
"tests": [
142+
"1/04/01-forEach"
143+
],
144+
"actions": [
145+
"set('function logCourse(course) {\n console.log(`{course.grade} {course.score} {course.title}`);\n}\n\n// log your grades to the console\nmyFixed.forEach();\n')"
146+
]
147+
},
148+
{
149+
"description": "Run `myFixed.forEach` on a second function called `logCourseWithIndex` which looks like `logCourse` but takes a second parameter called index.",
150+
"tests": [
151+
"1/04/02-forEach"
152+
],
153+
"actions": [
154+
"insert('function logCourseWithIndex(course, index) {\n console.log(`${index + 1} {course.grade} {course.score} {course.title}`);\n}\n\n// log your grades to the console with an index\nmyFixed.forEach();\n')"
155+
]
156+
},
157+
{
158+
"description": "Where does this second parameter come from? Array methods actually have two extra parameters: the index, and the entire array. Run `myFixed.forEach` with `logCourseWithIndexAndArray`.",
159+
"tests": [
160+
"1/04/03-forEach"
161+
],
162+
"actions": [
163+
"insert('function logCourseWithIndexAndArray(course, index, array) {\n console.log(`${index + 1}/{array.length} {course.grade} {course.score} {course.title}`);\n}\n\n// log your grades to the console with an index and array length\nmyFixed.forEach();\n')"
164+
]
165+
}
166+
]
137167
},
138168
{
139169
"title": "find",

‎tutorial/1/04/01-forEach.spec.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
var expect = require('chai').expect;
2+
var path = require('path');
3+
var loadJS = require('../../common/loadJS').default;
4+
if (!global.myFixed) {
5+
global.myFixed = JSON.parse(JSON.stringify(require('./myFixed.json')));
6+
}
7+
8+
describe('log', function() {
9+
10+
11+
12+
});

‎tutorial/1/04/02-forEach.spec.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
var expect = require('chai').expect;
2+
var path = require('path');
3+
var loadJS = require('../../common/loadJS').default;
4+
if (!global.myFixed) {
5+
global.myFixed = JSON.parse(JSON.stringify(require('./myFixed.json')));
6+
}
7+
8+
describe('log', function() {
9+
10+
11+
12+
});

‎tutorial/1/04/03-forEach.spec.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
var expect = require('chai').expect;
2+
var path = require('path');
3+
var loadJS = require('../../common/loadJS').default;
4+
if (!global.myFixed) {
5+
global.myFixed = JSON.parse(JSON.stringify(require('./myFixed.json')));
6+
}
7+
8+
describe('log', function() {
9+
10+
11+
12+
});

‎tutorial/1/04/forEach.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,105 @@
11
### forEach
22
Array -> run a function for each item
3+
4+
You've updated your grades, but they're still in an array. It's time to loop over them and log them to the console.
5+
6+
`forEach` has a lot in common with `map`, but the major differences between the two is important to understand the difference between "functional" & "imperative" programming.
7+
8+
> Imperative programming describes the order of actions
9+
10+
> Functional programming describes the data transformation
11+
12+
Functional programming is a lot like math. As in math, 1 + 1 always equals 2.
13+
14+
In the same way, a "pure" function will always have the same result from a given input. Input 1, output 2. Every time.
15+
16+
```js
17+
// a pure function
18+
function addOne(x) {
19+
return x + 1;
20+
}
21+
addOne(1)
22+
//> 2
23+
addOne(1)
24+
//> 2
25+
```
26+
27+
A function is "pure" if it doesn't change anything outside of its scope. Pure functions are easy to test, reuse and reason about. Impure functions, on the other hand, are less predictable.
28+
29+
```js
30+
// impure function
31+
var y = 1;
32+
function increment(x) {
33+
y += x;
34+
return y;
35+
}
36+
increment(1)
37+
//> 2
38+
increment(1)
39+
//> 3
40+
```
41+
42+
It's good practice to ensure your `map` functions remain pure.
43+
44+
But `forEach` can be a little more dangerous. Why? Let's have a look.
45+
46+
```js
47+
[1, 2, 3].map(addOne);
48+
//> [2, 3, 4]
49+
//
50+
[1, 2, 3].forEach(addOne);
51+
//> undefined
52+
```
53+
54+
Why `undefined`? `forEach` runs a function on each item in the array, and doesn't care what the function returns. The function must make changes, called "side effects", to even be noticed.
55+
56+
```js
57+
function addOneToLog(x) {
58+
console.log(x);
59+
}
60+
61+
[1, 2, 3].forEach(addOneToLog);
62+
//> 2
63+
//> 3
64+
//> 4
65+
```
66+
67+
+ Use `forEach` to log out your report card to the console
68+
@test('1/04/01-forEach')
69+
@open('04-forEach.js')
70+
@action(set(
71+
```
72+
function logCourse(course) {
73+
console.log(`{course.grade} {course.score} {course.title}`);
74+
}
75+
76+
// log your grades to the console
77+
myFixed.forEach();
78+
```
79+
))
80+
81+
+ Run `myFixed.forEach` on a second function called `logCourseWithIndex` which looks like `logCourse` but takes a second parameter called index.
82+
@test('1/04/02-forEach')
83+
@action(insert(
84+
```
85+
function logCourseWithIndex(course, index) {
86+
console.log(`${index + 1} {course.grade} {course.score} {course.title}`);
87+
}
88+
89+
// log your grades to the console with an index
90+
myFixed.forEach();
91+
```
92+
))
93+
94+
+ Where does this second parameter come from? Array methods actually have two extra parameters: the index, and the entire array. Run `myFixed.forEach` with `logCourseWithIndexAndArray`.
95+
@test('1/04/03-forEach')
96+
@action(insert(
97+
```
98+
function logCourseWithIndexAndArray(course, index, array) {
99+
console.log(`${index + 1}/{array.length} {course.grade} {course.score} {course.title}`);
100+
}
101+
102+
// log your grades to the console with an index and array length
103+
myFixed.forEach();
104+
```
105+
))

‎tutorial/1/04/myFixed.json

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
[{
2+
"course": "Relational Databases",
3+
"instructor": "Sean Quentin Lewis",
4+
"name": "Ada Lovelace",
5+
"score": 95,
6+
"grade": "A"
7+
}, {
8+
"course": "3D Computer Graphics",
9+
"instructor": "G.L. Webb",
10+
"name": "Ada Lovelace",
11+
"score": 95,
12+
"grade": "A"
13+
}, {
14+
"course": "Front End Web Development",
15+
"instructor": "Moe Zaick",
16+
"name": "Ada Lovelace",
17+
"score": 73,
18+
"grade": "C"
19+
}, {
20+
"course": "Web Security",
21+
"instructor": "Sue Denim",
22+
"name": "Ada Lovelace",
23+
"score": 93,
24+
"grade": "A"
25+
}, {
26+
"course": "Javascript Fundamentals",
27+
"instructor": "Jay Kweerie",
28+
"name": "Ada Lovelace",
29+
"score": 85,
30+
"grade": "B"
31+
}, {
32+
"course": "Data Science",
33+
"instructor": "Ford Fulkerson",
34+
"name": "Ada Lovelace",
35+
"score": 70,
36+
"grade": "C"
37+
}, {
38+
"course": "Algorithm Design",
39+
"instructor": "Gale Shapely",
40+
"name": "Ada Lovelace",
41+
"score": 95,
42+
"grade": "A"
43+
}, {
44+
"course": "Data Abstraction",
45+
"instructor": "Aster Ricks",
46+
"name": "Ada Lovelace",
47+
"score": 94,
48+
"grade": "A"
49+
}, {
50+
"course": "Data Structures",
51+
"instructor": "Brodal Q.",
52+
"name": "Ada Lovelace",
53+
"score": 95,
54+
"grade": "A"
55+
}, {
56+
"course": "Networks",
57+
"instructor": "Van Emde Boas",
58+
"name": "Ada Lovelace",
59+
"score": 77,
60+
"grade": "C"
61+
}]

0 commit comments

Comments
 (0)