finished makeme w2, added test

Noer Paanakker · Noer Paanakker · commit fe44811a8ac4 · 2019-09-04T23:22:24.000+02:00
diff --git a/README.md b/README.md
@@ -39,12 +39,7 @@ If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯
 | 1.   | Document-Object Model (DOM), DOM manipulation                        | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) |
 | 2.   | Synchronous vs. asynchronous, Event Loop, Callbacks, Array Functions | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | [Lesson Plan W2](/Week1/LESSONPLAN.md) |
 | 3.   | Scope, Hoisting, Closures, Thinking like a programmer II             | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | [Lesson Plan W3](/Week1/LESSONPLAN.md) |
-
-## Test
-
-At the end of this module you'll be doing a formative test. It will be done on **paper** and will consist of **4 exercises** that will test your JavaScript1 and JavaScript2 knowledge.
-
-Why on paper? Fundamental understanding should become intuitive. Only after having learned and mastered a concept deeply will you be able to use it creatively. If you rely too much on others, on Google or your code editor to do your thinking you'll make it very hard to cultivate the habit to think for yourself.
+| 4.   | Test                                                                 | [Details](/test/README.md)     | -                               | -                                      |
 
 ## Finished?
 
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
@@ -38,7 +38,9 @@ console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console
 
 The `doubleEvenNumbers` function returns only the even numbers in the array `myNumbers` and doubles them. Like you've learned in the [README](README.md), this block of code isn't easy to decipher.
 
-Let's rewrite it. Using the `map` and `filter` functions, rewrite the `doubleEvenNumbers` function.
+Let's rewrite it.
+
+- Using the `map` and `filter` functions, rewrite the `doubleEvenNumbers` function.
 
 **Exercise 2: What's your Monday worth?**
 
@@ -65,23 +67,65 @@ const mondayTasks = [
 ];
 ```
 
-Write a program that computes how much Maartje has earned by completing these tasks, using `map` and `filter`.
+Let's assume your hourly rate is €25. How much would you earn on that day?
 
-For the 'summing part' you can try your luck with `reduce`; alternatively, you may use `forEach` or a `for` loop.
+- Write a program that computes that:
+- 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`.
+- Make sure the program can be used on any array of objects that contain a `duration` property with a number value
 
-Follow these steps. Each step should build on the result of the previous step.
+**Exercise 3: Lemon allergy**
 
-- Map the tasks to durations in hours.
-- Filter out everything that took less than two hours (i.e., remove from the collection)
-- Multiply the each duration by a per-hour rate for billing (use €20/hour) and sum it all up.
-- Output a formatted Euro amount, rounded to Euro cents, e.g: `€11.34`.
-- Choose variable and parameters names that most accurately describe their contents or purpose. When naming an array, use a plural form, e.g. `durations`. For a single item, use a singular form, e.g. `duration`.
+Your mom bought you a basket of fruit, because you're doing so well in HackYourFuture. How sweet of her!
+
+```js
+const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon'];
+```
+
+However, she forgot that you are allergic to lemons! Let's quickly dispose of them before you get an attack.
+
+- Write a function
+- Use the `filter` array function to take out the lemons
+- Output a string that says: "My mom bought me a fruit basket, containing [array of fruits] !"
 
-**Exercise 3**
+**Exercise 4: Collective age**
 
-**Exercise 4**
+Have you ever wondered how old the HackYourFuture team members are? Or better yet: what the collective age is? Let's find out!
+
+```js
+const hackYourFutureMembers = [
+  { name: 'Wouter', age: 33 },
+  { name: 'Federico', age: 32 },
+  { name: 'Noer', age: 27 },
+  { name: 'Tjebbe', age: 22 },
+];
+```
+
+- Write a program that calculates the combined age of every member
+- Make use of the `map` function to get the ages
+- It should contain a function that takes a callback
+- The callback adds all the ages together and returns the number
+- The main function should log the string "The collective age of the HYF team is: [number]" to the console, and afterwards return the number
+
+**Exercise 5: My favorite hobbies**
+
+I've got a couple of hobbies that I want to showcase in a webpage.
+
+```js
+const myHobbies = [
+  'Meditation',
+  'Reading',
+  'Programming',
+  'Hanging out with friends',
+  'Going to the gym',
+];
+```
 
-**Exercise 5 **
+- Write a program that outputs each of these inside an HTML file
+- Create an HTML and JavaScript file, link them together
+- Use the `map` and/or `forEach` function to put each hobby into a <li>
+- Output the list items in an unordered list
 
 ## **3. Code along**
 
diff --git a/Week2/README.md b/Week2/README.md
@@ -7,7 +7,6 @@ These are the topics for week 2:
 1. Synchronous vs. asynchronous
    - Synchronous
    - Asynchronous
-   - Why do we need asynchronicity?
 2. Introducing asynchronicity using callbacks
    - Higher order functions
    - Functions as arguments to other functions
@@ -36,39 +35,52 @@ As you can see, each action is executed in a synchronous manner. This is to say:
 
 ### Asynchronous
 
