├── .babelrc ├── README.md ├── app └── index.js ├── build ├── bundle.js └── index.html ├── lectures ├── 03_es6_syntax │ ├── 15_variable_scoping_with_let │ │ ├── coding_exercise │ │ │ ├── README.md │ │ │ ├── evaluate.js │ │ │ ├── solution.js │ │ │ └── student.js │ │ └── index.js │ ├── 16_const_scope_declarations │ │ ├── index.js │ │ └── quiz │ │ │ └── answers.md │ └── 17_template_literals_strings │ │ ├── coding_exercise │ │ ├── README.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js │ │ └── index.js ├── 04_operating_destructuring │ ├── 19_spread_rest_operator │ │ ├── coding_exercise │ │ │ ├── README.md │ │ │ ├── evaluate.js │ │ │ ├── solution.js │ │ │ └── student.js │ │ └── index.js │ ├── 20_destructuring_arrays │ │ ├── index.js │ │ └── quiz │ │ │ └── answers.md │ └── 21_destructuring_objects │ │ ├── index.js │ │ └── quiz │ │ └── answers.md ├── 05_functions_methods │ ├── 23_arrow_functions │ │ └── index.js │ ├── 24_arrow_functions_ignoring_this │ │ ├── coding_exercise │ │ │ ├── README.md │ │ │ ├── evaluate.js │ │ │ ├── solution.js │ │ │ └── student.js │ │ └── index.js │ ├── 25_map_helper_method │ │ ├── coding_exercise │ │ │ ├── README.md │ │ │ ├── evaluate.js │ │ │ ├── solution.js │ │ │ └── student.js │ │ └── index.js │ └── 26_filter_helper_method │ │ ├── coding_exercise │ │ ├── REAMDE.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js │ │ └── index.js ├── 06_modules │ ├── 28_exporting_values │ │ ├── index.js │ │ └── students.js │ └── 29_exporting_functions_by_default │ │ ├── calculator.js │ │ ├── index.js │ │ └── quiz │ │ └── answers.md ├── 07_classes │ ├── 32_setting_up_a_class │ │ ├── index.js │ │ └── quiz │ │ │ └── answers.md │ └── 33_inheritance_classes │ │ ├── coding_exercise │ │ ├── README.md │ │ ├── evaluate.js │ │ ├── solution.js │ │ └── student.js │ │ ├── entity.js │ │ └── index.js └── 08_react │ ├── 35_jsx │ └── index.js │ └── 36_promises │ ├── index.js │ └── quiz │ └── answers.md ├── package-lock.json ├── package.json └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"] 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Essentials in JavaScript ES6 - A Fun and Clear Introduction 2 | 3 | ### Please use this resource for the following reasons! 4 | 5 | Find guides to each coding lecture. 6 | 7 | Discover answers to coding challenges and quizzes. 8 | 9 | Build a starter project for es6 in webpack. 10 | 11 | 12 | Enjoy the course, and keep coding! 13 | 14 | *** 15 | 16 | Link to original course: https://www.udemy.com/essentials-in-javascript-es6 17 | -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | console.log('hello webpack'); 2 | console.log('hello in the browser'); -------------------------------------------------------------------------------- /build/bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 40 | /******/ } 41 | /******/ }; 42 | /******/ 43 | /******/ // define __esModule on exports 44 | /******/ __webpack_require__.r = function(exports) { 45 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 46 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 47 | /******/ } 48 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 49 | /******/ }; 50 | /******/ 51 | /******/ // create a fake namespace object 52 | /******/ // mode & 1: value is a module id, require it 53 | /******/ // mode & 2: merge all properties of value into the ns 54 | /******/ // mode & 4: return value when already ns object 55 | /******/ // mode & 8|1: behave like require 56 | /******/ __webpack_require__.t = function(value, mode) { 57 | /******/ if(mode & 1) value = __webpack_require__(value); 58 | /******/ if(mode & 8) return value; 59 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 60 | /******/ var ns = Object.create(null); 61 | /******/ __webpack_require__.r(ns); 62 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 63 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 64 | /******/ return ns; 65 | /******/ }; 66 | /******/ 67 | /******/ // getDefaultExport function for compatibility with non-harmony modules 68 | /******/ __webpack_require__.n = function(module) { 69 | /******/ var getter = module && module.__esModule ? 70 | /******/ function getDefault() { return module['default']; } : 71 | /******/ function getModuleExports() { return module; }; 72 | /******/ __webpack_require__.d(getter, 'a', getter); 73 | /******/ return getter; 74 | /******/ }; 75 | /******/ 76 | /******/ // Object.prototype.hasOwnProperty.call 77 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 78 | /******/ 79 | /******/ // __webpack_public_path__ 80 | /******/ __webpack_require__.p = ""; 81 | /******/ 82 | /******/ 83 | /******/ // Load entry module and return exports 84 | /******/ return __webpack_require__(__webpack_require__.s = "./app/index.js"); 85 | /******/ }) 86 | /************************************************************************/ 87 | /******/ ({ 88 | 89 | /***/ "./app/index.js": 90 | /*!**********************!*\ 91 | !*** ./app/index.js ***! 92 | \**********************/ 93 | /*! no static exports found */ 94 | /***/ (function(module, exports) { 95 | 96 | eval("console.log('hello webpack');\n\n//# sourceURL=webpack:///./app/index.js?"); 97 | 98 | /***/ }) 99 | 100 | /******/ }); -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/15_variable_scoping_with_let/coding_exercise/README.md: -------------------------------------------------------------------------------- 1 | ##Coding Exercise: Let's Scope 'lets' 2 | 3 | ###Problem Statement: 4 | Let's reinforce the idea of variables scoping with 'let' with a short coding exercise! 5 | 6 | Remember that with scoping we can re-use the same variable name. 7 | 8 | **Directions:** 9 | 10 | Consider this run function. In its scope, on line 3, the variable 'b' = 2.​ However, on line 6, a new block scope, { .. } is declared. 11 | 12 | On line 7, use the 'let' keyword to change 'b' to 3 in the new scope. The console.logs should output '2, 3'. 13 | 14 | 15 | ####[Student File](./student.js) 16 | 17 | ####[Solution File](./solution.js) 18 | 19 | ####[Evaluation file](./evaluate.js) 20 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/15_variable_scoping_with_let/coding_exercise/evaluate.js: -------------------------------------------------------------------------------- 1 | it('prints to standard output', function() { 2 | var stdout = ''; 3 | 4 | spyOn(console, 'log').and.callFake(function() { 5 | stdout += Array.prototype.slice.call(arguments).join(' ') + '\n'; 6 | }); 7 | 8 | run(); 9 | 10 | expect(stdout).toEqual('2\n3\n'); 11 | }); 12 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/15_variable_scoping_with_let/coding_exercise/solution.js: -------------------------------------------------------------------------------- 1 | function run() { 2 | 3 | let b = 2; 4 | console.log(b); 5 | 6 | { 7 | let b = 3; 8 | console.log(b); 9 | } 10 | 11 | } 12 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/15_variable_scoping_with_let/coding_exercise/student.js: -------------------------------------------------------------------------------- 1 | function run() { 2 | 3 | let b = 2; 4 | console.log(b); 5 | 6 | { 7 | // TODO replace this line with code 8 | console.log(b); 9 | } 10 | 11 | } 12 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/15_variable_scoping_with_let/index.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | var a = 'hello'; --> 3 | let a = 'hello'; 4 | console.log('a outside of scope =', a); 5 | 6 | { 7 | let a = 'goodbye'; 8 | console.log('a inside scope =', a); 9 | } 10 | 11 | console.log('a outside of scope =', a); 12 | 13 | // part 2: 14 | { 15 | let salary = 90000; 16 | } 17 | 18 | console.log('salary:', salary); // error: salary is not defined 19 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/16_const_scope_declarations/index.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | const a = 2; 3 | a = 3 * 4; // error 4 | 5 | // part 2: 6 | const array = [1, 2, 3]; 7 | array.push(4); 8 | console.log('array', array); // valid 9 | 10 | array = [1]; // error 11 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/16_const_scope_declarations/quiz/answers.md: -------------------------------------------------------------------------------- 1 | ##Quiz: Can we manipulate constants? 2 | 3 | ###1) 4 | 5 | Say we have: 6 | 7 | ```javascript 8 | const array = [1, 2, 3]. 9 | ``` 10 | 11 | Which of the following statements is valid and will not throw an error? 12 | 13 | a) array = [1, 2, 3, 4]; 14 | 15 | explanation: This line re-assigns the array const. You can't re-assign constants, otherwise you will see a TypeError. 16 | 17 | **b) array.push(4);** // the answer 18 | 19 | explanation: Correct! Although this line manipulates the const array. It does not re-assign the actual array const itself. This is valid! 20 | 21 | c) array = 3 + 1; 22 | 23 | explanation: This line re-assigns the array const. You can't re-assign constants, otherwise you will see a TypeError. 24 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/17_template_literals_strings/coding_exercise/README.md: -------------------------------------------------------------------------------- 1 | ##Coding Exercise: Mastering Template Literals & ES6 Strings 2 | 3 | ###Problem Statement: 4 | Template literals and ES6 Strings become really powerful to use once you get used to seeing the funny looking syntax. 5 | 6 | So let's become ES6 jedi-masters and hone our template skills. 7 | 8 | **Directions:** 9 | Change the message in the print function to log this: 10 | 11 | 'Luke first uses a blue-colored lightsaber. But his father, Vader, wields a red-colored lightsaber.' 12 | 13 | Although pre-es6 code will work, try using the variables, and template literal syntax, `${...}` to do so. 14 | 15 | 16 | ####[Student File](./student.js) 17 | 18 | ####[Solution File]('./solution.js') 19 | 20 | ####[Evaluation File](./evaluate.js) 21 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/17_template_literals_strings/coding_exercise/evaluate.js: -------------------------------------------------------------------------------- 1 | it('prints to standard output', function() { 2 | var stdout = ''; 3 | 4 | spyOn(console, 'log').and.callFake(function() { 5 | stdout += Array.prototype.slice.call(arguments).join(' ') + '\n'; 6 | }); 7 | 8 | var expected = 'Luke first uses a blue-colored lightsaber. But his father, Vader, wields a red-colored lightsaber.\n'; 9 | 10 | print(); 11 | 12 | expect(stdout).toEqual(expected); 13 | }); 14 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/17_template_literals_strings/coding_exercise/solution.js: -------------------------------------------------------------------------------- 1 | function print() { 2 | let luke = 'blue'; 3 | let vader = 'red'; 4 | 5 | let message = `Luke first uses a ${luke}-colored lightsaber. But his father, Vader, wields a ${vader}-colored lightsaber.`; 6 | 7 | console.log(message); 8 | } 9 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/17_template_literals_strings/coding_exercise/student.js: -------------------------------------------------------------------------------- 1 | function print() { 2 | let luke = 'blue'; 3 | let vader = 'red'; 4 | 5 | let message = `Luke first uses a _______-colored lightsaber. But his father, Vader, wields a ______-colored lightsaber.`; 6 | 7 | console.log(message); 8 | } 9 | -------------------------------------------------------------------------------- /lectures/03_es6_syntax/17_template_literals_strings/index.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | var a = 'hello'; 3 | var b = 'world'; 4 | var c = a + ' ' + b; 5 | console.log(c); 6 | 7 | // part 2: 8 | let d = `hello ${b}`; 9 | console.log(d); 10 | let e = `${a} world`; 11 | console.log(e); 12 | -------------------------------------------------------------------------------- /lectures/04_operating_destructuring/19_spread_rest_operator/coding_exercise/README.md: -------------------------------------------------------------------------------- 1 | ##Coding Exercise: Butter Spread 2 | 3 | ###Problem Statement: 4 | Let's practice using the spread/rest operator! 5 | 6 | **Directions:** 7 | We have a function 'butter'. Right now it only returns the array 'a', [1, 2, 3]; 8 | 9 | Later on, we call, butter(4, 5, 6). But instead of [1, 2, 3], we want butter to return [1, 2, 3, 4, 5, 6]; 10 | 11 | How can we take advantage of the spread operator to make butter simply return [1, 2, 3, 4, 5, 6]? 12 | 13 | Hint: we have to use the spread syntax ( ... ) twice. 14 | 15 | ####[Student File](./student.js) 16 | 17 | ####[Solution File]('./solution.js') 18 | 19 | ####[Evaluation File](./evaluate.js) 20 | -------------------------------------------------------------------------------- /lectures/04_operating_destructuring/19_spread_rest_operator/coding_exercise/evaluate.js: -------------------------------------------------------------------------------- 1 | describe('butter()', function() { 2 | it('should throw if the wrong result is returned', function() { 3 | expect(butter(4, 5, 6)).toEqual([1, 2, 3, 4, 5, 6]); 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /lectures/04_operating_destructuring/19_spread_rest_operator/coding_exercise/solution.js: -------------------------------------------------------------------------------- 1 | function butter(...z) { 2 | let a = [1, 2, 3, ...z]; 3 | return a; 4 | } 5 | 6 | butter(4, 5, 6); 7 | -------------------------------------------------------------------------------- /lectures/04_operating_destructuring/19_spread_rest_operator/coding_exercise/student.js: -------------------------------------------------------------------------------- 1 | function butter() { 2 | let a = [1, 2, 3]; 3 | return a; 4 | } 5 | 6 | butter(4, 5, 6); 7 | -------------------------------------------------------------------------------- /lectures/04_operating_destructuring/19_spread_rest_operator/index.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | // let a = [7, 8, 9]; 3 | // let b = [6, ...a, 10]; 4 | // console.log(b); 5 | 6 | // part 2 7 | // function print(a, b, c) { 8 | // console.log(a, b, c); 9 | // } 10 | // let z = [1, 2, 3]; 11 | // print(...z); 12 | 13 | // part 3 14 | // function print(...z) { 15 | // console.log(z); 16 | // } 17 | // print(1, 2, 3); 18 | -------------------------------------------------------------------------------- /lectures/04_operating_destructuring/20_destructuring_arrays/index.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | 3 | // let c = [100, 200]; 4 | // // let a = c[1]; 5 | // // let b = c[2]; 6 | // let [a, b] = c; 7 | // console.log(a, b); 8 | 9 | // part 2: 10 | // let fellowship = ["Frodo", "Gandalf", "Aragorn"]; 11 | // let [hobbit, wizard, ranger] = fellowship; 12 | // console.log(hobbit, wizard, ranger); 13 | 14 | // part 3: 15 | // let c = [100, 200, 300, 400, 500]; 16 | // let [a, ...b] = c; 17 | // console.log(a, b); 18 | -------------------------------------------------------------------------------- /lectures/04_operating_destructuring/20_destructuring_arrays/quiz/answers.md: -------------------------------------------------------------------------------- 1 | ##Quiz: Destructuring the Fellowship (Array) 2 | 3 | Let's get the hang of destructuring assignment with a few questions about the fellowship. 4 | 5 | 6 | ###1) 7 | 8 | Consider this array 9 | 10 | ```javascript 11 | const fellowship = ["Frodo", "Gandalf", "Aragorn", "Legolas", "Gimli"]; 12 | ``` 13 | 14 | Which of the following statements will give me the variable, wizard, with the value of "Gandalf"? 15 | 16 | **a) let [hobbit, wizard, ranger, elf, dwarf] = fellowship;** //answer 17 | 18 | explanation: Correct! Destructuring assignment looks at the order in the array. Because the wizard variable is the second element in the assignment array, it assigns to the fellowship array's second element, "Gandalf". 19 | 20 | b) let [...characters] = fellowship; 21 | explanation: Although this makes a new array, it does not assign a wizard variable. 22 | 23 | c) let [wizard, hobbit, elf, dwarf, ranger]; 24 | explanation: Destructing assignment looks at the order in the array. Wizard is the first variable in the assignment, so it will match to 'Frodo' and not 'Gandalf' 25 | 26 | ###2) 27 | 28 | Consider the same array 29 | 30 | ```javascript 31 | const fellowship = ["Frodo", "Gandalf", "Aragorn", "Legolas", "Gimli"]; 32 | ``` 33 | 34 | Which of the following statements gives me the array, three_amigos, with the value ["Aragorn", "Legolas", "Gimli"]? 35 | 36 | a) let [...three_amigos] = fellowship; 37 | 38 | explanation: This statement actually assign the entire fellowship array to three_amigos. 39 | 40 | b) let [hobbit, ...three_amigos] = fellowship; 41 | 42 | explanation: This statement assigns hobbit to "Frodo", but doesn't capture only ["Aragorn", "Legolas", "Gimli"] in three_amigos. 43 | 44 | **c) let [hobbit, wizard, ...three_amigos] = fellowship;** // answer 45 | 46 | explanation: Correct! This statement assigns hobbit to "Frodo" and wizard to "Gandalf". Using the spread operator, three_amigos captures the rest of the fellowship, ["Aragorn", "Legolas", "Gimli"]. 47 | -------------------------------------------------------------------------------- /lectures/04_operating_destructuring/21_destructuring_objects/index.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | // let wizard = { magical: true, power: 10 }; 3 | // // let magical = wizard.magical; 4 | // // let power = wizard.power; 5 | // // --> 6 | // let { magical, power } = wizard; 7 | // console.log(magical, power); 8 | 9 | // part 2: 10 | // let ranger = { magical: false, power: 9 }; 11 | // let { magical, power } = ranger; 12 | // console.log(magical, power); 13 | 14 | // part 3: 15 | // let magical = true; 16 | // let power = 2; 17 | // let ranger = { magical: false, power: 9 }; 18 | // // { magical, power } = ranger; // Syntax Error because this defines a coding block 19 | // // --> 20 | // ({magical, power} = ranger); // valid 21 | // console.log(magical, power); 22 | -------------------------------------------------------------------------------- /lectures/04_operating_destructuring/21_destructuring_objects/quiz/answers.md: -------------------------------------------------------------------------------- 1 | ##Quiz: Destructuring Animals (Objects) 2 | 3 | Let's practice destructuring assignment with objects with a couple questions about animals. 4 | 5 | ###1) 6 | 7 | Consider this object 8 | 9 | ```javascript 10 | const lion = { size: 'large', sound: 'roar' }; 11 | ``` 12 | 13 | Which of the following statements uses destructuring assignment to give the variable, sound, the value of 'roar'? 14 | 15 | a) let sound = lion.roar; 16 | 17 | explanation: Incorrect because this does not use destructuring assignment. Although sound does = 'roar'; 18 | 19 | **b) let { sound } = lion;** //answer 20 | 21 | explanation: Correct! This uses destructuring assignment to set the sound property in lion of 'roar', to the sound variable. 22 | 23 | c) let sound = 'roar'; 24 | explanation: Incorrect because this does not use destructuring assignment. It just sets the value of sound to 'roar'. 25 | 26 | 27 | ###2) 28 | 29 | Consider this object 30 | 31 | ```javascript 32 | const mouse = { size: 'small', sound: 'squeak '}; 33 | ``` 34 | 35 | Which of the following statements uses destructuring assignment to assign two variables, size to 'small', and sound to 'squeak'? 36 | 37 | a) let { size } = mouse; 38 | explanation: Incorrect. Although this uses destructuring assignment, we want both size and sound, not just size. 39 | 40 | b) { size, sound } = mouse; 41 | explanation: Incorrect. Although this looks like destructuring assignment, it's actually a scoped coding block that will throw a syntax error. 42 | 43 | c) **let { size, sound } = mouse;** // answer 44 | explanation: Correct! This uses destructuring assignment to assign both the size and sound variable to the properties in mouse. 45 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/23_arrow_functions/index.js: -------------------------------------------------------------------------------- 1 | // part 1 2 | 3 | // function blastoff() { 4 | // console.log('3...2...1... blastoff!'); 5 | // } 6 | // 7 | // blastoff(); 8 | 9 | // setTimeout(function() { 10 | // console.log('3...2...1... blastoff!') 11 | // }, 1000); 12 | 13 | // part 2: 14 | 15 | // setTimeout(() => { 16 | // console.log('3...2...1... blastoff!'); 17 | // }) 18 | 19 | // part 3: 20 | // const blastoff = () => { 21 | // console.log('3...2...1... blastoff!'); 22 | // } 23 | // 24 | // blastoff(); 25 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/24_arrow_functions_ignoring_this/coding_exercise/README.md: -------------------------------------------------------------------------------- 1 | ##Coding Exercise: Archery (Arrow Functions) 2 | 3 | Let's get some target practice with arrow functions. 4 | 5 | **Directions:** 6 | Fix the broken anonymous arrow function, 'fire'! Right now, it has some pretty askew syntax. But change it to a valid arrow function that returns "bulls-eye". Also, consider using the 'eye' variable with a template string for ease. 7 | 8 | 9 | ###[Student File](./student.js) 10 | 11 | ###[Solution File]('./solution.js') 12 | 13 | ###[Evaluation File]('./evaluate.js') 14 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/24_arrow_functions_ignoring_this/coding_exercise/evaluate.js: -------------------------------------------------------------------------------- 1 | describe('fire()', function() { 2 | it('should throw if the wrong result is returned', function() { 3 | expect(fire()).toEqual("bulls-eye"); 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/24_arrow_functions_ignoring_this/coding_exercise/solution.js: -------------------------------------------------------------------------------- 1 | let eye = "eye"; 2 | 3 | const fire = () => { 4 | return `bulls-${eye}`; 5 | }; 6 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/24_arrow_functions_ignoring_this/coding_exercise/student.js: -------------------------------------------------------------------------------- 1 | let eye = "eye"; 2 | 3 | const fire = 4 | ( 5 | 6 | ) = 7 | > 8 | { 9 | return `bulls-`; 10 | } 11 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/24_arrow_functions_ignoring_this/index.js: -------------------------------------------------------------------------------- 1 | // all parts: 2 | // this.a = 25; // declaring globally 3 | // 4 | // part 1: 5 | // 6 | // let print = function() { 7 | // console.log('this.a', this.a); // this.a undefined 8 | // } 9 | // 10 | // print(); 11 | // 12 | // part 2: 13 | // 14 | // let print = function() { 15 | // this.a = 50; 16 | // console.log('this.a', this.a); // this.a 50 17 | // } 18 | // 19 | // print(); 20 | // 21 | // 22 | // part 3: 23 | // 24 | // let arrowPrint = () => { 25 | // console.log('this.a in arrowPrint', this.a); // this.a in arrowPrint 25 26 | // } 27 | // 28 | // arrowPrint(); 29 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/25_map_helper_method/coding_exercise/README.md: -------------------------------------------------------------------------------- 1 | ##Coding Exercise: Scaling Maps (Map Helper Method) 2 | 3 | Time to practice the map helper method. 4 | 5 | **Directions:** 6 | Lewis has a list of path lengths in inches on his map, represented by this array. 7 | ```javascript 8 | let lengths = [3, 7, 5]; 9 | ``` 10 | Now, Lewis and his best friend, Clark, want to know how long these paths are in real life. Luckily, they know that an inch on the map equals 8 miles in real life. 11 | 12 | Fix the scale function to return a new array with the values that Lewis and Clark want. Use a map helper method, and the 'multiple' parameter to do so. 13 | 14 | 15 | ###[Student File](./student.js) 16 | 17 | ###[Solution File]('./solution.js') 18 | 19 | ###[Evaluation File]('./evaluate.js') 20 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/25_map_helper_method/coding_exercise/evaluate.js: -------------------------------------------------------------------------------- 1 | describe('scale(8)', function() { 2 | it('should throw if the wrong result returns', function() { 3 | expect(scale(8)).toEqual([24, 56, 40]); 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/25_map_helper_method/coding_exercise/solution.js: -------------------------------------------------------------------------------- 1 | let lengths = [3, 7, 5]; 2 | let multiple = 8; 3 | 4 | const scale = (multiple) => { 5 | return lengths.map(element => element * multiple); 6 | }; 7 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/25_map_helper_method/coding_exercise/student.js: -------------------------------------------------------------------------------- 1 | let lengths = [3, 7, 5]; 2 | let multiple = 8; 3 | 4 | const scale = (multiple) => { 5 | return lengths // TODO fill out the rest; 6 | }; 7 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/25_map_helper_method/index.js: -------------------------------------------------------------------------------- 1 | // all parts 2 | // let points = [10, 20, 30]; 3 | 4 | // part 1: 5 | // let addOne = function(element) { 6 | // return element + 1; 7 | // }; 8 | // 9 | // points = points.map(addOne); 10 | 11 | // part 2: 12 | // let addOne = (element) => { 13 | // return element + 1; 14 | // }; 15 | // 16 | // points = points.map(addOne); 17 | 18 | // part 3: 19 | // points = points.map(element => { 20 | // return element + 1; 21 | // }); 22 | 23 | // part 4: 24 | // points = points.map(element => element + 1); 25 | 26 | // all parts 27 | // console.log(points); 28 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/26_filter_helper_method/coding_exercise/REAMDE.md: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/26_filter_helper_method/coding_exercise/evaluate.js: -------------------------------------------------------------------------------- 1 | describe('highlight()', function() { 2 | it('should throw if the wrong result returns', function() { 3 | expect(highlight()).toEqual([15.7, 18, 22.1]); 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/26_filter_helper_method/coding_exercise/solution.js: -------------------------------------------------------------------------------- 1 | const averages = [6, 15.7, 9, 18, 22.1, 9.2, 4]; 2 | 3 | const highlight = () => { 4 | return averages.filter(element => element >= 15); 5 | }; 6 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/26_filter_helper_method/coding_exercise/student.js: -------------------------------------------------------------------------------- 1 | const averages = [6, 15.7, 9, 18, 22.1, 9.2, 4]; 2 | 3 | const highlight = () => { 4 | return averages // TODO fill out the rest of this line 5 | }; 6 | -------------------------------------------------------------------------------- /lectures/05_functions_methods/26_filter_helper_method/index.js: -------------------------------------------------------------------------------- 1 | // all parts 2 | // let scores = [90, 85, 67, 71, 70, 55, 92]; 3 | 4 | // part 1: 5 | // let isPassing = (grade) => { 6 | // return grade >= 70; 7 | // } 8 | // 9 | // let passing = scores.filter(isPassing); 10 | 11 | //part 2: 12 | // let passing = scores.filter(element => element >= 70); 13 | 14 | // all parts 15 | // console.log(passing); 16 | -------------------------------------------------------------------------------- /lectures/06_modules/28_exporting_values/index.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | // import { students } from './students'; 3 | // console.log(students); 4 | // 5 | // part 2: 6 | // import {students, total} from './students'; 7 | // console.log(students); 8 | // console.log(total, "students"); 9 | // 10 | // part 3: 11 | // import students from './students'; 12 | // console.log(students); 13 | -------------------------------------------------------------------------------- /lectures/06_modules/28_exporting_values/students.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | // export const students = ["Harry", "Ron", "Hermoine"]; 3 | // 4 | // part 2: 5 | // export const total = 505; 6 | // export const students = ["Harry", "Ron", "Hermoine"]; 7 | -------------------------------------------------------------------------------- /lectures/06_modules/29_exporting_functions_by_default/calculator.js: -------------------------------------------------------------------------------- 1 | // part 1: 2 | // const add = (x, y) => { 3 | // return x + y; 4 | // } 5 | // 6 | // const multiply = (x, y) => { 7 | // return x * y; 8 | // } 9 | // 10 | // export { add, multiply }; 11 | 12 | // part 2: 13 | // export default multiply; 14 | -------------------------------------------------------------------------------- /lectures/06_modules/29_exporting_functions_by_default/index.js: -------------------------------------------------------------------------------- 1 | // parts 1 and 2: 2 | // import { add, multiply } from './calculator'; 3 | 4 | // part 1: 5 | // console.log(add(3, 5)); 6 | 7 | // part 2: 8 | // console.log(multiply(3, 5)); 9 | 10 | // part 3: 11 | // import multiply from './calculator'; 12 | // console.log(multiply(3, 5)); 13 | -------------------------------------------------------------------------------- /lectures/06_modules/29_exporting_functions_by_default/quiz/answers.md: -------------------------------------------------------------------------------- 1 | ##Quiz: Exports and Imports (Modules) 2 | 3 | Let's reinforce our knowledge of exporting and importing in modules with three questions. 4 | 5 | ###1) 6 | True or False? 7 | 8 | You can export multiple values from a module at once. 9 | 10 | **a) True** // answer 11 | 12 | Explanation: You can indeed export multiple values from a module at once by just using the 'export' keyword more than once. 13 | 14 | b) False 15 | 16 | Explanation: You can actually export multiple values from a module at once by just using the 'export' keyword more than once. 17 | 18 | 19 | ###2) 20 | Which of the following statements is valid syntax for importing in es6? 21 | 22 | a) import students, total from './students'; 23 | 24 | Explanation: Incorrect. You need to completely wrap the 'students' and 'total' values in blocks of curly braces to import multiple variables. 25 | 26 | b) import { students }, total from './students'; 27 | 28 | Explanation: Incorrect. You need to completely wrap the 'students' and 'total' values in blocks of curly braces to import multiple variables. 29 | 30 | **c) import { students, total } from './students';** 31 | Explanation: Correct! This imports both the 'students' and 'total' values from './students'. 32 | 33 | 34 | ###3) 35 | Which of the following statements uses the 'default' keyword correctly? 36 | 37 | a) export const by default limit = 90; 38 | 39 | Explanation: Incorrect. 'by default' is invalid syntax. 40 | 41 | b) export default const a = 20; 42 | 43 | Explanation: Incorrect. The `export default` syntax already creates the default variable. We can't also declare an 'a' const on the same line. 44 | 45 | **c) let greet = () => { return 'hello '}; 46 | export default greet;** // answer 47 | 48 | Explanation: Correct! This uses the 'default' keyword correctly to export a greet function as a module's fallback. 49 | -------------------------------------------------------------------------------- /lectures/07_classes/32_setting_up_a_class/index.js: -------------------------------------------------------------------------------- 1 | // class Entity { 2 | // constructor(name, height) { 3 | // this.name = name; 4 | // this.height = height; 5 | // } 6 | // 7 | // greet() { 8 | // console.log(`Hi, I'm ${this.name} from middle earth!`); 9 | // } 10 | // } 11 | // 12 | // let Merry = new Entity("Merry", 4.6); 13 | // Merry.greet(); 14 | -------------------------------------------------------------------------------- /lectures/07_classes/32_setting_up_a_class/quiz/answers.md: -------------------------------------------------------------------------------- 1 | ##Quiz: ES6 Classes 2 | 3 | All right, class! Let's practice classes. 4 | 5 | ##1) 6 | True or false? 7 | 8 | The es6 class body syntax uses curly braces. 9 | 10 | **a) True** //answer 11 | 12 | Explanation: Correct! The es6 class body syntax does indeed use curly braces! 13 | 14 | b) False 15 | 16 | Explanation: Incorrect. The es6 class body syntax does indeed use curly braces. 17 | 18 | 19 | 20 | ##2) 21 | True or false? 22 | 23 | A class may have more than one constructor. 24 | 25 | a) True 26 | 27 | Explanation: Incorrect. ES6 will throw a syntax error if a class has more than one constructor. 28 | 29 | **b) False** //answer 30 | 31 | Explanation: Correct! ES6 classes may only have one constructor. 32 | -------------------------------------------------------------------------------- /lectures/07_classes/33_inheritance_classes/coding_exercise/README.md: -------------------------------------------------------------------------------- 1 | ##Coding Exercise: Inheriting Powers (Class Inheritance) 2 | 3 | Let's practice some ES6 inheritance! 4 | 5 | **Directions:** 6 | Here we have a Wizard class. We even have an instance of Wizard called Gandalf with a power of 100. However, Gandalf's power() method doesn't seem to work at the moment. Make two fixes to the Wizard class: 7 | 8 | 1) Use the constructor's power_level parameter to set the Wizard's power_level to that power_level (Hint: think about 'this'). 9 | 10 | 2) Give the Wizard class a power() method that simply returns its own power_level. 11 | 12 | 13 | ###[Student File](./student.js) 14 | 15 | ###[Solution File]('./solution.js') 16 | 17 | ###[Evaluation File]('./evaluate.js') 18 | -------------------------------------------------------------------------------- /lectures/07_classes/33_inheritance_classes/coding_exercise/evaluate.js: -------------------------------------------------------------------------------- 1 | describe('person', function() { 2 | it('should throw if the wrong result returns', function() { 3 | expect(Gandalf.power()).toEqual(100); 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /lectures/07_classes/33_inheritance_classes/coding_exercise/solution.js: -------------------------------------------------------------------------------- 1 | class Wizard { 2 | constructor(power_level) { 3 | this.power_level = power_level; 4 | } 5 | 6 | power() { 7 | return this.power_level; 8 | } 9 | } 10 | 11 | let Gandalf = new Wizard(100); 12 | -------------------------------------------------------------------------------- /lectures/07_classes/33_inheritance_classes/coding_exercise/student.js: -------------------------------------------------------------------------------- 1 | class Wizard { 2 | constructor(power_level) { 3 | // TODO replace this line. 4 | } 5 | 6 | // TODO add power(), such that it returns this class's power_level 7 | 8 | 9 | } 10 | 11 | let Gandalf = new Wizard(100); 12 | -------------------------------------------------------------------------------- /lectures/07_classes/33_inheritance_classes/entity.js: -------------------------------------------------------------------------------- 1 | // class Entity { 2 | // constructor(name, height) { 3 | // this.name = name; 4 | // this.height = height; 5 | // } 6 | // 7 | // greet() { 8 | // console.log(`Hi, I'm ${this.name} from middle earth!`); 9 | // } 10 | // } 11 | // 12 | // export default Entity; 13 | -------------------------------------------------------------------------------- /lectures/07_classes/33_inheritance_classes/index.js: -------------------------------------------------------------------------------- 1 | // import Entity from './entity'; 2 | // 3 | // part 1: 4 | // class Hobbit extends Entity { 5 | // constructor(name, height) { 6 | // super(name, height); 7 | // }; 8 | // }; 9 | // 10 | // let Frodo = new Hobbit("Frodo Baggins", 4.5); 11 | // Frodo.greet(); 12 | // 13 | // part 2: 14 | // class Hobbit extends Entity { 15 | // constructor(name, height) { 16 | // super(name, height); 17 | // }; 18 | // 19 | // greet() { 20 | // console.log(`Hello! I'm ${this.name} from the Shire!`) 21 | // } 22 | // }; 23 | // 24 | // let Frodo = new Hobbit("Frodo Baggins", 4.5); 25 | // Frodo.greet(); 26 | -------------------------------------------------------------------------------- /lectures/08_react/35_jsx/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
React JSX in action!
9 | ) 10 | } 11 | } 12 | 13 | ReactDOM.render( 14 | , document.getElementById('root') 15 | ) 16 | -------------------------------------------------------------------------------- /lectures/08_react/36_promises/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | // http://api.openweathermap.org/data/2.5/weather?APPID=${api_key}&q=${city} 5 | const api_key = '8ed066dab74f94bcc931774f0e5fab2c'; 6 | 7 | class App extends Component { 8 | constructor(props) { 9 | super(props); 10 | this.state = { 11 | city: 'San Francisco', 12 | description: '' 13 | } 14 | } 15 | 16 | componentDidMount() { 17 | this.grabWeather(this.state.city); 18 | } 19 | 20 | grabWeather(city) { 21 | // returns a string representing the current weather 22 | fetch(`http://api.openweathermap.org/data/2.5/weather?APPID=${api_key}&q=${city}`) 23 | .then(response => response.json()) 24 | .then(json => { 25 | this.setState({description: json.weather[0].description}); 26 | }); 27 | } 28 | 29 | render() { 30 | return ( 31 |
32 |

