polish step 05

Author: ShMcK

README.md

@@ -9,9 +9,6 @@ Keywords: javascript, functional
 Length: 1-2 hours
 
 
-<!-- @import('00/setup') -->
-<!-- @import('01/filter') -->
-<!-- @import('02/sort') -->
 <!-- @import('08/challenge-1') -->
 <!-- @import('09/challenge-2') -->
 
@@ -32,6 +29,123 @@ CodeRoad is an open-sourced interactive tutorial platform for the Atom Editor. L
 
 ## Outline
 
+##### Start
+
+Understanding the Data Set
+
+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.
+
+```json
+var students = [
+  {
+    "title": "Relational Databases",
+    "instructor": "Sean Quentin Lewis",
+    "name": "Ada Lovelace",
+    "score": 91,
+    "grade": "A"
+  },
+  ...
+]
+```
+
+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.
+
+```js
+console.log(
+  'first instructor', students[0].instructor
+);
+// first instructor Sean Quentin Lewis
+```
+
+##### Filter
+
+Array -> Array of items that match a condition
+
+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.
+
+It would be great if you could `filter` the scores that your parents will see.
+
+`filter` takes a matching condition function and only returns items that result in true. As an example, look at `isA` below:
+
+```
+function isA(x) {
+  return x === 'a';
+}
+```
+
+
+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).
+
+```
+const list = ['a', 'b'];
+list.filter(isA);
+
+// if isA(list[0]), add to output array
+// if isA(list[1]), add to output array
+//
+//> ['a']
+```
+
+If your data was composed of objects, we could use dot notation to find matches. Checkout `isB` below.
+
+```
+function isB(x) {
+  return x.item === 'b'
+}
+
+const list = [{item: 'a'}, {item: 'b'}];
+list.filter(isB);
+//> [{item: 'b'}]
+```
+
+Where were we? Back to filtering our grades.
+
+There's too much student data in the computer system. We'll have to sort through it. Have a look at an example below:
+
+```
+console.log(students[0]);
+//> { course: 'Web Security',
+//    instructor: 'Sue Denim',
+//    name: 'Rebecca Heineman',
+//    score: 93,
+//    grade: 'A' }
+```
+
+##### Sort
+
+Array -> sorted Array
+
+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.
+
+You can use the array method `sort` to arrange your data. Let's see how it works.
+
+```js
+['c', 'b', 'a'].sort();
+//> ['a', 'b', 'c']
+
+[3, 2, 1].sort();
+//> [1, 2, 3]
+```
+
+But what about sorting scores inside of an object?
+
+```js
+[{a: 3}, {a: 1}, {a: 2}].sort();
+//> [{a: 3}, {a: 1}, {a: 2}]
+```
+
+That didn't work. Instead, you can write a custom `compareScore` function.
+
+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:
+
+  * -1 : sort to a lower index (front)
+  * 1 : sort to a higher index (back)
+  * 0 : stay the same
+
+Alright, now time to sort your best grades to the top.
+
+First you'll need to write a sort condition function called `compareScore`.
+
 ##### Map
 
 Array -> run a function over each item -> Array
@@ -111,7 +225,7 @@ Know it or not, you're probably already used to "imperative" programming.
 Imperative code tells the computer what to do, step by step.
 
 ```js
-var x = 1; // make a variable
+let x = 1; // make a variable
 x = x + 1; // add one
 x = x + 1; // add another
 console.log(x);
@@ -140,7 +254,7 @@ A function is "pure" if it doesn't change anything outside of its scope. Pure fu
 On the other hand, **impure** functions are less predictable. The result may be different if you call it at a later time.
 
 ```js