-Sometimes we want to do multiple things at the same time, without each action to be dependent on each other. Consider the following scenario:
+Sometimes we want to do multiple things at the same time, without each action to be dependent on each other. Asynchronous execution avoids this bottleneck. You are essentially saying, “I know this function call is going to take a great deal of time, but my program doesn’t want to wait around while it executes.” Consider the following scenario:
 
 > Wouter is feeling hungry, so he decides to go to a restaurant. He arrives there and gets into the line to order food. After ordering he takes a seat and, while he waits, reads a book. Occassionally he looks around and sees different things happening: new people enter the restaurant, some people get their food served and others are just talking. After a short while Wouter's food arrives and it's time to dig in!
 
 In this example Wouter reads a book, but that doesn't affect his meal from being prepared. While his meal is prepared there are other people walking around, eating or just talking with each other. In short: multiple things are happening simultaneously and every event is not dependent upon another.
 
-This does not happen by default in JavaScript, and needs to be invoked. A way to do that is by using `callbacks`, which you'll be learning about later.
+This does not happen by default in JavaScript, and needs to be invoked. A way to do that is by using `callbacks`, which you'll be learning about in the next section.
 
-## Why do we need asynchronicity?
+## 2. Introducing asynchronicity using callbacks
 
-In programming
+Before we dive into what a `callback` is we have to understand a little about `higher order functions`.
 
-This method of execution can have undesirable consequences. Suppose a function is called to start a time consuming process. What if you want to stop the lengthy process? With synchronous execution, your program is “stuck,” waiting for the process to end, with no way out.
+### Higher order functions
 
-Asynchronous execution avoids this bottleneck. You are essentially saying, “I know this function call is going to take a great deal of time, but my program doesn’t want to wait around while it executes.”
+Let's start with a simple, practical definition: a higher order function is any function that can take another function as an argument or returns a function.
 
-## 2. Introducing asynchronicity using callbacks
+```js
+// Example 1
+function higherOrderFunction(anotherFunction) {
+  anotherFunction();
+  return;
+}
 
-In this example there is one process: life. In technical terms you could call it the program. Life contains many things, but in this example it only contains two things: you and your friend. Let's call them mini programs, or `functions`. The function called "You" does various things: studying, taking a break and having a snack.
+// Example 2
+function anotherHigherOrderFunction() {
+  return function() {
+    return;
+  };
+}
+```
 
