Merge pull request HackYourFuture#31 from remarcmij/master

mkruijt · web-flow · commit 402134f45106 · 2018-01-25T15:02:11.000+01:00
additions to fundamentals
diff --git a/VSCodeTips/README.md b/VSCodeTips/README.md
@@ -1,12 +1,6 @@
 # VSCode Tips
 
-Although you are free to make you own choice of text/code editor to use during class and homework, we have good experiences with Microsoft's free Visual Studio Code (VSCode) editor.
-
-From the [VSCode web site](https://code.visualstudio.com/):
-
-> Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).
-
-Here are some tips for getting up to speed with VSCode as you progress through this course.
+Now that you're using VSCode here are some tips to use it effectively.
 
 ## Installation
 
diff --git a/fundamentals/DOM_manipulation.md b/fundamentals/DOM_manipulation.md
@@ -26,3 +26,17 @@ We can also create elements
 const a = document.createElement('li');
 x.appendChild(a);
 ```
+
+We can set attributes on elements
+ ```js
+ a.setAttribute('id', 'hackyourfuture');
+ ```
+
+ We can add event listeners to elements:
+
+ ```js
+ turnLeftButton.addEventListener('click', function () {
+    turn('left');
+});
+ ```
+
diff --git a/fundamentals/assets/scopes.png b/fundamentals/assets/scopes.png
diff --git a/fundamentals/conditional_execution.md b/fundamentals/conditional_execution.md
@@ -101,6 +101,19 @@ const conditionOfCar = age < 1 ? 'new' : 'used';
 
 The `conditionOfCar` variable will be assigned the string `'new'` if the `age < 1` condition holds true, otherwise it is assigned the string `'used'`.
 
+It is always possible to rewrite a ternary operator as an `if-then-else` statement, for example:
+
+```js
+let conditionOfCar;
+if (age < 1) {
+  conditionOfCar = 'new';
+} else {
+  conditionOfCar = 'used';
+}
+```
+
+Note that you can't use `const` here for `conditionOfCar` because we can't combine declaration and initialization in a single statement. Therefore we must now use `let`.
+
 It is **not** recommended to use the conditional operator if you do not intend to use its value:
 
 ```js
diff --git a/fundamentals/functions.md b/fundamentals/functions.md
@@ -1,6 +1,32 @@
 # Functions
 
