finished reading week 2/3

Noer Paanakker · Noer Paanakker · commit e215721f761a · 2019-09-05T15:22:33.000+02:00
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
@@ -9,15 +9,15 @@
 
 ## **1. Practice the concepts**
 
-Before we head into the exercises, it might be nice to do some interactive exercises first! In the following resource you'll find some exercises that'll teach you the basics of the interaction between JavaScript and the DOM
+Before we head into the exercises, it might be nice to do some interactive exercises first! In the following resource you'll find some exercises that'll teach you the basics of the interaction between JavaScript and the DOM:
 
 - [Making webpages interactive](https://www.khanacademy.org/computing/computer-programming/html-css-js)
 
 ## **2. JavaScript exercises**
 
 > Inside of your `JavaScript2` fork, create a folder called `week1`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `bookList.js`.
 
-### 1. The book list
+**Exercise 1: The book list**
 
 I'd like to display my three favorite books inside a nice webpage!
 
@@ -42,7 +42,7 @@ const books = [
 4. Add an <img> to each book that links to a URL of the book cover.
 5. Change the style of the book depending on whether you have read it (green) or not (red).
 
-### 2. About me
+**Exercise 2: About me**
 
 Start with this HTML and save it as "about_me.html":
 
@@ -72,7 +72,7 @@ Start with this HTML and save it as "about_me.html":
 5. (In the HTML head) Add a style tag that sets a rule for .list-item to make the color red.
 6. Create a new img element and set its src attribute to a picture of you. Append that element to the page.
 
-### 3. The logo hijack
+**Exercise 3: The logo hijack**
 
 No homepage is safe from the logo bandit! Everytime he sees a Google Logo he replaces it with a logo from HackYourfuture instead: https://www.hackyourfuture.dk/static/logo-dark.svg.
 
@@ -82,7 +82,7 @@ In this exercise you're expected to write a JavaScript function that can be exec
 2. Find out how to select the element that contains the Google logo, and store it in a variable
 3. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead
 
-### 4. What's the time?
+**Exercise 4: What's the time?**
 
 Why wear a watch when you can check the time, live in your webpage?
 
@@ -91,7 +91,7 @@ Why wear a watch when you can check the time, live in your webpage?
 3. Inside the JS file, write a function that adds the current time to the webpage. Make sure it's written in the HH:MM:SS notation (hour, minute, second). Hint: use `setInterval()` to make sure the time stays current
 4. Have the function execute when it's loading in the browser
 
-### 5. The cat walk
+**Exercise 5: The cat walk**
 
 Start with this webpage, which has a single img tag of an animated GIF of a cat walking.
 
diff --git a/Week1/README.md b/Week1/README.md
@@ -92,10 +92,7 @@ The actual process of transforming HTML, CSS and JavaScript into a user-viewable
 
 ## 3. What is DOM Manipulation?
 
-**DOM manipulation** refers to the activity of selecting and modifying DOM elements. The main reason why this is done is that **you want to show the user different things depending their activity**, for example:
-
-- You click on a [hamburger menu icon](https://bit.ly/2Yr4O7Z) and a navigation menu slides in
-- You scroll down and the elements of
+**DOM manipulation** refers to the activity of selecting and modifying DOM elements. The main reason why this is done is that **you want to show the user different things depending their activity**, for example if you click on a [hamburger menu icon](https://bit.ly/2Yr4O7Z) and a navigation menu slides in.
 
 Finding the right elements is called **traversing the DOM**. Traversing the DOM essential means: using JavaScript to select certain elements within the DOM in order to modify them (change color, size or make them disappear, for example).
 
@@ -156,8 +153,8 @@ Test this code out by copying and pasting it in the Developer Console of your br
 This is DOM manipulation in its simplest form. It goes in three essential steps:
 
 (1) An event happens ("User clicks on the page")
-(2) JavaScript is aware and looks for this specific user action (The browser is listening for the event*), in this case a `click` event)
-(3) JavaScript modifies the DOM as a result (\_A function that makes the body background color black is executed*)
+(2) JavaScript is aware and looks for this specific user action (The browser is listening for the event, in this case a `click` event)
+(3) JavaScript modifies the DOM as a result (A function that makes the body background color black is executed)
 
 The second step is called **listening for the event**. We do this by using a by the browser predefined function called `addEventListener()`, which we get from the `document` object in the browser. The browser needs to listen to the event in order to know what it should do ("make the body background color black") in case a certain event (`click`) happens to a certain element (`body`).
 
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
@@ -69,7 +69,7 @@ const mondayTasks = [
 
 Let's assume your hourly rate is €25. How much would you earn on that day?
 
-- Write a program that computes that:
+- Write a program that finds out what your hourly rate on a Monday would be
 - Use the `map` array function to take out the duration time for each task.
 - Multiply each duration by a per-hour rate for billing and sum it all up.
 - Output a formatted Euro amount, rounded to Euro cents, e.g: `€11.34`.
diff --git a/Week2/README.md b/Week2/README.md
@@ -80,8 +80,6 @@ This example illustrates the concept of **asynchronicity**: there are multiple p
 
 This is the utility of `callbacks`: they allow us to introduce asynchronicity into the control flow of an application.
 
-Let's put this into the context of a webpage.
-
 Study the following resources to learn more about the importance of callbacks:
 
 - [Asynchronous JavaScript](https://www.youtube.com/watch?v=YxWMxJONp7E)
@@ -90,8 +88,6 @@ Study the following resources to learn more about the importance of callbacks:
 
 ## 3. Array Functions
 
-In programming we're always trying to make things easier on ourselves.
-
 There are different ways of dealing with arrays. The most common way is by using a loop and then writing custom logic inside it in order to manipulate the values. This solution works, but it comes at several disadvantages.
 
 1. The first disadvantage is that using loops requires us to write custom logic for each use case. This can lead to repeated code, which we always want to [avoid](https://www.youtube.com/watch?v=IGH4-ZhfVDk)
@@ -151,7 +147,7 @@ In simple terms, the `Event Loop` is a mechanism that operates in the browser. I
 1. Heap. This is where the browser assigns space in memory to each process
 2. Call Stack. This is the amount of JavaScript commands (read: function calls and events) that need to be executed
 3. Web APIs. These are objects (like the document) and functions (like XMLHttpRequest) that can be used within the JavaScript commands found in the Call Stack
-4. Callback Queue. This is the "waiting line" [ajksdbjkasbdjkasbnjkdbajksbdkj]
+4. Callback Queue. This is the "waiting line" for asynchronous function calls
 
 To see it in action check out the following resources:
 
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
@@ -56,9 +56,10 @@ letters === ['a', 'b', 'c', 'd', 'e', 'f'];
 
 **Exercise 3: Guess the output**
 
-In this exercise you'll be presented with 2 code snippets. Your task is to guess the output and write out your reasoning, for each single one, in 50 words or less.
+In this exercise you'll be presented with a code snippet. Your task is to guess the output and write out your reasoning in 50 words or less.
 
 ```js
+// Snippet
 let a = 10;
 const x = (function() {
   a = 12;
@@ -70,7 +71,12 @@ const x = (function() {
 x();
 ```
 
+**Exercise 4: Guess more**
+
+In this exercise you'll be presented with another code snippet. Guess the output and write out your reasoning in 50 words or less.
+
 ```js
+// Snippet
 const x = 9;
 function f1(val) {
   val = val + 1;
@@ -88,25 +94,6 @@ f2(y);
 console.log(y);
 ```
 
-**Exercise 4: Make the sandwich**
-
-Mrs Potts the school dinner lady is tired of all the global sandwich variables getting under her feet and tripping her up all the time. She needs help cleaning her kitchen. Will you help her?
-
-She would like it very much if you would build a sandwich machine for her, but wrap it in a closure so as to keep everything neat.
-
-1. Create a self executing function
-2. Within the closure, create three little functions to add the bread, spread the butter and add the jam. These little methods should use console.log to write a string representing their action to the DOM, e.g. "Now spreading the jam!"
-3. Assign makeSandwich to the global window object, thus smuggling it out of the closure.
-4. Call makeSandwich from outside the closure
-
-It should log to the console the following message:
-
-```markdown
-Adding bread
-Now spreading the butter
-Spreading jam
-```
-
 **Exercise 5: The lottery machine**
 
 Don't you just love the thrill of the lottery? What if I told you we can make our own lottery machine? Let's get started!
@@ -126,6 +113,8 @@ The function should call the second callback if the array value is divisible by
 
 Both functions should be called if the array value is divisible by both 3 and 5.
 
+Here is a starter template:
+
 ```js
 function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) {
   const numbers = [];
diff --git a/Week3/README.md b/Week3/README.md
@@ -8,12 +8,10 @@ These are the topics for week 3:
    - Global vs. local (function and block)
    - Const and let
 2. Hoisting
-   - What is it
-   - When does it happen
-   - Why do we need to know it?
+   - When does hoisting happen?
 3. Closures
    - Execution context
-   - Defining a function within a function
+   - Why do we need closures?
 4. Thinking like a programmer II
 
 ## 1. Scope
@@ -36,34 +34,69 @@ It depends on `context` for me to know what really happened.
 
 Let's draw the line to programming. Simply put, just like context gives meaning to a word, `scope` gives meaning to a variable/object.
 
-The meaning is defined by whether or not the variable is accessible or not. If the variable is not within the scope
+That meaning is defined by whether or not the variable is accessible. If the variable is not within the "scope" (you could also call it "reach") of any given code block, it can't access it.
 
 For further research, check out the following:
 
 - [Variable Scope & Context](https://www.youtube.com/watch?v=WPcW83BMT3Y)
 
 ### Global vs. local (function and block)
 
-In any given application, there is usually one global scope. But there can be many local scopes
+Scope can be divided into two basic types: global and local scope. In any given application, there is one global scope. But there can be many local scopes. Any variable declared outside of a function belongs to the global scope and is therefore accessible from anywhere in the code. Variables declared within a local scope are only accessible within that scope.
 
-- [Understanding Scope in JavaScript](https://www.youtube.com/watch?v=SBjf9-WpLac)
-- [Everything you wanted to know about JavaScript scope](https://ultimatecourses.com/blog/everything-you-wanted-to-know-about-javascript-scope)
+Local scope can be further divided into two categories: function and block. Let's look at **function scope** first.
 
-### Const and let
+A unique local scope gets created whenever a function is declared. The variables declared within will only be accessible within that scope, nowhere else. This makes it possible to declare variables within the same name in each different local scope. This also means that it's not possible to refer to a variable declared in one local scope, within another local scope.
 
-> Quick refresher: Variables are used to store information to be referenced and manipulated in a computer program. They also provide a way of labeling data with a descriptive name, so our programs can be understood more clearly by the reader and ourselves. It is helpful to think of variables as containers that hold information. Their sole purpose is to label and store data in memory. This data can then be used throughout your program.
+```js
+function createLocalScope() {
+  const localVariable = 'this variable can only be accessed within this function';
+  console.log(localVariable);
+
+  const localOnlyHere = 'This variable can only be accessed here, nowhere else';
+}
+
+function createAnotherLocalScope() {
+  const localVariable =
+    "Even though this variable has the same name, it has nothing to do with the other localVariable, because it doesn't exist outside of that function";
+  console.log(localVariable);
+  console.log(localOnlyHere);
+}
+
+createLocalScope();
+createAnotherLocalScope();
+```
 
-In JavaScript we used to define variables using the keyword `var`:
+However, variables declared within the global scope can be accessed anywhere! Actually, that's the very purpose of global scope. In the context of functions this means that you don't have to pass it as an argument, but that you can directly refer to it within the function.
 
 ```js
-var myName = 'Mohammed';
+const globalVariable = 'This variable can be accessed wherever in the code';
+
+function accessGlobalVariable() {
+  console.log(globalVariable);
+}
+console.log(globalVariable);
+accessGlobalVariable();
 ```
 
-However
+The second type of local scope is called **block scope**. A block, generally speaking, is any code wrapped within `{ }`. This includes conditional statements (`if` and `switch`) and loops (`for`, `while` and `do/while`).
+
+Go through the following resources to learn more about `scope`:
+
+- [JavaScript: Introduction to Scope (function scope, block scope)](https://dev.to/sandy8111112004/javascript-introduction-to-scope-function-scope-block-scope-d11)
+- [Understanding Scope in JavaScript](https://www.youtube.com/watch?v=SBjf9-WpLac)
+- [Everything you wanted to know about JavaScript scope](https://ultimatecourses.com/blog/everything-you-wanted-to-know-about-javascript-scope)
+
+### Const and let
 
-In programming, we generally want to keep things as simple as they can be. We even have a name for that: [KISS](https://thevaluable.dev/kiss-principle-explained/) (Keep it Simple, Stupid!)
+As mentioned in the previous module, we prefer to declare variables using `const` and `let`. This is because the keywords are more descriptive and restrictive. This makes them easier to work with.
+
+In relation to scope both also behave differently: they are block scoped. This means that they can be accessed from outside a `{ }`.
+
+Go through the following resources to learn more about this:
 
 - [How let and const are scoped in JavaScript](https://wesbos.com/javascript-scoping/)
+- [Should you truly never use var?](https://dev.to/johnwolfe820/should-you-never-truly-use-var-bdi)
 
 ## 2. Hoisting
 
@@ -73,45 +106,62 @@ If you look up the term "hoisting" in any dictionary, you'll find something like
 
 A simple example of hoisting is the hoisting of a flag on a pole. You pull on the rope and slowly but surely the flag gets raised up.
 
-### What is it
+In JavaScript, hoisting refers to the mechanism of the browser's JavaScript compiler to bring every function and variable declaration to the top of their `scope`, before it starts executing anything. This can be either global or local scope, depending on where it is defined.
 
-In JavaScript, hoisting refers to
+However, this does NOT mean that the actual value given to the variable or function will also be hoisted. It's just the declaration: that there are variables/functions that exist with that name.
 
-### When does it happen
+### When does hoisting happen?
 
-### Why do we need to know it?
+Hoisting happens during `compile-time`.
 
 When you execute your JavaScript code, the interpreter goes through the code twice. The first time is called the `compile-time`, which is when your code is made ready to be executed: there will be safety checks, small optimizations and making sure the syntax is written correctly.
 
 The second time is called `run-time`, which is where it actually executes your code by going through it line by line, doing the assignments, calling the functions, etc.
 
-Hoisting happens during `compile-time`.
+For more research, check out the following:
+
+- [What is Hoisting in JavaScript?](https://medium.com/javascript-in-plain-english/https-medium-com-javascript-in-plain-english-what-is-hoisting-in-javascript-a63c1b2267a1h)
 
 ## 3. Closures
 
-Simply put, a closure is a function that is defined inside another function.
+Simply put, a closure is a function that is defined inside another function. This special function has access to the outer scope (and thus its variables), the scope that's created by the function that contains the closure function.
+
+That's nice and all, but in order to really understand what it is and why we need it we need to take a look at another concept.
 
 ### Execution context
 
-In your programming journey you'll learn that many concepts overlap one another.
+The execution context roughly equates to the 'environment' a function executes in. This consists of the following:
+
+- The variable scopes
+- Function arguments
+- The value of the `this` object (more on that in JavaScript3)
+
+Checkout the following to learn more about why this is important:
+
+- [What is the Execution Context & Stack in JavaScript?](http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/)
+
+### Why do we need closures?
+
+Closures are commonly used to give objects data privacy. We don't want certain data to be available globally. Think of it as "keeping something a secret. Take, for example, the following situation:
 
-An execution context is
+> You want to log in to your email account, so you need a password. Usually you have that password in your head, or somewhere written down in a place that can only be accessed in a certain way. It's not out there in public, able to be accessed by anyone.
 
-### Defining a function within a function
+In this example your password is the data you want to keep locally scoped. Your act of logging in is the inner function. The outer function could be your act of being on the computer, where your password is stored in a file somewhere.
 
 For further study please check the following resources:
 
 - [The Ultimate Guide to Execution Contexts, Hoisting, Scoping and Closures in JavaScript](https://www.youtube.com/watch?v=Nt-qa_LlUH0)
 - [Understanding Closures](https://www.youtube.com/watch?v=rBBwrBRoOOY)
-- [Let's Learn JavaScript Closures](https://www.freecodecamp.org/news/lets-learn-javascript-closures-66feb44f6a44/)
+- [Master the JavaScript interview: what is a closure](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36)
+- [I never understood JavaScript closures](https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8)
 
 ## 4. Thinking like a programmer II
 
 Becoming a good developer doesn't mean being good at any particular programming language: as a matter of fact, the language doesn't matter much.
 
-There are only a handful of core concepts
+This is the secret behind being a good developer: if you understand the concept, structure and principles of what makes a software program work, it doesn't matter in what way (the syntax) it's written.
 
-This is the secret behind being a good developer: if you understand the concept, structure and principles of what makes a software program work, it doesn't matter in what way (syntax) it's written.
+This is also the reason why most developers, once they've mastered the fundamentals, are able to pick up another language quite easily. It's not because they have good memory; it's because they can recognize the patterns within the language.
 
 - [How To Think Like a Programmer](https://www.youtube.com/watch?v=azcrPFhaY9k)
 - [Computer Language Fundamentals: Five Core Concepts](https://blog.upperlinecode.com/computer-language-fundamentals-five-core-concepts-1aa43e929f40)