-This example illustrates the concept of **asynchronicity**: there are multiple processes happening simultaneously, without any single thing being dependent upon another. Your friend is not waiting by the phone until you have the answer. Or in technical terms: until the callback (which is you) has the return value (the asnwer to your friend's request to hang out).
+Why do we need them? A higher order function integrates multiple functions, which each have a singular operational purpose. This will allow us to reuse code much more than if we had to write everything out.
 
-### Higher order functions
+> Higher order functions are a core concept within a programming paradigm called "functional programming". It's not relevant at all for you to know or care about this, but it's important to be exposed to it.
 
 ### Functions as arguments to other functions
 
 Imagine the following situation:
 
 > It's 15.00 and you're studying at home for an exam on the next day. Suddenly, your phone rings. You pick up and find it's your best friend! They ask if you'd like to hang out later. What do you do? On the one hand, you'd love to hang out have fun. On the other hand, you really should study some more. You don't know so you tell your friend that you're going to _call back_ later with your answer. You end the conversation and go back to studying. Maybe you take a break or have a snack as well. On the other line your friend hangs up the phone and continues along with their day: they go out grocery shopping, cleaning the house and cooking dinner. After finishing your studies you call your friend and makes plans to go out together.
 
-**This is why callbacks are important: it allows us to introduce asynchronicity in the control flow of a program.**
+This example illustrates the concept of **asynchronicity**: there are multiple processes happening simultaneously, without any single thing being dependent upon another. Your friend is not waiting by the phone until you have the answer. Or in technical terms: until the callback (which is you) has the return value (the answer to your friend's request to hang out).
 
-A concrete example for why this might be useful is when you want to [TBC!!!]
+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:
 
@@ -85,11 +97,9 @@ There are different ways of dealing with arrays. The most common way is by using
 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)
 2. The second disadvantage is that a loop isn't descriptive about what it intends to do. If another developer reads that code it wouldn't be obvious what it would do, without spending time on it to decipher it
 
-There are certain functions, `array functions`, that aim to solve these two problems simultaneously.
-
-Let's take an array function as an example: the `map()` function. It takes a function as an argument, and executes that unto each index position of the array, returning at the end a new array with all the "mapped" values.
+There are certain functions, `array functions`, that aim to solve these two problems simultaneously. Array functions are higher order functions, because they take a function as an argument.
 
-> Array functions are in general higher order functions, meaning they're functions that take a function as an argument.
+Let's take an example: the `map()` function. It takes a function as an argument, and executes that unto each index position of the array, returning at the end a new array with all the "mapped" values.
 
 Take a look at the following code snippet to see it in action:
 
@@ -141,7 +151,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
+4. Callback Queue. This is the "waiting line" [ajksdbjkasbdjkasbnjkdbajksbdkj]
 
 To see it in action check out the following resources:
 
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
@@ -5,13 +5,13 @@
 1. Practice the concepts
 2. JavaScript exercises
 3. Code along
-4. PROJECT:
+4. PROJECT: The Tip Calculator
 
 ## **1. Practice the concepts**
 
 Let's get familiar with basic Javascript concepts, with interactive exercises! Check out the following resources:
 
-- [Introduction to JavaScript: Scope (Codecademy)](https://www.codecademy.com/courses/introduction-to-javascript/lessons/scope/exercises/scope)
+- [Introduction to JavaScript: Scope](https://www.codecademy.com/courses/introduction-to-javascript/lessons/scope/exercises/scope)
 
 ## **2. JavaScript exercises**
 
diff --git a/Week3/README.md b/Week3/README.md
@@ -12,11 +12,13 @@ These are the topics for week 3:
    - When does it happen
    - Why do we need to know it?
 3. Closures
+   - Execution context
+   - Defining a function within a function
 4. Thinking like a programmer II
 
 ## 1. Scope
 
-On of the central concepts in programming is the idea of `context`: the meaning of any particular thing is only determined in relation to its direct surroundings. Let's take language for example. If I say the following sentence:
+One of the central concepts in programming is the idea of `context`: the meaning of any particular thing is only determined in relation to its direct surroundings. Let's take language for example. If I say the following sentence:
 
 > I never said she stole my money.
 
@@ -32,30 +34,37 @@ Reading this it's not obvious how to interpret what the situation is about. Depe
 
 It depends on `context` for me to know what really happened.
 
-Let's draw the line to programming. Within any program there is a lot happening. But not everything is related to each other; some functions don't depend on other functions or variables
+Let's draw the line to programming. Simply put, just like context gives meaning to a word, `scope` gives meaning to a variable/object.
 
-`scope` has to do with "where we can access variables from"
+The meaning is defined by whether or not the variable is accessible or not. If the variable is not within the scope
 
 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
+
 - [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
 
-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.
+> 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.
 
-In JavaScript we define them using the keyword `var`:
+In JavaScript we used to define variables using the keyword `var`:
 
 ```js
-var
-
+var myName = 'Mohammed';
 ```
 
+However
+
+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!)
+
+- [How let and const are scoped in JavaScript](https://wesbos.com/javascript-scoping/)
+
 ## 2. Hoisting
 
 If you look up the term "hoisting" in any dictionary, you'll find something like this:
@@ -82,6 +91,14 @@ Hoisting happens during `compile-time`.
 
 Simply put, a closure is a function that is defined inside another function.
 
+### Execution context
+
+In your programming journey you'll learn that many concepts overlap one another.
+
+An execution context is
+
+### Defining a function within a function
+
 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)
diff --git a/test/README.md b/test/README.md
@@ -0,0 +1,47 @@
+# JavaScript1 and JavaScript2 Test
+
+At the end of this module you’ll be doing a comprehension test on paper. Why on paper? Fundamental understanding should become intuitive. Only after having learned and mastered a concept deeply will you be able to use it creatively. If you rely too much on others, on Google or your code editor to do your thinking you'll make it very hard to cultivate the habit to think for yourself.
+
+### Concepts
+
+It will be about the most important JavaScript concepts you’ve learned about so far (JavaScript1 and JavaScript2). Here’s a list of all of them:
+
+- Variables (const and let)
+- Data types (strings, numbers, arrays, objects, booleans)
+- Conditional statements (if/switch statement)
+- Loops
+- Regular and arrow functions
+- How to use JavaScript to do basic DOM manipulations (add, modify and remove DOM elements)
+- Code commenting
+- Scope
+- Array functions (map and filter)
+- Callbacks
+- Hoisting
+
+### Purpose of the test
+
+The purpose of this exam is to test your comprehension of JavaScript1 and JavaScript2 concepts.
+
+- The goal for us is to know how solid your knowledge is and if you need any extra assistance throughout the program.
+- The goal for you is to test how well enough you master the material so far.
+
+Therefore, **you won’t be graded**. Like the homework you will get feedback and are expected to improve upon your weak points.
+
+### Preparation
+
+Here's general advice on how to optimally prepare:
+
+- Make a list of every concept you currently don’t understand at all.
+- Find out 2 things about each concept: (1) how does the basic structure look and (2) what is the most common use case.
+- Ask questions through Slack to your teachers and/or your classmates
+- Practice coding WITHOUT Google.
+- Practice for understanding (why something is the case), NOT just for repetition’s sake (and hoping ‘you will understand it one day’).
+- Stay calm, always
+
+### Practical information
+
+- The test will last about an hour
+- It will be done on paper so please **bring a pencil and eraser**.
+- There will be 4 questions, 2 for each module
+
+Tip: if any of you need additional support, now is the moment to let us know as we can pair you up with someone to answer any questions you may have up until this point.