-A function is a reusable piece of code (see _Why Use Functions_ below). Functions are *very* important in JavaScript, to the extent that some people call JavaScript a "function-oriented" language. As mentioned above, variables can be of type function. In fact, *every function is a variable*.
+Consider this **function** from [high-school math](https://www.mathplanet.com/education/algebra-2/how-to-graph-functions-and-linear-equations/functions-and-linear-equations):
+
+> 𝑓(x) = x + 7
+>
+> _if x = 2 then_
+>
+> 𝑓(2) = 2 + 7 = 9
+
+The value of the function 𝑓(x) is dependent on the value you supply for its argument x. (Instead of the term 'argument', sometimes the word 'parameter' is used). 
+
+Here is the equivalent JavaScript function:
+
+```js
+// function definition
+function f(x) {
+    return x + 7;
+}
+
+// call the function and log its value for x = 2
+console.log(f(2));  // -> 9
+```
+
+This function adds 7 to the value of its argument. Whenever we need to add 7 to some number we can reuse this same function over and over again.
+
+During execution, the value of x in the function body (the part between the curly braces) is substituted with the value 'passed' during the function call. 
+
+A function thus is a reusable piece of code (see _Why Use Functions_ below). Functions are *very* important in JavaScript, to the extent that some people call JavaScript a "function-oriented" language. As mentioned above, variables can be of type function. In fact, *every function is a variable*.
 
 The following two pieces of code have the exact same result:
 
diff --git a/fundamentals/map_filter.md b/fundamentals/map_filter.md
@@ -40,7 +40,7 @@ const squares = numbers.map(num => num * num);
 console.log(squares); // -> [9, 25, 4, 49]
 ```
 
-For illustrative purposes we can add a `console.log` statement to our mapping function and see what we get passed as second and third argument:
+For illustrative purposes we can add a `console.log`<sup>†</sup> statement to our mapping function and see what we get passed as second and third argument:
 
 ```js
 const numbers = [3, 5, 2, 7];
@@ -66,6 +66,8 @@ For each of the first four lines in the output (from the `console.log` inside th
 
 As is usual in JavaScript you do not necessarily have to use all the parameters that were passed to the `mapFn` function. In fact, in many cases you will only need the first argument (the current array element) as we saw in the first example.
 
+<sup>†</sup>You should normally not use `console.log` inside the function you pass to the `map` (or `filter`) method. These functions should also **not modify** any variables outside their own function scope, although they can reference these variables for read-only purposes. In computer science terms, these functions should be [pure with no 'side-effects'](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976).
+
 ## Array#filter()
 
 The **filter()** method returns a new array with all elements that pass the test implemented by a user-supplied (predicate\*) function.
diff --git a/fundamentals/naming_conventions.md b/fundamentals/naming_conventions.md
@@ -2,7 +2,7 @@
 
 ## Background
 
-In programming you will need to come up with appropriate names for your variables and functions.
+In programming you will need to come up with appropriate names for your variables, functions and function parameters.
 
 > _The most important consideration in naming a variable is that the name fully and accurately describes the entity the variable represents. An effective technique for coming up with a good name is to state in words what the variable represents. Often that statement itself is the best variable name. It’s easy to read because it doesn’t contain cryptic abbreviations, and it’s unambiguous. Because it’s a full description of the
 entity, it won’t be confused with something else. And it’s easy to remember because the name is similar to the concept._
@@ -86,6 +86,11 @@ class Movie {
 }
 ```
 
+## Reserved keywords
+
+Certain names are reserved by JavaScript for its own use. You cannot use the names for your variable. For example, you can't name a variable `if`. 
+
+For a complete list of reserved names, see the MDN page for [Keywords](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords). 
 
 
 
diff --git a/fundamentals/scope.md b/fundamentals/scope.md
@@ -9,46 +9,50 @@ Definition from [Dictionary.com](http://www.dictionary.com/browse/scope):
 
 If you imagine yourself as the computer that is executing your JavaScript code, you can think of scope as meaning:
 
-> what you can see from where your are
+> what you can see from where you are 
 
 In this case the 'things' that you are looking for are variables and functions. When we say, "What's in scope?", we mean "Which variables and functions can be accessed from the current point of execution in your code?" As it happens, in JavaScript there are three types of scope to consider.
 
 ## Global scope
 
-Variables and functions defined at global scope are visible from any point of execution in your code. Sometimes that's a good thing (or even essential), but more often it's bad. Let's dive right in.
+Variables and functions defined at global scope are visible from any point of execution in your code. Sometimes that's a good thing (or even essential), but in general you must avoid creating variables and functions in global scope unless you have specific reasons to do so.
+
+Consider the example below:
 
 ```js
-a = 10; // don't do this
+a = 'Hello'; // don't do this
 console.log(a);
 ```
 
-In this example we have assigned the value `10` to a variable that we forgot to declare (we forgot to use `let`, `const` or `var`). The JavaScript engine tries to be helpful and defines a variable `a` for us in **global** scope. More recently, the JavaScript community considered this friendliness to be a mistake and with ES5 introduced `strict` mode: place the string `'use strict';` at the top of your file.
+In this example we have assigned the value `'Hello'` to a variable that we forgot to declare (we forgot to use `let`, `const` or `var`). The JavaScript engine tries to be helpful and defines a variable `a` for us in **global** scope. More recently, the JavaScript community considered this friendliness to be a mistake and with ES5 introduced `strict` mode: place the string `'use strict';` at the top of your file. This now causes our code to fail with a run-time error when forgetting to 'declare' our variables.
 
 ```js
 'use strict';
-a = 10; // produces: ReferenceError: a is not defined
+a = 'Hello'; // produces: ReferenceError: a is not defined
 console.log(a);
 ```
 
 You can correct this by declaring your variable with `let`, `const` or `var`:
 
 ```js
 'use strict';
-let a = 10;
+var a = 'Hello';
 console.log(a);
 ```
 
-This still puts the variable `a` into the global scope. So why is global scope a problem? Because you cannot be sure that the variable names you choose do not conflict with names already present in global scope (global scope is a busy place). It is best to apply the principle of 'need to know'. Only expose your variables to other parts in the JavaScript ecosystem that need to know about them. This is where local scope and block scope come in.
+This still puts the variable `a` into the global scope. So why is global scope a problem? Because you cannot be sure that the variable names you choose do not conflict with names already present in global scope (global scope is a busy place).
+
+It is best to apply the principle of 'need to know'. Only expose your variables to other parts in the JavaScript ecosystem that need to know about them. This is where local scope and block scope come in.
 
 ## Local scope
 
-When you declare a function in JavaScript the function body represents a new, local scope, distinct from global scope. Variables defined in the function body are visible only inside that function: from the outside, you can't look in.
+When you declare a function in JavaScript the function body represents a new, local scope, distinct from global scope. Variables defined in the function body are visible in that function body only: from the outside, you can't look in.
 
 ```js
 'use strict';
 
 function myFunction() {
-  const a = 10;
+  const a = 'Hello';
   console.log(a);
 }
 
@@ -57,63 +61,108 @@ myFunction();
 // console.log(a); <= this would produce: ReferenceError: a is not defined
 ```
 
-But from the inside you can look out. In the example below the variable `b` is visible from inside the function body.
+But from the inside you can look out. In the example below the variable `a` is visible from inside the function body.
 
 ```js
 'use strict';
 
-const b = 'Hello';
+const a = 'Hello';
 
 function myFunction() {
-  const a = 10;
-  console.log(a);
-  console.log(b);
+  const b = ', world';
+  console.log(a + b);
 }
 
 myFunction();
 ```
 
-You might think that the variable `b` is in global scope. Actually, variables declared with either `let` or `const` have block scope, as will be discussed next. Note however that the function `myFunction` still resides in global scope. There is a way to even get `myFunction` out of global scope by using, what is called, an **IIFE**. See further down below.
+You might think that the variable `a` is in global scope. Actually, variables declared with either `let` or `const` have block scope, as will be discussed next. Note however that the function `myFunction` still resides in global scope. There is a way to  get `myFunction` out of the global scope by using, what is called, an **IIFE** to create a **local scope** (or, with ES6, by placing the function definition in a block to create a **block scope**). See further down below.
 
 ## Block scope
 
-The keywords `let` and `const` were introduced in ES6 as alternative to the older `var` keyword and we recommend that you use these newer keywords instead of `var`. They adhere to the rules for block scope, whereas `var` is completely oblivious of the concept.
+The keywords `let` and `const` were introduced in ES6 as alternatives to the existing `var` keyword. We recommend that you use these newer keywords instead of `var`. They adhere to the rules for **block scope**, whereas `var` is completely oblivious of the concept.
 
-A new block scope (sometimes called _lexical_ scope) is created whenever you create a block of code inside a pair of curly braces. Variables defined with `let` and `const` at the file level (i.e., not inside a function) are considered to be in a (file-level) block scope. That's why the variable `b` in the previous code snippet is not in global scope. Had we replaced `const b` with `var b` then variable `b` _would be_ in global scope.
+A new block scope (sometimes called _lexical_ scope) is created whenever you create a block of code inside a pair of curly braces. (Exception: the curly braces used to enclose the body of a function definition do not create a block scope. Instead, a **local scope** is created as discussed in the previous section.) 
 
-## Guidance
+Variables defined with `let` and `const` at the file level (i.e., not inside a function or a block) are considered to be in a file-level block scope ('script' scope). That's why the variable `a` in the previous code snippet is not in global scope. Had we replaced `const a` with `var a` then variable `a` _would be_ in global scope.
+
+## Scope Example
+
+In the figure below we show an example bringing all scope types together. The code fragment on the right-hand side is executed by means of a `<script>` tag in `index.html`. The scope hierarchy shows the state of the scopes at the execution point indicated by the red triangle.
+
+![Scopes](assets/scopes.png)
+
+Let's go through these scopes from the top down:
+
+- The `alert` function and the `document` object are placed in **global scope** by the browser at start-up (along with many other predefined 'system' variables). The `myFunction` function originates from our code snippet.
+- The next scope shown is a **block scope** at the file level (our file `app.js` loaded up with a `<script>` tag). Variables defined outside of a block or function in this file will be visible from any location within the file. This holds true for the variable `a`.
+- Next comes the **local scope** of the function `myFunction`. It contains the variables `b`, `h1` and `root`.
+- The most inner scope is the **block scope** exists within the `if` statement block only. This is the scope that holds the variable `c`.
+
+### Variable resolution
+
+Let's consider the statement below taken from the example code snippet and examine how the variable references `a`, `b` and `c` are resolved by 'walking the scope chain'.
+
+```js
+h1.innerHTML = a + b + c;
+```
 
-Following the principle of 'need to know', it is best to define variables at the point of need, i.e. just before you need to access these variables. This will either be in the same scope of the code where you access the variable, or, in case you need to access the variable from multiple places, the closest scope that is common to the points of need.
+Variable resolution proceeds by attempting to resolve a variable reference from the current scope (i.e., at the point of reference), through intermediate scopes and ultimately ending in global scope, in the direction of the arrows.
 
-Sometimes however, you cannot avoid global scope. This is for instance the case when you want to access the [DOM](https://developer.mozilla.org/en-US/docs/Glossary/DOM) in the browser. As you will learn, you can create an HTML element (e.g. an `h1` element) in JavaScript using this code:
+| Variable | Resolution |
+| -------- | ---------- |
+| `c`      | This variable is defined in the current (block) scope and is resolved immediately. |
+| `b`      | After failing to resolve this variable from the current (block) scope, JavaScript walks up the scope chain and finds its definition in the local (function) scope. |
+| `a` | To resolve this variable the JavaScript engine must hop up to the block scope at the file level. |
+
+For the statement below, taken again from the code snippet in the picture, the JavaScript engine must walk the scope chain starting from the local (function) scope up to the global scope to find the definition of `document`.
 
 ```js
-const h1 = document.createElement('h1');
+const root = document.getElementById('root')
 ```
 
-The `document` object resides in global scope, conveniently provided there by the browser for access by any piece of JavaScript that needs to manipulate the DOM.
+## Guidance
+
+Following the principle of 'need to know', it is best to define variables at the point of need, i.e. just before you need to have access to these variables. This will either be in the same scope of the code where you access the variable, or, in case you need to access the variable from multiple places, the nearest scope that is common to the points of need.
 
-## IFFE
+## IIFE
 
-We were left with the issue that functions defined at the file level still end up in global scope. The traditional method of solving this in JavaScript is to use an Immediately Invoked Function Expression (IIFE). We present it here for info. When you build web applications with modern tools such as React and Node, you do not need to use IFFEs.
+We were left with the issue that functions defined at the file level still end up in global scope. The traditional method of solving this in JavaScript is to use an Immediately Invoked Function Expression (IIFE). We present it here for info. When you build web applications with modern tools such as React and Node, you do not need to use IIFEs.
 
-To use an IFFE you must wrap all of your JavaScript code in a function body of an anonymous function (i.e., a function with no name) and immediately call that function (as indicated by the empty set of parentheses on the last line). This creates a local scope for your code. Now even the `myFunction` function is in local scope.
+To use an IIFE you must wrap all of your JavaScript code in a function body of an anonymous function (i.e., a function with no name) and immediately call that function (as indicated by the empty set of parentheses on the last line). This creates a local scope for your code. Now even the `myFunction` function is in local scope.
 
 ```js
 (function () {
   'use strict';
 
-  const b = 'Hello';
+  const a = 'Hello';
 
   function myFunction() {
-    const a = 10;
-    console.log(a);
-    console.log(b);
+    const b = ', world!';
+    console.log(a + b);
   }
 
   myFunction();
 })();
 ```
 
-More info on MDN: [IFFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)
+More info on MDN: [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)
+
+## IIFE alternative (ES6)
+
+In ES6 you can replace the IIFE by a simple block, like this, to achieve the same effect.
+
+```js
+{
+  'use strict';
+
+   const a = 'Hello';
 
+  function myFunction() {
+    const b = ', world!';
+    console.log(a + b);
+  }
+
+  myFunction();
+};
+```
