├── README.md ├── callbacks └── callbackExercises.md ├── closures └── closureExercises.md ├── scope ├── SpecRunner.html ├── functions.js ├── lib │ ├── chai │ │ └── chai.js │ └── mocha │ │ ├── mocha.css │ │ └── mocha.js └── scopeExercises.md ├── underscore-extra-credit └── underscoreExercises.md └── underscore-loops └── callbackExercises.md /README.md: -------------------------------------------------------------------------------- 1 | # JSFundamentals Course Description 2 | 3 | Come here to solidify your understanding of functions and get started with functional programming in JavaScript. This is a highly interactive course that uses exercises and projects to drive home these JS Fundamentals. You will finish this course with deep knowledge on one of the most important aspects of the language: functions. 4 | 5 | 6 | ## Goals of this course 7 | 8 | The goal of the JavaScript Fundamentals part 1 and 2 is to give technical foundation and support for those who have been learning JavaScript for a couple of months, so that they will have reached a level required for the Hack Reactor admission's interviews. 9 | 10 | *IMPORTANT*: completion of the HRJR courses is no guarantee of admission, nor has any influence in the admissions process. 11 | 12 | It is our goal, however, that students who successfully complete the HRJR series will have covered all JavaScript topics necessary for the interview. 13 | 14 | If Hack Reactor takes people from 60 to 120 in web development, then Hack Reactor Junior takes people from 10 to 60 ('coz we don't teach variables and the like). 15 | 16 | ## Prerequisites 17 | 18 | It is recommended that students take JS Fundamentals: Objects, Arrays and Functions prior to this course; however it is not required. Students should have 3-5 months experience with JavaScript and programming. Students should understand and be familiar with variables, if/else statements, loops, objects, arrays and the most basic of JavaScript syntax. 19 | 20 | ## Textbook 21 | 22 | No textbook is required for this course. All materials are included in this github repo. 23 | 24 | ## Technical requirements 25 | 26 | Laptop, Chrome browser and a text editor. We recommend Sublime Text 3 for this course because it's fast, lightweight and you can run your JavaScript files in its console with Node. 27 | 28 | 29 | 30 | ## Resources 31 | 32 | **Scope and Closure:** http://speakingjs.com/es5/ch16.html 33 | -------------------------------------------------------------------------------- /callbacks/callbackExercises.md: -------------------------------------------------------------------------------- 1 | # Callback Exercises 2 | 3 | 1. Write a function, `funcCaller`, that takes a `func` (a function) and an `arg` (any data type). The function returns the `func` called with `arg`(as an argument). 4 | 5 | 1. Write a function, `firstVal`, that takes an array, `arr`, and a function, `func`, and calls `func` with the first index of the `arr`, the index # and the whole array. 6 | 7 | 1. Change `firstVal` to work not only with arrays but also objects. Since objects are not ordered, you can use any key-value pair on the object. 8 | 9 | 1. [Extra Credit] Write a function, `once`, (see: http://underscorejs.org/#once) that takes a function and returns a version of that function which can only be called once. [Hint: you need a closure] 10 | You probably don't want to be able to double charge someone's credit card. Here is an example of how to use it: 11 | ```javascript 12 | var chargeCreditCard = function(num, price){ 13 | //charges credit card for a certain price 14 | }; 15 | var processPaymentOnce = once(chargeCreditCard); 16 | processPaymentOnce(123456789012, 200); 17 | ``` 18 | -------------------------------------------------------------------------------- /closures/closureExercises.md: -------------------------------------------------------------------------------- 1 | ## Closure exercises 2 | 3 | 1. Write a function, `nonsense` that takes an input `string`. This function contains another function, `blab` which alerts `string` and is immediately called inside the function `nonsense`. `blab` should look like this inside of the `nonsense` function: 4 | 5 | ```javascript 6 | var blab = function(){ 7 | alert(string); 8 | }; 9 | ``` 10 | 11 | 1. In your function, `nonsense`, change the immediate call to a setTimeout so that the call to `blab` comes after 2 seconds. The `blab` function itself should stay the same as before. 12 | 13 | 1. Now, instead of calling `blab` inside of `nonsense`, return `blab` (without invoking it). Call `nonsense` with some string and store the returned value (the `blab` function) in a variable called `blabLater`. Call `nonsense` again with a different string and store the returned value in a variable called `blabAgainLater`. 14 | 15 | 1. Inspect `blabLater` and `blabAgainLater` in your console. Call them (they are functions!) and see what happens! 16 | 17 | 18 | 1. Write a function with a closure. The first function should only take one argument, someone's first name, and the inner function should take one more argument, someone's last name. The inner function should console.log both the first name and the last name. 19 | ```javascript 20 | var lastNameTrier = function(firstName){ 21 | //does stuff 22 | 23 | var innerFunction = function() { 24 | //does stuff 25 | }; 26 | //maybe returns something here 27 | }; 28 | var firstNameFarmer = lastNameTrier('Farmer'); //logs nothing 29 | firstNameFarmer('Brown'); //logs 'Farmer Brown' 30 | ``` 31 | This function is useful in case you want to try on different last names. For example, I could use firstName again with another last name: 32 | 33 | ```javascript 34 | firstNameFarmer('Jane'); //logs 'Farmer Jane' 35 | firstNameFarmer('Lynne'); //logs 'Farmer Lynne' 36 | ``` 37 | 38 | 39 | 1. Create a `storyWriter` function that returns an object with two methods. One method, `addWords` adds a word to your story and returns the story while the other one, `erase`, resets the story back to an empty string. Here is an implementation: 40 | ```javascript 41 | var farmLoveStory = storyWriter(); 42 | farmLoveStory.addWords('There was once a lonely cow.'); // 'There was once a lonely cow.' 43 | farmLoveStory.addWords('It saw a friendly face.'); //'There was once a lonely cow. It saw a friendly face.' 44 | 45 | var storyOfMyLife = storyWriter(); 46 | storyOfMyLife.addWords('My code broke.'); // 'My code broke.' 47 | storyOfMyLife.addWords('I ate some ice cream.'); //'My code broke. I ate some ice cream.' 48 | storyOfMyLife.erase(); // '' 49 | 50 | ``` 51 | 52 | 1. Using the module pattern, design a toaster. Use your creativity here and think about what you want your users to be able to access on the outside of your toaster vs what you don't want them to be able to touch. 53 | 54 | ```javascript 55 | var Toaster = function(){ 56 | //some private methods and properties 57 | 58 | return { 59 | //some public methods and properties, etc 60 | }; 61 | }; 62 | ``` 63 | 64 | 65 | 1. [EXTRA CREDIT] Use the module pattern to design a character in a Super Mario game. Think about what actions you can control in the game and other aspects you can't control directly (example: you can only affect your health indirectly by eating a mushroom). If you are not familiar with Super Mario, choose another simple game for this example. 66 | 67 | 1. [EXTRA CREDIT] Why doesn't the code below work? This is a function that should return an array of functions that console.log() each person's name as a string when invoked. Fiddle with this function and inspect how it works, then try to fix it using a closure. Be prepared to explain to a partner how it worked before, and how it works now with a closure. 68 | 69 | ```javascript 70 | var checkAttendanceFunc = function(nameArr){ 71 | var resultArr = []; 72 | for(var i = 0; i < nameArr.length; i++){ 73 | resultArr.push(function(){ console.log('Is', nameArr[i], 'present?', i)}) 74 | }; 75 | return resultArr; 76 | }; 77 | ``` 78 | Here is a hint: http://jsfiddle.net/PuEy6/ 79 | 80 | 1. [EXTRA CREDIT] Write a function that takes another function\* as an argument and creates a version of the function that can only be called one time. Repeated calls to the modified function will have no effect, returning the value from the original call. How could you do this without using a closure? Is it even possible? How could you do this with a closure? \*Note: This original input function should *not* have any parameters. 81 | -------------------------------------------------------------------------------- /scope/SpecRunner.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 |