-var y = 1;
+let y = 1;
 // impure function
 function increment(x) {
   y += x;
@@ -191,7 +305,7 @@ You quickly put together a list of other students in class. If someone changed y
 `find` works similar to `filter`, but returns only the first match.
 
 ```
-var data = [1, 2, 3, 4, 5, 6];
+const data = [1, 2, 3, 4, 5, 6];
 
 function isEven(num) {
   return num % 2 === 0;
@@ -274,7 +388,7 @@ Unfortunately, Javascript is missing a built in array method to concat multiple
 Let's look at an abstraction of what we need to do:
 
 ```js
-var start = [{
+const start = [{
   a: 1,
   c: [
     { b: 1 }
@@ -286,7 +400,7 @@ var start = [{
   ]
 }];
 
-var middle = start.map(function(outer) {
+const middle = start.map(function(outer) {
   return outer.c.map(function(inner) {
     return {
       a: outer.a,
@@ -296,7 +410,7 @@ var middle = start.map(function(outer) {
 });
 //> [ [{ a: 1, b: 1 }], [{a: 2, b: 2}, {a: 2, b: 3}] ]
 
-var end = pre.flatten();
+const end = pre.flatten();
 //> [{a: 1, b: 1}, {a: 2, b: 2}, {a: 2, b: 3}]
 ```
 
@@ -329,7 +443,7 @@ function add(total, next) {
     return total + next
 }
 
-var initialValue = 100;
+const initialValue = 100;
 [1, 5, 10].reduce(add, initialValue); // initial value
 
 // add(100, 1) -> 101

coderoad.json

@@ -16,12 +16,19 @@ describe('02 function changeGrade', () => {
 		expect(changeGrade).to.have.length(1);
 	});
 
-	it('should try changing `student.grade` first before returning `student`', () => {
+	it('should try changing `course.grade` first before returning `course`', () => {
 		const regex = /return [a-zA-Z]+\.grade/;
 		const func = changeGrade.toString();
 		expect(func.match(regex)).to.be.null;
 	});
 
+	it('doesn\'t return anything', () => {
+		const test = {
+			grade: 'D'
+		};
+		expect(changeGrade(test)).to.be.defined;
+	});
+
 	it('should change grades from a D to an A', () => {
 		const test = {
 			grade: 'D'

tutorial/03/02.js

@@ -15,23 +15,22 @@ describe('04 function increaseScore', () => {
   });
 
   it('should try changing the `score` first before returning the changed object', () => {
-    var regex = /return [a-zA-Z]+\.score/;
-    var func = increaseScore.toString();
+    const regex = /return [a-zA-Z]+\.score/;
+    const func = increaseScore.toString();
     expect(func.match(regex)).to.be.null;
   });
 
   it('should increment scores by 12 points', () => {
-    var test = {
-      score: 50
+    const test = {
+      score: 50,
+      grade: 'D'
     };
-    expect(increaseScore(test)).to.deep.equal({
-      score: 62
-    });
+    expect(increaseScore(test).score).to.equal(62);
   });
 
 });
 
-describe('03 var mySlightlyChanged', () => {
+describe('04 const mySlightlyChanged', () => {
 
   const mySlightlyChanged = map.__get__('mySlightlyChanged');
 
@@ -44,9 +43,7 @@ describe('03 var mySlightlyChanged', () => {
   });
 
   it('should increment scores by 12', () => {
-    var scores = mySlightlyChanged.map(function(x) {
-      return x.score;
-    });
+    const scores = mySlightlyChanged.map((x) => x.score);
     expect(Math.min.apply(Math, scores)).to.equal(70);
   });
 

tutorial/03/04.js

@@ -16,32 +16,28 @@ describe('05 function increaseScore', () => {
 
   it('shouldn\'t change scores under 95', () => {
     const test = {
-      score: 82
+      score: 82,
+      grade: 'A',
     };
-    expect(increaseScore(test)).to.deep.equal({
-      score: 94
-    });
+    expect(increaseScore(test).score).to.equal(94);
   });
 
   it('should change scores over 95 to 95', () => {
     const test = {
-      score: 84
+      score: 84,
+      grade: 'A',
     };
-    expect(increaseScore(test)).to.deep.equal({
-      score: 95
-    });
+    expect(increaseScore(test).score).to.equal(95);
   });
 
 });
 
-describe('04 var mySlightlyChanged', () => {
+describe('05 const mySlightlyChanged', () => {
 
   const mySlightlyChanged = map.__get__('mySlightlyChanged');
 
   it('should cap scores at 95', () => {
-    const scores = mySlightlyChanged.map(function(x) {
-      return x.score;
-    });
+    const scores = mySlightlyChanged.map((x) => x.score);
     expect(Math.max.apply(Math, scores)).to.equal(95);
   });
 

tutorial/03/05.js

@@ -17,7 +17,7 @@ describe('06 function getGrade', () => {
 
 });
 
-describe('05 const mySlightlyChanged', () => {
+describe('06 const mySlightlyChanged', () => {
 
   const mySlightlyChanged = map.__get__('mySlightlyChanged');
 

tutorial/03/06.js

@@ -183,16 +183,16 @@ const mySlightlyChanged = myCourses;
 
 + Wait. Now you're getting 105 in "Algorithm Design" class. Fix `increaseScore` so that the maximum score is 95. That should be less suspicious.
 @test('03/05')
-@hint('use an if clause within `increaseScore`')
-@hint('try `if (student.score >= 95) { student.score = 95 }`')
+@hint('Use `Math.min(x, y)`')
+@hint('set `course.score` to `Math.min(95, course.score + 12)`')
 
-+ One more problem. Now the scores don't match the grades. you have 95 score in "3D Computer Graphics", but only a "B" grade. Set `myFixed` as the result of using the `getGrade` function to set grades according to their new scores.
++ One more problem. Now the scores don't match the grades. you have 95 score in "3D Computer Graphics", but only a "B" grade. Update your `increaseScore` function to also update the grade by using the `getGrade` function
 @test('03/06')
 @action(insert(
 ```
 
-// change `getGrade` to accept a "course" instead of a "score"
-// and return that updated "course"
+// use getGrade to set the course grade
+// update `increaseScore` to also update the grade
 function getGrade(score) {
   switch (true) {
     case (score >= 90):
@@ -208,13 +208,10 @@ function getGrade(score) {
   }
 }
 
-// map `myFixed` to update grades to the new scores
-const myFixed = mySlightlyChanged;
 ```
 ))
-@hint('change `getGrade` to take a `course` param instead of `score`')
-@hint('change the grade and return the `course`')
-@hint('set `course.grade = "A"` and return `course`')
+@hint('call `getGrade` inside of `increaseScore`')
+@hint('the `increaseScore` function should set course.grade equal to `getGrade(course.score)`')
 
 + Check to make sure everything is working. Set `scoresAndGrades` to an array of scores and grades only.
 @test('03/07')
@@ -223,11 +220,12 @@ const myFixed = mySlightlyChanged;
 
 // set `scoresAndGrades` to an array of scores and grades
 // it should return an array of objects like this: {score: 75, grade: 'C'}
-const scoresAndGrades = myFixed::>
+const scoresAndGrades = mySlightlyChanged.map(::>)
 ```
 ))
 @hint('use `map` to return only the "score" & "grade" fields')
 @hint('map with a function with a parameter, call it "student"')
-@hint('return `{ score: student.score, grade: student.grade }`')
+@hint('you can destructure the param to be `function({score, grade})`')
+@hint('then simply return { score, grade }')
 
 @onPageComplete('In the next step we'll compare `map` with `forEach`')

tutorial/03/map.md

@@ -1,11 +1,11 @@
 const expect = require('chai').expect;
 
-describe('01 students2 data', () => {
+describe('01 courses2 data', () => {
 
-  const students = require('BASE/data/students2.js');
+  const courses = require('BASE/data/courses2.js');
 
-  it('should be loaded in "data/students2.js"', () => {
-    expect(students).to.be.defined;
+  it('should be loaded in "data/courses2.js"', () => {
+    expect(courses).to.be.defined;
   });
 
 });

tutorial/05/01.js

@@ -2,14 +2,10 @@ const find = require('BASE/05-find.js');
 
 describe('02 const myClass', () => {
 
-  const students = find.__get__('students');
   const myClass = find.__get__('myClass');
 
   it('should filter to "Web Security" class data', () => {
-    const result = students.filter((course) => {
-      return course.title === 'Web Security';
-    });
-    expect(myClass).to.deep.equal(result);
+    expect(myClass).to.have.length(16);
   });
 
 });

tutorial/05/02.js

@@ -7,9 +7,7 @@ describe('04 const unknownStudentList', () => {
   });
 
   it('should find 10 unknown students across classes', () => {
-    const names = unknownStudentList.map((student) => {
-      return student.name;
-    }).join('');
+    const names = unknownStudentList.map((student) => student.name).join('');
     expect(names).to.equal('!findthebestrevenge!');
   });
 

tutorial/05/04.js

@@ -1,4 +1,4 @@
-const students = [{
+const courses = [{
   title: "Relational Databases",
   instructor: "Sean Quentin Lewis",
   name: "!f",
@@ -959,4 +959,4 @@ const students = [{
   score: 62,
   grade: "D"
 }];
-export default students;
+export default courses;

tutorial/05/students2.js renamed to tutorial/05/courses.js

@@ -27,10 +27,10 @@ Find is great for performantly matching unique values in data, such as an "id",
 
 + load "students" data
 @test('05/01')
-@action(open('data/students2.js'))
+@action(open('data/myCourses2.js'))
 @action(set(
 ```
-const students = [{
+const myCourses = [{
   title: "Relational Databases",
   instructor: "Sean Quentin Lewis",
   name: "!f",
@@ -991,24 +991,25 @@ const students = [{
   score: 62,
   grade: "D"
 }];
-export default students;
+export default myCourses;
 ```  
 ))
 
-+ `filter` to `students` in the class titled "Web Security"
++ `filter` to `courses` in the class titled "Web Security"
 @test('05/02')
 @action(open('05-find.js'))
 @action(set(
 ```
-import students from './data/students2';
+import courses from './data/myCourses2';
 // Array.find(fn)
 
-// filter for the student title matches "Web Security"
-const myClass = students.filter(::>);
+// filter for the course title matching "Web Security"
+const myClass = courses.filter(::>);
 ```
 ))
-@hint('create a `filter` function')
-@hint('filter for `student.title === "Web Security"`')
+@hint('create a `filter` function that takes a param `course`')
+@hint('return `true` if a condition matches, otherwise `false`')
+@hint('filter for `course.title === "Web Security"`')
 
 + `find` the name in `myClass` that isn't in the list of known students
 @test('05/03')
@@ -1035,13 +1036,13 @@ const unknownStudent = myClass.find();
 @hint('use `otherStudents.indexOf(x) === -1` to find what doesn't match')
 @hint('match for `student.name`')
 
-+ `filter` down to students without known names
++ `filter` down to students from courses without known names
 @test('05/04')
 @action(insert(
 ```
 
 // filter using `notInList`
-const unknownStudentList = students.filter(::>);
+const unknownStudentList = courses.filter(::>);
 ```  
 ))
 @hint('consider reusing a function')
@@ -1056,6 +1057,7 @@ const unknownStudentNames = unknownStudentList.map(::>);
 ```  
 ))
 @hint('use `map` to return only the `student.name`')
+@hint('try this inside of your map call: `student => student.name`')
 
 + `join('')` the array of names to output the result as a string
 @test('05/06')

tutorial/05/find.md

@@ -8,9 +8,9 @@ Keywords: javascript, functional
 Length: 1-2 hours
 
 
-<!-- @import('00/setup') -->
-<!-- @import('01/filter') -->
-<!-- @import('02/sort') -->
+@import('00/setup')
+@import('01/filter')
+@import('02/sort')
 @import('03/map')
 @import('04/forEach')
 @import('05/find')