Weather Report for {this.state.city}!

33 |

{this.state.description}

34 |
35 | ) 36 | } 37 | } 38 | 39 | ReactDOM.render( 40 | , document.getElementById('root') 41 | ) 42 | -------------------------------------------------------------------------------- /lectures/08_react/36_promises/quiz/answers.md: -------------------------------------------------------------------------------- 1 | ##Quiz: ES6 JSX and Promises 2 | 3 | Let's hone in on JSX and Promises for the final quiz! 4 | 5 | ##1) 6 | Which statement represents valid JSX syntax? 7 | 8 | a)
Hello from JSX!
9 | Explanation: True, but there may be more than one answer. 10 | 11 | b) 12 | Explanation: True, but there may be more than one answer. 13 | 14 | **c) All of the above.** // answer 15 | Explanation: Correct! Both answers represent valid JSX. Even represents a valid self-enclosing tag in JSX (assuming App is a defined component). 16 | 17 | ##2) 18 | Which statement correctly handles the promise returned by the fetch method in es6? 19 | 20 | a) fetch('https://api.com?data').then(console.log(data)); 21 | 22 | Explanation: Incorrect. The syntax for handling promises is to handle data with a then statement, declare a variable within, and handle it with an arrow function. 23 | 24 | **b) fetch('https://api.com?data').then(response => console.log(response));** // answer 25 | 26 | Explanation: Correct! This displays the correct syntax for handling promises. 27 | 28 | c) fetch('https://api.com?data').then() => { response }; 29 | Explanation: Incorrect. The syntax for handling promises is to handle data with a then statement, declare a variable within, and handle it with an arrow function. 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "es6", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --mode development", 8 | "build": "webpack --mode production" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "licelicense": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.26.3", 15 | "babel-loader": "^7.1.4", 16 | "babel-preset-env": "^1.7.0", 17 | "webpack": "^4.12.0", 18 | "webpack-cli": "^3.0.3", 19 | "webpack-dev-server": "^3.1.4" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: path.resolve(__dirname, 'app'), 5 | output: { 6 | path: path.resolve(__dirname, 'build'), 7 | filename: 'bundle.js' 8 | }, 9 | devServer: { 10 | port: 3000, 11 | contentBase: path.resolve(__dirname, 'build') 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.js$/, 17 | exclude: /node_modules/, 18 | use: ['babel-loader'] 19 | } 20 | ] 21 | } 22 | }; --------------------------------------------------------------------------------