Merge pull request HackYourFuture#34 from remarcmij/master

mkruijt · web-flow · commit 42aa07995143 · 2018-02-06T13:03:42.000+01:00
Updated this.md, homework week 7 Step 5
diff --git a/Week7/MAKEME.md b/Week7/MAKEME.md
@@ -22,7 +22,7 @@ Give feedback on Step 4 and 5 of last weeks homework. Please provide the feedbac
 
 _Deadline Monday_
 
-- Solve all your Git issues. DO NO CLOSE AN ISSUE WITHOUT AN EXPLANATION OR CODE COMMIT REFERENCING THAT ISSUE. 
+- Solve all your Git issues. DO NO CLOSE AN ISSUE WITHOUT AN EXPLANATION OR CODE COMMIT REFERENCING THAT ISSUE.
 
 
 ## Step 3: Fix issues
@@ -37,7 +37,7 @@ _Deadline Saturday_
 
 Let's practice working with Objects and Arrays. Go to FreeCodeCamp and complete all challenges under "Object Oriented and Functional Programming" and the _first four challenges_ under "Basic Algorithm Scripting", up until 'Find the longest word in a string.'
 
-Also make: 
+Also make:
 
 1. [Comparisons with the Logical And Operator](https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator)
 
@@ -49,38 +49,86 @@ Also make:
 
 _Deadline Wednesday_
 
+Complete the following code:
+
 ```js
-// Inspired by the lesson.
-// Create the following objects: Movies, Staff.
-
-//Fill the following methods:
-Movies {
-  getStars()
-  getWrites()
-  getDirector()
-  getRating()
-  rate()
+class Movie {
+  constructor(title, director) {
+    // add your code here
+  }
+
+  getTitle() {
+    // add your code here
+  }
+
+  getDirector() {
+    // add your code here
+  }
+
+  addStar(star) {
+    // add your code here
+  }
+
+  getStars() {
+    // add your code here
+  }
+
+  addWriter(writer) {
+    // add your code here
+  }
+
+  getWriters() {
+    // add your code here
+  }
+
+  addRating(rating) {
+    // add your code here
+  }
+
+  getAverageRating() {
+    // add your code here
+  }
+
   // ... Add yours :-) Look to IMDB for inspiration
 }
 
-Staff {
-  getName()
-  getRole()
-  getAge()
-  // ... Add yours :-) Look to IMDB for inspiration
+class StaffMember {
+  constructor(name, role, dateOfBirth) {
+    // add your code here
+  }
+
+  addMovie(movie) {
+    // add your code here
+  }
+
+  getName() {
+    // add your code here
+  }
+
+  getRole() {
+    // add your code here
+  }
+
+  getAge() {
+    // add your code here
+  }
 }
 
-// Initialize the objects
-// by pick your favorite movie from http://www.imdb.com/
-// and make sure that the following actions work.
-console.log(InstanceMovie.getStars().map(actor => `${actor.getName()} ${actor.getAge()}`));
-const director = InstanceMovie.getDirector();
+// Pick your favorite movie from http://www.imdb.com/
+
+const myMovie = new Movie(...);
+
+const firstActor = new StaffMember(...);
+myMovie.addStar(firstActor);
+// create and add more staff members
+
+// Make sure that the following actions work.
+console.log(myMovie.getStars().map(actor => `${actor.getName()} ${actor.getAge()}`));
+const director = myMovie.getDirector();
 console.log(`Director: ${director.map(director => `${director.getName()}`)}`);
-// Be creative with this let's see what you come up with :-)
 ```
 
-Fun extra step: If you get bored, template them and make a page by rendering the results in HTML :slightly_smiling_face:
-with something like `document.querySelector('.move').innerHTML = MovieHTML`
+Fun extra step: If you get bored, template them and make a page by rendering the results in HTML :smile: with something like `document.querySelector('.move').innerHTML = ...`
 
 ## Step 6: Read before next lecture
 
