From 71ea72e38991d9a3648eb2898251e87e45ee7b20 Mon Sep 17 00:00:00 2001 From: Wilgert Velinga Date: Fri, 6 Dec 2019 17:39:47 +0100 Subject: [PATCH] some small fixes in week3/lessonplan.md --- Week3/LESSONPLAN.md | 53 ++++++++++++++++++++++++++++++++------------- 1 file changed, 38 insertions(+), 15 deletions(-) diff --git a/Week3/LESSONPLAN.md b/Week3/LESSONPLAN.md index 50a1ce2f7..dcf0e74c4 100644 --- a/Week3/LESSONPLAN.md +++ b/Week3/LESSONPLAN.md @@ -20,17 +20,18 @@ FIRST HALF (12.00 - 13.30) - Branching constructs - `if..else` - Looping constructs - - `for` - - `for..of` - - `for..in` - - `do..while` + - `for` + - `for..of` + - `for..in` + - `do..while` - Operators (arithmetic, comparison, eg `+`, `*`, `&&`, `||`, etc). -Note: You can ask students to explain a concept or summerise the last lecture themselves +Note: You can ask students to explain a concept or summarize the last lecture themselves ## 2. Function (ES5 only) ### Explanation + Functions are a way to organize your code in to re-usable chunks. > People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones. @@ -38,13 +39,24 @@ Functions are a way to organize your code in to re-usable chunks. > _-- Donald Knuth_ https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/functions.md + ### Example + Same link as Explanation + ### Exercise +Create a function that takes a string and returns the first letter of each word in the string. + +```javascript +firstLetter(`Hack Your Future`); +// will return: 'HYF' +``` + ### Essence -- __Reusability__: Functions can be grouped together to make a module (or library), and then modules can be imported into your application so you can build awesome apps! -- __Abstraction__: Hide underlying details about how a piece of functionality works under the hood. You can change how things are implemented within the function without other programmers who use your function worrying aobut the exact details of how it was implemented. + +- **Reusability**: Functions can be grouped together to make a module (or library), and then modules can be imported into your application so you can build awesome apps! +- **Abstraction**: Hide underlying details about how a piece of functionality works under the hood. You can change how things are implemented within the function without other programmers who use your function worrying about the exact details of how it was implemented. And the same link as Explanation @@ -53,18 +65,19 @@ SECOND HALF (14.00 - 16.00) ## 3. Scope (global, functional, block) ### Explanation -Scopes define the visiblity of declarations of variables and functions. -The top level outside all your functions is called the _global scope_. Values defined in the global scope are accessible from everywhere in the code. Whereas, variables defined in local scope can only be accessed and altered inside the scope they were created. +Scopes define the visibility of declarations of variables and functions. + +The top level, outside all your functions, is called the _global scope_. Values defined in the global scope are accessible from everywhere in the code. Whereas, variables defined in local scope can only be accessed and altered inside the scope they were created. - `var` and `function` declarations are visible with function scope. -- `let` and `const` declarations are visible with block scope. A block can be seen as a set of statements enclosed in curly brackets({}). +- `let` and `const` declarations are visible with block scope. A block can be seen as a set of statements enclosed in curly brackets(`{}`). Global scope: - Can be a real useful tool or a nightmare. - Useful in scenarios where we want to export JS modules, use third party libraries like jQuery etc. -- Big risk of causing namespace clashes with multiple variables with same name being created in different places. +- Big risk of causing problems called namespace clashes with multiple variables with same name being created in different places. Local Scope: @@ -73,11 +86,13 @@ Local Scope: - Variables defined within a function aren't available outside it. They are created when a function starts and are _in a way_ destroyed/hidden when a function ends. https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/scope.md + ### Example + ![Scopes](../assets/scopes.png) ```Javascript -let villan = "Joker"; // | global scope +let villain = "Joker"; // | global scope // | function myFunction() { // | | function scope let hero = "Batman"; // | | @@ -85,19 +100,21 @@ function myFunction() { // | | function scope let coHero = "Robin"; // | | | console.log(hero); // | | | console.log(coHero); // | | | - console.log(villan); // | | | + console.log(villain); // | | | } // | | | console.log("------") // | | console.log(hero); // | | console.log(coHero); // | | - console.log(villan); // | | + console.log(villain); // | | } // | | // | myFunction(); // | ``` -And the same link as Explanation +And the same link as Explanation + ### Exercise + What happens if we use the same variable name in different scopes? ```Javascript @@ -112,15 +129,21 @@ function myFunction() { myFunction(); ``` + ### Essence + Same link as Explanation ## 4. How to combine variables, loops & functions ### Explanation + ### Example + ### Exercise + https://github.com/yash-kapila/HYF-JS1-Week3/tree/master/src + ### Essence _Special thanks to Jim Cramer, Yash Kapila, David Nudge for most of the content_