@@ -115,7 +163,7 @@ Remember the person with the most kata points gets a prize from Gijs (and you ca
 1. [Stacks/Queues](https://www.youtube.com/watch?v=wjI1WNcIntg) (5 mins)
 2. [JS Event Loops](https://www.youtube.com/watch?v=8aGhZQkoFbQ) (26 mins, watch this one twice or until you understand it)
 
->Create a new repository "hyf-javascript3". Also create a new folder "week1" inside this repository. 
+>Create a new repository "hyf-javascript3". Also create a new folder "week1" inside this repository.
 Upload your homework files inside the week1 folder and write a description for this “commit”.
 Your hyf-javascript3/week1 should now contain the files of your homework.
 Place the link to your repository folder in Trello.
diff --git a/fundamentals/this.md b/fundamentals/this.md
@@ -1,10 +1,8 @@
 # What is 'this'?
 
-At any point during the execution of a JavaScript program there is a context-dependent value that you can access through the keyword `this`. In many cases the value of `this` is `undefined` and as such not of significance for use in your own code.
+At any point during the execution of a JavaScript program there is a context-dependent value that you can access through the keyword `this`. Often, the value of `this` is simply `undefined` and therefore not of much significance for use in your own code.
 
-Note: The value of `this` is only useful if used inside a function.
-
-> When accessed outside of any function, the value of `this` is different depending on whether you run your program in the browser or in Node. In the case of the browser, the value of `this` refers to the global `window` object. In the case of Node, the value of `this` outside any function is an empty object (`{}`).
+> Note: The value of `this` is only useful if used inside a function. When accessed outside of any function, the value of `this` is different depending on whether you run your program in the browser or in Node. In the case of the browser, the value of `this` refers to the global `window` object. In the case of Node, the value of `this` outside any function is an empty object (`{}`).
 
 ## Regular functions and `this`
 
@@ -20,7 +18,7 @@ function whatIsThis(arg) {
 whatIsThis('Hello'); // --> Hello undefined
 ```
 
-As mentioned, the value of `this` in this case is `undefined`. Note however that this is only the case if we start our file with the string literal `'use strict'`. In versions of JavaScript prior to ES5 the `'use strict'` option did not exist. If you leave out `'use strict'` then `this` refers to the 'global context' (in the browser this is the `window` object, in Node it is the `global` object).
+As mentioned, the value of `this` in this case is `undefined`. Note however that this is only the case if we start our file with the string literal `'use strict'`. (In versions of JavaScript prior to ES5 the `'use strict'` option did not exist.) If you leave out `'use strict'` then `this` refers to the 'global context' (in the browser this is the `window` object, in Node it is the `global` object).
 
 In the example below you can see the effect (the shown output is for the browser).
 
@@ -35,13 +33,13 @@ whatIsThis('Hello'); // --> Hello
                      //     ▶︎ Window {postMessage: f, ...}
 ```
 
-Accessing the global context through `this` (accidentally on or on purpose) is never a good idea, especially when it comes to forgetting to declare a variable. The designers of JavaScript recognised this as an issue and provided the `'use strict'` option in ES5 to remedy the issue.
+Accessing the global context through `this` (accidentally or on purpose) is never a good idea, especially when it comes to forgetting to declare a variable. The designers of JavaScript recognised this as an issue and provided the `'use strict'` option in ES5 as a remedy.
 
 More info on MDN: [Strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
 
 ## Function invocation through the `call` method
 
-When you call a regular function by specifying its name followed by zero or more arguments enclosed within parentheses, the JavaScript engine actually invokes the `call` method that exists on every function (yes, functions are actually a special type of JavaScript objects). The code snippet show how a regular function is invoked behind the scenes by the JavaScript engine, setting the `this` value (the first argument of the `call` method) to `undefined`.
+When you call a regular function by specifying its name followed by zero or more arguments enclosed within parentheses, the JavaScript engine in fact invokes the `call` method that exists on every function (yes, a function is actually a special type of JavaScript object). The code snippet below shows how a regular function is invoked behind the scenes by the JavaScript engine, setting the `this` value (the first argument of the `call` method) to `undefined`.
 
 ```js
 'use strict';
@@ -53,7 +51,7 @@ function whatIsThis(arg) {
 whatIsThis.call(undefined, 'Hello'); // --> Hello undefined
 ```
 
-We can use the `call` method ourselves and pass something else in place of `undefined`, as show in the next snippet:
+We can use the `call` method ourselves and pass something else in place of `undefined`, as shown in the next snippet:
 
 ```js
 whatIsThis.call('world!', 'Hello'); // --> Hello world!
@@ -70,9 +68,9 @@ More info on `this` and JavaScript function properties and methods:
 
 ## JavaScript objects and 'this'
 
-When used in conjunction with JavaScript object methods (including those from ES6 classes) the `this` keyword gets overriding importance.
+When used in conjunction with JavaScript methods (including those from ES6 classes) the `this` keyword gets overriding importance.
 
-**What is a method?** A method is a regular JavaScript function that is 'called on' an object, using dot notation. In almost all cases this function will be defined as a property of the object (or it's prototype) it is called upon. In ES6 classes, methods are directly defined as member functions on the class.
+> **What is a method?** A method is a regular JavaScript function that is 'called on' an object, using dot notation. In almost all cases this function will be defined as a property of the object (or it's prototype) it is called upon. In ES6 classes, methods are directly defined as member functions on the class.
 
 The example below shows a simple object with a data property `myData` and a method property `myMethod`. When `myMethod` is called using dot notation such as shown in the example below, the `this` value inside the method is set to the object itself. Hence, `myMethod` has access to the `myData` property through the `this` keyword.
 
@@ -89,9 +87,9 @@ myObj.myMethod(); // --> Hello world!
 
 ## Function.prototype.bind
 
-There is yet another way to set the `this` value, this time fixing it's value. This can be done through the `bind` method that is avaiable on every function (although it has no effect on fat arrow functions).
+There is yet another way to set the `this` value. This can be done through the `bind` method that is avaiable on every function (although it has no effect on fat arrow functions).
 
-To just fix the value of `this` you call the `bind` method with a single parameter, passing the value to be assigned to `this`. (The `bind` method accepts additional parameters, but their use is beyond the scope of this article. See the reference below for more information).
+To set the value of `this` you call the `bind` method with a single parameter, passing the value to be assigned to `this`. (The `bind` method accepts additional parameters, but their use is beyond the scope of this article. See the reference below for more information).
 
 The `bind` method returns a new function for which the `this` value is fixed to the value specified in the `bind` parameter, as shown below.
 
@@ -136,6 +134,47 @@ class MyClass {
   }
 }
 
+const myClass = new MyClass();
+myClass.sayDelayed();
+```
+
+Nevertheless, there are ways to use regular functions in this scenario as was the common case before fat arrow functions were introduced in ES6. One way is to use `bind` as in this example:
+
+```js
+class MyClass {
+
+  constructor() {
+    this.myData = 'Hello world'
+  }
+
+  sayDelayed() {
+    setTimeout(function () {
+      console.log(this.myData);
+    }.bind(this), 1000);
+  }
+}
+
+const myClass = new MyClass();
+myClass.sayDelayed();
+```
+
+Another way is to introduce an intermediate variable, often named `self` or `that`, in a closure:
+
+```js
+class MyClass {
+
+  constructor() {
+    this.myData = 'Hello world'
+  }
+
+  sayDelayed() {
+    const self = this;
+    setTimeout(function () {
+      console.log(self.myData);
+    }, 1000);
+  }
+}
+
 const myClass = new MyClass();
 myClass.sayDelayed();
 ```
