├── images
    ├── protochain.png
    ├── cantransition.png
    ├── domscreenshot.png
    └── diagramforproto.png
├── README.md
├── LICENSE
├── advanced theory
    ├── authentication.md
    ├── APIs in JS.md
    ├── ES2016 and 2017.md
    ├── advanced array methods.md
    ├── AJAX.md
    ├── css3.md
    ├── testing.md
    ├── asynchronous JS.md
    └── OOP with JS.md
└── basic theory
    ├── js and html.md
    └── basic JS info.md


/images/protochain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/V1raNi/webdev-bootcamp-theory/HEAD/images/protochain.png


--------------------------------------------------------------------------------
/images/cantransition.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/V1raNi/webdev-bootcamp-theory/HEAD/images/cantransition.png


--------------------------------------------------------------------------------
/images/domscreenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/V1raNi/webdev-bootcamp-theory/HEAD/images/domscreenshot.png


--------------------------------------------------------------------------------
/images/diagramforproto.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/V1raNi/webdev-bootcamp-theory/HEAD/images/diagramforproto.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # The Web Developer Bootcamp Theory
2 | 
3 | This repository contains my notes which were taken during https://www.udemy.com/the-web-developer-bootcamp and https://www.udemy.com/the-advanced-web-developer-bootcamp
4 | 
5 | The notes contain some basic and (a little) advanced information about JavaScript, CSS, React and Redux along with my comments. I tried to write everything in the way a novice learner (such as myself) would understand.
6 | 
7 | Please bear in mind that the notes here do not cover everything, are not 100% complete, and are written based on the information from Udemy courses. So if you need something more comprehensive, please see other documentation online (MDN, W3, etc).
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Dmitry Shamshurin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/advanced theory/authentication.md:
--------------------------------------------------------------------------------
 1 | # Authentication
 2 | 
 3 | #### Table of Contents
 4 | 
 5 | - [Authentication](#authentication)
 6 |       - [Table of Contents](#table-of-contents)
 7 |   - [One Way Hashing](#one-way-hashing)
 8 |       - [Example of Hashing](#example-of-hashing)
 9 |     - [Sign In (Authentication)](#sign-in-authentication)
10 |     - [JWT (JSON Web Token)](#jwt-json-web-token)
11 |       - [Authentication](#authentication-1)
12 |       - [Sending JWT to Server](#sending-jwt-to-server)
13 | 
14 | ## One Way Hashing
15 | 
16 | It's converting data into a fixed length has string; we can only recreate the hash if we know the original data
17 | 
18 | Once we have the has, we can't go back and figure out what the original data was
19 | 
20 | It's applicable for saving passwords on our server - we never save actual password; the data that the site saves should be just hash and nothing else
21 | 
22 | #### Example of Hashing
23 | 
24 | Password 'password' -> given to a hash library 'bcrypt' -> $2a$10$9Mconplm8A780pY6iB2q.eBwkdldFbnz2tSH2uqHEi5B9KTpR3O8.
25 | 
26 | ### Sign In (Authentication)
27 | 
28 | Once we've saved that password as a has, the process of signing is like this:
29 | 
30 | $2a$10$9Mconplm8A780pY6iB2q.eBwkdldFbnz2tSH2uqHEi5B9KTpR3O8. (in database) -> user provides a password ('password') -> password goes through 'bcrypt' -> hash is generated again -> compare those hashes -> log in
31 | 
32 | ### JWT (JSON Web Token)
33 | 
34 | jwt.io
35 | 
36 | Users don't want to enter their passwords on every page; we need some proof that we have logged in in the past
37 | 
38 | We can use JWTs as proof that we've logged in before - JWT is a web standard for storing signed data (sometimes called 'jot')
39 | 
40 | JWT Format:
41 | 
42 | ```
43 | Header: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
44 | Payload: eyJ1c2VySWQiOiIxMjM0In0.
45 | Signature: kud-czcx6yOSSQgB0lKbibHNFmlAJwrV8iRQ1Ha-r-Q
46 | ```
47 | 
48 | Signature is used to make sure that the header and the payload has not been tempered with; both the header and the payload, and then also a secret key are inputs to generate the signature
49 | - A secret key is a string that we store on the server but we don't give people access to it (use env variables, install dotenv for connecting to .env file)
50 | 
51 | The server is the one that keeps track of that secret key, and only it can know about the secret
52 | - If a hacker were to get access to that key then the hacker could also make fake JWTs with whatever header and payload that they want
53 |   - So the thing that keeps this secure is the fact that this signature generation can only be done by the server, it can't be done by the client of by anyone else
54 | 
55 | #### Authentication
56 | 
57 | The server verifies the payload and the header to make sure it hasn't been tempered with, and if it hasn't, it looks in the payload to see that it has something like a user ID stored, and then if that user ID is there, that verifies that we've logged in in the past
58 | 
59 | When the user signs in, we give the generated JWT back to the client; every authenticated request after that the client needs to send us the JWT back (if we're the server)
60 | - As long as the client sends a JWT for which that signature matches the signature that we generate on the server, we are authenticated
61 | - Once we look in this payload, we can see what the user ID is to figure out which user is authenticated
62 | - If something is changed (header, payload, signature) it will lead to an invalid signature problem
63 |   - If the header or payload are different, since they are inputs to generate signature, it will result in the server trying to generate a different signature
64 | 
65 | #### Sending JWT to Server
66 | 
67 | The standard way to send the JWT is to include the JWT in the authorization header, and the first part of this header is typically 'Bearer' (type portion of authorization)
68 | 
69 | HTTP Header: Authorization: Bearer \<JWT> (e.g. Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0In0.kud-czcx6yOSSQgB0lKbibHNFmlAJwrV8iRQ1Ha-r-Q)


--------------------------------------------------------------------------------
/advanced theory/APIs in JS.md:
--------------------------------------------------------------------------------
  1 | # JSON API with JS
  2 | 
  3 | This section mostly requires information which is in JS backend doc
  4 | 
  5 | The main difference is that we don't load new pages, we are sending and receiving requests with data
  6 | 
  7 | #### Table of Contents
  8 | 
  9 | - [JSON API with JS](#json-api-with-js)
 10 |       - [Table of Contents](#table-of-contents)
 11 |   - [Endpoints](#endpoints)
 12 |   - [Responding with JSON](#responding-with-json)
 13 |   - [Routes](#routes)
 14 |     - [Index](#index)
 15 |     - [Create](#create)
 16 |     - [Show](#show)
 17 |   - [Update](#update)
 18 |   - [Delete](#delete)
 19 |   - [Helpers](#helpers)
 20 |   - [Serving a Static File](#serving-a-static-file)
 21 | 
 22 | ## Endpoints
 23 | 
 24 | Endpoints are basically routes
 25 | 
 26 | Example with a todo app (RESTful):
 27 | 
 28 | ```
 29 | Verb     Route                Description
 30 | GET      /api/todos           List all todos
 31 | POST     /api/todos           Create a new todo
 32 | GET      /api/todos/:todoId   Retrieve a todo
 33 | PUT      /api/todos/:todoId   Update a todo
 34 | DELETE   /api/todos/:todoId   Delete a todo
 35 | ```
 36 | 
 37 | ## Responding with JSON
 38 | 
 39 | res.send is dynamic, depending on the contents of what we send: if we pass string, it will render html, but if we pass JS object, it will be treated as JSON
 40 | 
 41 | ```javascript
 42 | app.get('/', function(req, res) {
 43 |   res.send({message: 'Hi there from JS object'}); // it will convert to a string, and send as JSON
 44 |   // if we pass a string, it will be treated as a string
 45 |   res.send('{data: 12345}');
 46 | });
 47 | ```
 48 | 
 49 | Also there is res.json method which does the same thing because in res.send source code it actually calls res.json (send is sort of parent)
 50 | 
 51 | ```javascript
 52 | app.get('/', function(req, res) {
 53 |   res.json({message: 'Hi there from JS object'});
 54 |   res.json('{data: 12345}'); // it will treat this string as a JSON
 55 | });
 56 | ```
 57 | 
 58 | ## Routes
 59 | 
 60 | We are assuming that we have this in our index.js file:
 61 | 
 62 | ```javascript
 63 | var todoRoutes = require('./routes/todos');
 64 | app.use('/api/todos', todoRoutes);
 65 | ```
 66 | 
 67 | Schema for examples:
 68 | 
 69 | ```javascript
 70 | var mongoose = require('mongoose');
 71 | 
 72 | var todoSchema = new mongoose.Schema({
 73 |   name: {
 74 |     type: String,
 75 |     required: 'Name cannot be blank!'
 76 |   },
 77 |   completed: {
 78 |     type: Boolean,
 79 |     default: false
 80 |   },
 81 |   created_date: {
 82 |     type: Date,
 83 |     default: Date.now
 84 |   }
 85 | });
 86 | 
 87 | var Todo = mongoose.model('Todo', todoSchema);
 88 | 
 89 | module.exports = Todo;
 90 | ```
 91 | 
 92 | ### Index
 93 | 
 94 | ```javascript
 95 | // index route
 96 | router.get('/', function(req, res) {
 97 |   db.Todo.find()
 98 |   .then(function(todos) {
 99 |     res.json(todos);
100 |   })
101 |   .catch(function(err) {
102 |     res.send(err);
103 |   });
104 | });
105 | ```
106 | 
107 | ### Create
108 | 
109 | ```javascript
110 | // create route
111 | router.post('/', function(req, res) {
112 |   db.Todo.create(req.body)
113 |   .then(function(newTodo) {
114 |     // standard way to respond is res.send it back since it's importand to know that it worked, and date, the status abd the ID are going to be generated by mongo, so we want those to come back
115 |     // we're also sending a different status code to be more explicit (201 - created)
116 |     res.status(201).json(newTodo);
117 |   })
118 |   .catch(function(err) {
119 |     res.send(err);
120 |   })
121 | });
122 | 
123 | // if we try to send along some other data (like mood which is not in our schema), it doesn't actually try and insert that because that's not a part of our schema, so mongo doesn't care about that (our only defined key is name in this example)
124 | ```
125 | 
126 | ### Show
127 | 
128 | ```javascript
129 | router.get('/:todoId', function(req, res) {
130 |   db.Todo.findById(req.params.todoId)
131 |   .then(function(foundTodo) {
132 |     res.json(foundTodo);
133 |   })
134 |   .catch(function(err) {
135 |     res.send(err);
136 |   })
137 | });
138 | ```
139 | 
140 | ## Update
141 | 
142 | ```javascript
143 | router.put('/:todoId', function(req, res) {
144 |   db.Todo.findOneAndUpdate({_id: req.params.todoId}, req.body, {new: true})
145 |   .then(function(todo) {
146 |     res.json(todo); // by default it responds with old data, before it was updated that's why we need {new: true}
147 |   })
148 |   .catch(function(err) {
149 |     res.send(err);
150 |   })
151 | });
152 | 
153 | module.exports = router;
154 | ```
155 | 
156 | ## Delete
157 | 
158 | ```javascript
159 | router.delete('/:todoId', function(req, res) {
160 |   db.Todo.remove({_id: req.params.todoId})
161 |   .then(function() {
162 |     res.json({message: 'We deleted it'});
163 |   })
164 |   .catch(function(err) {
165 |     res.send(err);
166 |   });
167 | });
168 | ```
169 | 
170 | ## Helpers
171 | 
172 | We can refactor routes file by moving all the logic inside our route handlers into a separate helper so that our routes will be really simple
173 | - Look up controllers in MVC framework
174 | - Are helper files the same as Controller files in the MVC framework?
175 |   - I’d consider the handlers/routesto be more controllers
176 | - MAYBE not true: controller is mainly for processing logic and bringing together database and templates whereas helper is mainly used for shared codes like dates
177 | - Helpers are either in a helpers folder (helpers/todos.js) or named (todos_helper.js)
178 | 
179 | Exports
180 | - Exports isn't exactly an alias for module.exports. exports.a = function b(){} means that module.exports.a is a function, but setting module.exports = function b(){} can not be done with just exports. If you want to do a "default" export and only export out a single thing, you have to use module.exports
181 | 
182 | Routes file:
183 | 
184 | ```javascript
185 | var express = require('express'),
186 |     router = express.Router(),
187 |     helpers = require('../helpers/todos');
188 | 
189 | 
190 | // index and post routes
191 | router.route('/')
192 |   .get(helpers.getTodos)
193 |   .post(helpers.createTodo);
194 | 
195 | // show, update, and delete
196 | router.route('/:todoId')
197 |   .get(helpers.getTodo)
198 |   .put(helpers.updateTodo)
199 |   .delete(helpers.deleteTodo);
200 | 
201 | module.exports = router;
202 | ```
203 | 
204 | Helpers file:
205 | 
206 | ```javascript
207 | var db = require('../models');
208 | 
209 | // exports object is initialized by node
210 | 
211 | exports.getTodos = function(req, res) {
212 |   db.Todo.find()
213 |   .then(function(todos) {
214 |     res.json(todos);
215 |   })
216 |   .catch(function(err) {
217 |     res.send(err);
218 |   });
219 | }
220 | 
221 | exports.createTodo = function(req, res) {
222 |   console.log(req.body);
223 |   db.Todo.create(req.body)
224 |   .then(function(newTodo) {
225 | 
226 |     res.status(201).json(newTodo);
227 |   })
228 |   .catch(function(err) {
229 |     res.send(err);
230 |   })
231 | }
232 | 
233 | exports.getTodo = function(req, res) {
234 |   db.Todo.findById(req.params.todoId)
235 |   .then(function(foundTodo) {
236 |     res.json(foundTodo);
237 |   })
238 |   .catch(function(err) {
239 |     res.send(err);
240 |   })
241 | }
242 | 
243 | exports.updateTodo = function(req, res) {
244 |   db.Todo.findOneAndUpdate({_id: req.params.todoId}, req.body, {new: true})
245 |   .then(function(todo) {
246 |     res.json(todo); // by default it responds with old data, before it was updated that's why we need {new: true}
247 |   })
248 |   .catch(function(err) {
249 |     res.send(err);
250 |   })
251 | }
252 | 
253 | exports.deleteTodo = function(req, res) {
254 |   db.Todo.remove({_id: req.params.todoId})
255 |   .then(function() {
256 |     res.json({message: 'We deleted it'});
257 |   })
258 |   .catch(function(err) {
259 |     res.send(err);
260 |   });
261 | }
262 | 
263 | module.exports = exports;
264 | ```
265 | 
266 | ## Serving a Static File
267 | 
268 | We can serve static files with res.sendFile
269 | 
270 | ```javascript
271 | app.use(express.static(__dirname + '/public'));
272 | app.use(express.static(__dirname + '/views'));
273 | 
274 | app.get('/', function(req, res) {
275 |   res.sendFile('index.html');
276 | });
277 | ```


--------------------------------------------------------------------------------
/advanced theory/ES2016 and 2017.md:
--------------------------------------------------------------------------------
  1 | # ES 2016 and 2017
  2 | 
  3 | #### Table of Contents
  4 | 
  5 | - [ES 2016 and 2017](#es-2016-and-2017)
  6 |       - [Table of Contents](#table-of-contents)
  7 |   - [ES 2016](#es-2016)
  8 |     - [Exponentiation Operator](#exponentiation-operator)
  9 |     - [includes](#includes)
 10 |   - [ES 2017](#es-2017)
 11 |     - [padStart](#padstart)
 12 |     - [padEnd](#padend)
 13 |     - [Async Functions](#async-functions)
 14 |       - [Await](#await)
 15 |       - [Object async](#object-async)
 16 |       - [Class async](#class-async)
 17 |       - [Error Handling](#error-handling)
 18 |       - [HTTP Requests with async](#http-requests-with-async)
 19 |       - [await with Promise.all](#await-with-promiseall)
 20 |     - [Object Rest and Spread](#object-rest-and-spread)
 21 |       - [Object Rest](#object-rest)
 22 |       - [Object Spread](#object-spread)
 23 | 
 24 | ## ES 2016
 25 | 
 26 | ### Exponentiation Operator
 27 | 
 28 | There exists a parameter to figure out value of one number to the power of another
 29 | 
 30 | ```javascript
 31 | // ES2015
 32 | var calculatedNumber = Math.pow(2, 4);
 33 | 
 34 | caltulatedNumber; // 16
 35 | 
 36 | // ES2016
 37 | var calculatedNumber = 2 ** 4;
 38 | 
 39 | calculatedNumber; // 16
 40 | 
 41 | // ES2015
 42 | var nums = [1, 2, 3, 4];
 43 | var total = 2;
 44 | 
 45 | for (let i = 0; i < nums.length; i++) {
 46 |   total Math.pow(total, nums[i]);
 47 | }
 48 | 
 49 | // ES2016
 50 | var nums = [1, 2, 3, 4];
 51 | var total = 2;
 52 | 
 53 | for (let i = 0; i < nums.length; i++) {
 54 |   total total **= nums[i];
 55 | }
 56 | ```
 57 | 
 58 | ### includes
 59 | 
 60 | In ES2015 we saw that strings have .includes which returns true if the value passed to it is included in the string
 61 | 
 62 | In ES2016 arrays now have .includes as well, which is a good replacement for using indexOf to check if the value exists inside of an array
 63 | 
 64 | ```javascript
 65 | // ES2015
 66 | var nums = [1, 2, 3, 4, 5];
 67 | nums.indexOf(3) > -1; // true
 68 | nums.indexOf(44) > -1; // false
 69 | 
 70 | // ES2016
 71 | var nums = [1, 2, 3, 4, 5];
 72 | nums.includes(3); // true
 73 | nums.includes(44); // false
 74 | ```
 75 | 
 76 | ## ES 2017
 77 | 
 78 | ### padStart
 79 | 
 80 | Allows us to pad (to place) a certain character number of times before the start of a string
 81 | - The first parameter is the totale length of the new string
 82 | - The second parameter is what to pad with from the start; the default is an empty space
 83 | 
 84 | This is useful when we need to have strings that are all the same length but our input might now always have that. so maybe we want to pad some input with zeros or some other operator
 85 | 
 86 | ```javascript
 87 | 'awesome'.padStart(10); // '   awesome'
 88 | 'awesome'.padStart(10, '!'); // '!!!awesome'
 89 | ```
 90 | 
 91 | ### padEnd
 92 | 
 93 | The same as padStart, but places characters to the end of a string
 94 | 
 95 | ```javascript
 96 | 'awesome'.padEnd(10, '!'); // 'awesome!!!'
 97 | ```
 98 | 
 99 | ### Async Functions
100 | 
101 | A special kind of function that is created using the word 'async'
102 | 
103 | The purpose of async functions is to simplify writing asynchronous code, specifically Promises
104 | 
105 | When the async function is invoked, a promise is returned to us and will resolve with whatever value is returned from the function
106 | 
107 | ```javascript
108 | async function first() {
109 |   return 'We did it!';
110 | }
111 | 
112 | first(); // returns a promise
113 | first().then(val => console.log(val)); // 'We did it!'
114 | ```
115 | 
116 | What makes them really special is the 'await' keyword
117 | 
118 | #### Await
119 | 
120 | A reserved keyword that can only be used inside of async functions
121 | 
122 | Await pauses the execution of the async function and is followed by a Promise; the 'await' keyword waits for the promise to resolve, and then resumes the async function's execution and returnes the resolved value (like a pause button)
123 | 
124 | Await allows us to write async code that reads like it's sync (we can remove the hassle of nested callbacks, promise chains or multiple yield statements and generator functions)
125 | 
126 | ```javascript
127 | async function getMovieData() {
128 |   console.log('starting!');
129 |   var movieData = await $.getJSON('https://omdbapi.com?t=titanic&apikey=thewdb');
130 |   // this line does NOT run until the promise (await) is resolved!
131 |   console.log('all done!');
132 |   console.log(movieData);
133 | }
134 | 
135 | getMovieData(); // logs an object with data about the movie
136 | // we don't need .then or callback, or yield
137 | ```
138 | 
139 | #### Object async
140 | 
141 | We can also place async functions as methods inside objects by prefixing the method with the word async and using ES 2015 object method notation to write the function
142 | 
143 | ```javascript
144 | var movieCollector = {
145 |   data: 'titanic',
146 |   async getMovie() {
147 |     var response = await $.getJSON(`https://omdbapi.com?t=${this.data}&apikey=thewdb`);
148 |     console.log(response);
149 |   }
150 | }
151 | 
152 | movieCollector.getMovie();
153 | ```
154 | 
155 | #### Class async
156 | 
157 | We can also place async functions as instance methods with ES2015 class syntax
158 | 
159 | ```javascript
160 | class MovieData {
161 |   constructor(name) {
162 |     this.name = name;
163 |   }
164 |   async getMovie() {
165 |     var response = await $.getJSON(`https://omdbapi.com?t=${this.name}&apikey=thewdb`);
166 |     console.log(response);
167 |   }
168 | }
169 | 
170 | var m = new MovieData('shrek');
171 | m.getMovie();
172 | ```
173 | 
174 | This seems great, but we're making a dangerous assumption - that our promises will be resolved successfully
175 | 
176 | #### Error Handling
177 | 
178 | If a promise is rejected using await, JS will throw an error, so we can easily use a try/catch statement inside of the try block to handle errors
179 | 
180 | ```javascript
181 | async function getUser(user) {
182 |   try {
183 |     var response = await $.getJSON(`https://api.github.com/users/${user}`);
184 |     console.log(response.name);
185 |   } catch(e) {
186 |     console.log('User does not exist!');
187 |   }
188 | }
189 | 
190 | getUser('elie'); // Elie Schoppik
191 | getUser('asdasdasd'); // User does not exist!
192 | ```
193 | 
194 | #### HTTP Requests with async
195 | 
196 | ```javascript
197 | // two requests are made sequentially, not parallelly
198 | async function getMovieData() {
199 |   var responseOne = await $.getJSON('https://omdbapi.com?t=titanic&apikey=thewdb');
200 |   // this response two will not begin until the entire responseOne is resolved
201 |   // imagine if it takes several seconds, our app would slow down
202 |   var responseTwo = await $.getJSON('https://omdbapi.com?t=shrek&apikey=thewdb');
203 |   console.log(responseOne);
204 |   console.log(responseTwo);
205 | }
206 | 
207 | getMovieData();
208 | ```
209 | 
210 | We can avoid this by returning the promises right away and make HTTP requests in parallel, and then 'await' their resolved promise
211 | 
212 | ```javascript
213 | async function getMovieData() {
214 |   var titanicPromise = $.getJSON('https://omdbapi.com?t=titanic&apikey=thewdb');
215 |   var shrekPromise = $.getJSON('https://omdbapi.com?t=shrek&apikey=thewdb');
216 | 
217 |   var titanicData = await titanicPromise;
218 |   var shrekData = await shrekPromise;
219 | 
220 |   console.log(titanicData);
221 |   console.log(shrekData);
222 | }
223 | 
224 | getMovieData();
225 | ```
226 | 
227 | #### await with Promise.all
228 | 
229 | We can use Promise.all to await multiple resolved promises
230 | 
231 | ```javascript
232 | // we're waiting for an array of promises to resolve using the 'await' and Promise.all
233 | // Promise.all accepts an array of promises, and returns a promise which when resolved returns an array of resolved values
234 | // instead of .then and a callback, we can simply await the resolution of promise.all and then access those values in our moviesList array
235 | async function getMovieData(first, second) {
236 |   var moviesList = await Promise.all([
237 |     $.getJSON(`https://omdbapi.com?t=${first}&apikey=thewdb`);
238 |     $.getJSON(`https://omdbapi.com?t=${second}&apikey=thewdb`);
239 |   ]);
240 |   console.log(moviesList[0].Year);
241 |   console.log(moviesList[1].Year);
242 | }
243 | 
244 | getMovieData('shrek', 'blade');
245 | 
246 | // 2001
247 | // 1998
248 | ```
249 | 
250 | ### Object Rest and Spread
251 | 
252 | ES2015 provided the rest and spread operator for arrays
253 | - The rest operator was used as a parameter to functions and gathered the remaining arguments as an array
254 | - The spread operator was useful for spreading out values in an array as comma separated values
255 | 
256 | #### Object Rest
257 | 
258 | Gather remaining (rest) of keys and values in an object, and create a new one out of them
259 | 
260 | ```javascript
261 | var instructor = {first: 'Elie', last: 'Schoppik', job: 'instructor', numSiblings: 3};
262 | 
263 | // If we want to creates 'first' and 'last' variables, how  can we collect the remaining keys and values? With rest operator
264 | var {first, last, ...data} = instructor; // destructuring the object
265 | first; // 'Elie'
266 | last; // 'Schoppik'
267 | data; // {job:'instructor', numSiblings:3}
268 | ```
269 | 
270 | #### Object Spread
271 | 
272 | Spread out keys and values from one object to another
273 | 
274 | Great for creating new objects starting with default values and is a more concise alternative to Object.assign (but similar to it)
275 | 
276 | ```javascript
277 | var instructor = {first: 'Elie', last: 'Schoppik', job: 'instructor'};
278 | 
279 | // instructor2 will accept all of the keys and values of instructor and overwrite the first and last keys with 'Tim' and 'Garcia'
280 | var instructor2 = {...instructor, first:'Tim', last:'Garcia'};
281 | 
282 | var defaults = {job: 'instructor', ownsCat: true, ownsDog: true};
283 | var matt = {...defaults, ownsCat: false};
284 | var colt = {...defaults, ownsDog: false};
285 | ```


--------------------------------------------------------------------------------
/advanced theory/advanced array methods.md:
--------------------------------------------------------------------------------
  1 | # Advanced Array Methods
  2 | 
  3 | #### Table of Contents
  4 | 
  5 | - [Advanced Array Methods](#advanced-array-methods)
  6 |       - [Table of Contents](#table-of-contents)
  7 |   - [forEach](#foreach)
  8 |   - [map](#map)
  9 |   - [filter](#filter)
 10 |   - [some](#some)
 11 |   - [every](#every)
 12 |   - [reduce](#reduce)
 13 | 
 14 | ## forEach
 15 | 
 16 | - Iterates through an array
 17 | - Runs a callback function on each value in the array
 18 | - Returns 'undefined' ALWAYS when the loop ends (i.e. storing in a var or returning in a function won't work)
 19 | 
 20 | ```javascript
 21 | // array  method  callback each value&index entire
 22 | //                            in the arr   array
 23 | [1, 2, 3].forEach(function(value, index, array) {
 24 |   // the callback will be executed 3 times since there are 3 values in the array
 25 |   // each time value and index are different
 26 |   // we can call parameters whatever we want
 27 |   // we don't always need all three parameters, but their order is important
 28 | });
 29 | 
 30 | // implementation of forEach
 31 | function forEach(array, callback) {
 32 |   for (var i = 0; i < array.length; i++) {
 33 |     callback(array[i], i, array);
 34 |   }
 35 | }
 36 | 
 37 | // using forEach
 38 | function halfValues(arr) {
 39 |   var newArr = [];
 40 |   arr.forEach(function(val) {
 41 |     newArr.push(val / 2);
 42 |   });
 43 |   return newArr;
 44 | }
 45 | 
 46 | halfValues[2, 4, 6]; // [1, 2, 3]
 47 | ```
 48 | 
 49 | ## map
 50 | 
 51 | Basically it is forEach which transforms an array into another array with different values but of the same length
 52 | 
 53 | - creates a new array
 54 | - iterates through an array
 55 | - runs a callback function for each value in the array
 56 | - adds the result of that callback function to the new array
 57 | - returns the new array
 58 | 
 59 | ```javascript
 60 | var arr = [1, 2, 3];
 61 | 
 62 | arr.map(function(value, index, array) {
 63 |   return value * 2; // if no return, there is an array of undefined's
 64 | });
 65 | 
 66 | // [2, 4, 6]
 67 | 
 68 | // implementation
 69 | function map(arr, callback) {
 70 |   var newArr = [];
 71 |   for (var i = 0; i < arr.length; i++) {
 72 |     newArr.push(callback(arr[i], i, arr));
 73 |   }
 74 |   return newArr;
 75 | }
 76 | 
 77 | // usage
 78 | // we could use forEach here, but map is a bit more friendly since it already returns a new array to us
 79 | // forEach can be used if we want to overwrite values in an array or change something externally
 80 | // when we would like a new array to be returned, especially one of the same length, map should always be used
 81 | function tripleValues(arr) {
 82 |   return arr.map(function(value) {
 83 |     return value * 3;
 84 |   });
 85 | }
 86 | 
 87 | tripleValues([1, 2, 3]); // [3, 6, 9]
 88 | 
 89 | function onlyFirstName(arr) {
 90 |   return arr.map(function(val) {
 91 |     return val.first;
 92 |   });
 93 | }
 94 | 
 95 | onlyFirstName([{first: 'Tim', last: 'Garcia'}, {first: 'Matt', last: 'Lane'}]);
 96 | 
 97 | // ['Tim', 'Matt']
 98 | ```
 99 | 
100 | ## filter
101 | 
102 | .filter helps to return arrays of the same or smaller size
103 | 
104 | - creates a new array
105 | - iterates through an array
106 | - runs a callback function on each value in the array
107 | - if the callback function returns trues, that value will be added to the new array
108 | - if the callback function returns false, that value will ve ignored from the new array
109 | - the result of the callback will ALWAYS be a boolean
110 | 
111 | ```javascript
112 | var arr = [1, 2, 3];
113 | 
114 | arr.filter(function(value, index, array) {
115 |   // no need for an if statement, just return an expression that evaluates to true or false
116 |   return value > 2;
117 | });
118 | 
119 | // [3]
120 | 
121 | var instructors = [
122 |   {name: 'Elie'},
123 |   {name: 'Tim'},
124 |   {name: 'Colt'},
125 |   {name: 'Matt'}
126 | ];
127 | 
128 | instructors.filter(function(value, index, array) {
129 |   return value.name.length > 3;
130 | });
131 | 
132 | // [{name: 'Elie'}, {name: 'Colt'}, {name: 'Matt'}];
133 | 
134 | // implementation
135 | function filter(array, callback) {
136 |   var newArr = [];
137 |   for (var i = 0; i < array.length; i++) {
138 |     if (callback(array[i], i, array)) {
139 |       newArr.push(array[i])l
140 |     }
141 |   }
142 |   return newArr;
143 | }
144 | 
145 | // usage
146 | function onlyFourLetters(arr) {
147 |   return arr.filter(function(value) {
148 |     return value.length === 4;
149 |   });
150 | }
151 | 
152 | onlyFourLetters(['Rusty', 'Matt', 'Moxie', 'Colt']); // ['Matt', 'Colt']
153 | 
154 | function divisibleByThree(arr) {
155 |   return arr.filter(function(value) {
156 |     return value % 3 === 0;
157 |   });
158 | }
159 | 
160 | divisibleByThree([1, 2, 3, 4, 5, 6, 7, 8, 9]); // [3, 6, 9]
161 | ```
162 | 
163 | ## some
164 | 
165 | - iterates through an array
166 | - runs a callback on each value in the array
167 | - if the callback returns true for at least one single value, return true
168 | - otherwise, return false
169 | - the result of the callback will ALWAYS be a boolean
170 | 
171 | ```javascript
172 | var arr = [1, 2, 3];
173 | 
174 | arr.some(function(value, index, array) {
175 |   return value < 2;
176 | });
177 | 
178 | // true
179 | 
180 | arr.some(function(value, index, array) {
181 |   return value > 4;
182 | });
183 | 
184 | // false
185 | 
186 | // implementation
187 | function some(array, callback) {
188 |   for (var i = 0; i < array.length; i++) {
189 |     if (callback(array[i], i, array)) {
190 |       return true;
191 |     }
192 |   }
193 |   return false;
194 | }
195 | 
196 | // usage
197 | function hasEvenNumber(arr) {
198 |   return arr.some(function(value) {
199 |     return value % 2 === 0;
200 |   });
201 | }
202 | 
203 | hasEvenNumber([1, 2, 3, 4]); // true
204 | hasEvenNumber([1, 3, 5]); // false
205 | 
206 | function hasComme(str) {
207 |   return str.split('').some(function(value) {
208 |     return value === ',';
209 |   });
210 | }
211 | 
212 | hasComma('This is wonderful'); // false
213 | hasComma('This, is wonderful'); // true
214 | ```
215 | 
216 | ## every
217 | 
218 | - iterates through an array
219 | - runs a callback on each value in the array
220 | - if the callback returns true for every single value, return false
221 | - otherwise, return true
222 | - the result of the callback will ALWAYS be a boolean
223 | 
224 | ```javascript
225 | var arr = [-1, -2, -3];
226 | 
227 | arr.every(function(value, index, array) {
228 |   return value < 0;
229 | });
230 | 
231 | // true
232 | 
233 | var arr = [-1, 2, -3];
234 | 
235 | arr.every(function(value, index, array) {
236 |   return value < 0;
237 | });
238 | 
239 | // false
240 | 
241 | // implementation
242 | function every(array, callback) {
243 |   for (var i = 0; i < array.length; i++) {
244 |     if (callback(array[i], i, array) === false) {
245 |       return false;
246 |     }
247 |   }
248 |   return true;
249 | }
250 | 
251 | // usage
252 | function allLowerCase(str) {
253 |   return str.split('').every(function(value) {
254 |     return value === value.toLowerCase();
255 |   });
256 | }
257 | 
258 | allLowerCase('this is really nice'); // true
259 | allLowerCase('this is Really nice'); // false
260 | 
261 | function allArrays(arr) {
262 |   return arr.every(Array.isArray);
263 | }
264 | 
265 | allArrays([[1], [2], [3, 4]]); // true
266 | arrArrays([[1], [2], {}]); // false
267 | ```
268 | 
269 | ## reduce
270 | 
271 | - accepts a callback and an optional second parameter
272 | - iterates through an array
273 | - runs a callback on each value in the array
274 | - the first parameter to the callback is either the first value in the array or the optional second parameter
275 | - the first parameter to the callback is often called 'accumulator'
276 | - the returned value from the callback becomes the new value of accumulator
277 | - whatever is returned from the callback function, becomes the new value of the accumulator
278 | 
279 | ```javascript
280 | [1, 2, 3].reduce(function(accumulator, nextValue, index, array) {
281 |   // [1, 2, 3] - array
282 |   // reduce - method
283 |   // function - callback
284 |   // accumulator - first value in array or optional second parameter
285 |   // second value in array or first, if optional second parameter is passed
286 |   // index - each index in the array
287 |   // array - the entire array
288 | 
289 |   // whatever is returned inside here, will be the value of accumulator in the next iteration
290 | }, optional second parameter)
291 | 
292 | // example
293 | var arr = [1, 2, 3, 4, 5];
294 | 
295 | arr.reduce(function(accumulator, nextValue) {
296 |   return accumulator + nextValue;
297 | });
298 | 
299 | // accumulator  nextValue  returned value
300 | //      1           2           3
301 | //      3           3           6
302 | //      6           4           10
303 | //      10          5           15
304 | 
305 | // adding a second parameter
306 | var arr = [1, 2, 3, 4, 5];
307 | 
308 | arr.reduce(function(accumulator, nextValue) {
309 |   return accumulator + nextValue;
310 |   // not returning - undefined
311 | }, 10);
312 | 
313 | // accumulator  nextValue  returned value
314 | //      10          1           11
315 | //      11          2           13
316 | //      13          3           16
317 | //      16          4           20
318 | //      20          5           25
319 | ```
320 | 
321 | Using reduce to return different data types
322 | 
323 | ```javascript
324 | var names = ['Tim', 'Matt', 'Colt', 'Elie'];
325 | 
326 | names.reduce(function(accumulator, nextValue){
327 |   return accumulator += ' ' + nextValue;
328 | }, 'The instructors are');
329 | 
330 | // accumulator               nextValue       returned value
331 | // The instructors are          Tim       The instructors are Tim
332 | // The instructors are Tim      Matt      The instructors are Tim Matt
333 | //                              ...
334 | // The instructors are Tim Matt Colt Elie
335 | 
336 | var arr = [5, 4, 1, 4, 5];
337 | 
338 | arr.reduce(function(accumulator, nextValue) {
339 |   if (nextValue in accumulator) {
340 |     accumulator[nextValue]++;
341 |   } else {
342 |     accumulator[nextValue] = 1;
343 |   }
344 |   return accumulator;
345 | }, {});
346 | 
347 | // {5: 2, 4: 2, 1: 1}
348 | ```
349 | 
350 | Usage of reduce
351 | 
352 | ```javascript
353 | function sumOddNumbers(arr) {
354 |   return arr.reduce(function(accumulator, nextValue) {
355 |     if (nextValue % 2 !== 0) {
356 |       accumulator += nextValue;
357 |     }
358 |     return accumulator;
359 |   }, 0);
360 | }
361 | 
362 | sumOddNumbers([1, 2, 3, 4, 5]); // 9
363 | 
364 | function createFullName(arr) {
365 |   return arr.reduce(function(accumulator, nextValue) {
366 |     accumulator.push(nextValue.first + ' ' + nextValue.last);
367 |     return accumulator;
368 |   }, []);
369 | }
370 | 
371 | createFullName([{first: 'Colt', last: 'Steele'}, {first: 'Matt', last: 'Lane'}]);
372 | // ['Colt Steele', 'Matt Lane']
373 | ```


--------------------------------------------------------------------------------
/advanced theory/AJAX.md:
--------------------------------------------------------------------------------
  1 | # AJAX
  2 | 
  3 | Asynchronous Javascript and XML
  4 | 
  5 | #### Table of Contents
  6 | 
  7 | - [AJAX](#ajax)
  8 |       - [Table of Contents](#table-of-contents)
  9 |   - [What Is AJAX](#what-is-ajax)
 10 |     - [XML and JSON](#xml-and-json)
 11 |       - [XML](#xml)
 12 |       - [JSON](#json)
 13 |   - [Requests](#requests)
 14 |     - [XMLHTTP Request (XHR)](#xmlhttp-request-xhr)
 15 |       - [Problems with XHR](#problems-with-xhr)
 16 |     - [Fetch](#fetch)
 17 |       - [Fetch Options](#fetch-options)
 18 |       - [Fetch Error Handling](#fetch-error-handling)
 19 |       - [Problem with Fetch](#problem-with-fetch)
 20 |   - [jQuery and Axios](#jquery-and-axios)
 21 |     - [jQuery](#jquery)
 22 |       - [$.ajax](#ajax)
 23 |       - [$.get](#get)
 24 |       - [$.post](#post)
 25 |       - [$.json](#json)
 26 |     - [Axios](#axios)
 27 |       - [Axios Error Handling](#axios-error-handling)
 28 | 
 29 | ## What Is AJAX
 30 | 
 31 | AJAX is not:
 32 | - A library
 33 | - A framework
 34 | - A technology
 35 | 
 36 | AJAX is an approach to webdev, a concept, a way of structuring apps
 37 | 
 38 | It appeared it 2005 as a way to combine HTML, CSS, JS, DOM, XMLHTTP Requests and create apps that can update without refreshing
 39 | 
 40 | With AJAX, websites can send and request data from a server in the background without disturbing the current page (led to today's single page apps with features like infinite scroll)
 41 | 
 42 | Making requests with Javascript:
 43 | - XMLHTTP Request
 44 | - Fetch API
 45 | - 3rd Party - jQuery, Axios, etc.
 46 | 
 47 | ### XML and JSON
 48 | 
 49 | They are data formats used in response data (mostly); API's don't respond with HTML, they respond with pure data
 50 | 
 51 | #### XML
 52 | 
 53 | Extended Markup Language
 54 | 
 55 | Semantically similar to HTML, but it does not describe presentation like HTML does
 56 | 
 57 | ```xml
 58 | <item>
 59 |   <title>Some title</title>
 60 |   <author>Some author</author>
 61 | </item>
 62 | ```
 63 | 
 64 | #### JSON
 65 | 
 66 | JavaScript Object Notation replaced XML (so mostly it's now AJAJ); it looks almost exactly like JS Obj
 67 | 
 68 | ```JSON
 69 | 'item': {
 70 |   title: 'Some title',
 71 |   author: 'Some author'
 72 | }
 73 | ```
 74 | 
 75 | ## Requests
 76 | 
 77 | Workflow is usually event -> request -> data
 78 | 
 79 | ### XMLHTTP Request (XHR)
 80 | 
 81 | The first, original way to make requests (rarely used)
 82 | 
 83 | ```javascript
 84 | var XHR = new XMLHttpRequest(); // create new instance of request
 85 | 
 86 | XHR.onreadystatechange = function() {
 87 |   // readyState can have 5 different states (from 0 to 4: unsent, opened, headers_receiver, loading, done)
 88 |   if (XHR.readyState == 4 && XHR.status == 200) {
 89 |     console.log(XHR.responseText);
 90 |   } else {
 91 |     console.log('There was a problem!');
 92 |   }
 93 | };
 94 | 
 95 | XHR.open('GET', 'https://api.github.com/zen'); // we tell what type of request we want to do, and URL
 96 | XHR.send(); // what we send, we initiate request
 97 | ```
 98 | 
 99 | #### Problems with XHR
100 | 
101 | 1. Ugly, bulky syntax
102 | 2. It's 16 years old
103 | 3. No Streaming
104 | 
105 | ### Fetch
106 | 
107 | Is a replacement, update for XHR
108 | 
109 | ```javascript
110 | fetch(url) // basically, this is a request already; it returns a promise
111 | .then(function(res) {
112 |   console.log(res); // whole response object; we can use something like res.status
113 | })
114 | .catch(function(error) {
115 |   console.log(error);
116 | });
117 | ```
118 | 
119 | Parsing JSON with Fetch:
120 | 
121 | ```javascript
122 | fetch(url).then(function(res) {
123 |   return res.json(); // it is promise as well (which is returned to .then after fetch(url))
124 |   // .then (from below) can be inserted here as well (not after the closing brackets of the first .then)
125 |   // functionally they are the same
126 | }).then(function(data) {
127 |   console.log(data); // we can work with data as an object now
128 | }).catch(function() {
129 |   console.log('Problem!');
130 | });
131 | ```
132 | 
133 | #### Fetch Options
134 | 
135 | ```javascript
136 | fetch(url, {
137 |   method: 'POST', // get by default
138 |   body: JSON.stringify({
139 |       name: 'blue',
140 |       login: 'bluecat',
141 |     }) // including object with options
142 |     // we don't have to use stringify, but it makes it easier, we don't have to make manualle eash of this a string, worry about " or '
143 |     // also we can provide headers and other stuff, see more at https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
144 | })
145 | .then(function(response) {
146 |   // do something
147 | })
148 | .catch(function(error) {
149 |   // handle error
150 | });
151 | ```
152 | 
153 | #### Fetch Error Handling
154 | 
155 | Syntax:
156 | 
157 | ```javascript
158 | .fetch(url)
159 | .then(function (res) {
160 |   // we put error checking in its own .then
161 |   // first thing we want to do is to ckeck if everything is ok
162 |   if (!res.ok) {
163 |     throw Error(404); // up to us
164 |     // that will trigger .catch below
165 |   }
166 |   return res; // if things are ok, we return response and .then is run
167 | }).then(function (response) {
168 |   console.log('ok');
169 | }).catch(function(error) {
170 |   console.log(error);
171 | });
172 | ```
173 | 
174 | Example:
175 | 
176 | ```javascript
177 | var btn = document.querySelector('button');
178 | 
179 | btn.addEventListener('click', function() {
180 |   var url = 'https://api.github.com/users/coltasdas';
181 |   fetch(url)
182 |   .then(function() {
183 |     console.log('EVERYTHING IS FINE!');
184 |   })
185 |   .catch(function() {
186 |     console.log('There is a problem');
187 |     // if the user is wrong (not 'Colt'), 'Everything is fine' will be returned anyway
188 |     // we will see 'There is a problem' if there is a problem with a request itself, e.g. if the internet is off, or there is a problem connection, or with credentials, but not with the actual response
189 |   });
190 | });
191 | 
192 | // we need to rewrite our code to handle different statuses
193 | 
194 | btn.addEventListener('click', function() {
195 |   var url = 'https://api.github.com/users/coltasdas';
196 |   fetch(url)
197 |   .then(handleErrors)
198 |   .then(function(request) {
199 |     // to check the status we can put if request.status === 200... but we can use request.ok
200 |     // request.ok is a built-in property which can be used instead of 'if status != 200' or something
201 |     if (!request.ok) {
202 |       // throw error
203 |       console.log('Error with response status!')
204 |     }
205 |     // this code will still run
206 |     console.log('EVERYTHING IS FINE!');
207 |   })
208 |   .catch(function() {
209 |     console.log('There is a problem');
210 |   });
211 | });
212 | 
213 | // refactor using different promises to streamline things
214 | btn.addEventListener('click', function() {
215 |   var url = 'https://api.github.com/users/coltasdas';
216 |   fetch(url)
217 |   .then(handleErrors)
218 |   .then(function(request) {
219 |     if (!request.ok) {
220 |       throw Error(request.status);
221 |     }
222 |     return request // we need to return something if there is no error
223 |   })
224 |   .then(function(request) {
225 |     console.log('Everything is fine');
226 |     console.log(request);
227 |   })
228 |   .catch(function(error) {
229 |     console.log(error); // equals to whatever we 'throw', i.e. here response status
230 |   });
231 | });
232 | 
233 | // refactor code
234 | var btn = document.querySelector('button');
235 | btn.addEventListener('click', function() {
236 |   var url = 'https://api.github.com/users/coltasdas';
237 |   fetch(url)
238 |   .then(handleErrors)
239 |   .then(function(request) {
240 |     console.log('EVERYTHING IS FINE!');
241 |     console.log(request);
242 |   })
243 |   .catch(function(error) {
244 |     console.log(error);
245 |   });
246 | });
247 | 
248 | function handleErrors (request) {
249 |   if (!request.ok) {
250 |     throw Error(request.status);
251 |   }
252 |   return request;
253 | }
254 | ```
255 | 
256 | #### Problem with Fetch
257 | 
258 | The main problem is browser compatibility (IE doesn't have fetch at all)
259 | 
260 | ---
261 | 
262 | ## jQuery and Axios
263 | 
264 | ### jQuery
265 | 
266 | It can be used not only for manipulating the DOM, but for requests as well (without fetch)
267 | 
268 | We need to include it first (look for jQuery CDN)
269 | 
270 | #### $.ajax
271 | 
272 | This is the main, 'base' method, other three are shorthand methods
273 | 
274 | It just creates an XHR under the hood
275 | - https://api.jquery.com/jQuery.ajax/ (there are examples at bottom)
276 | - ``Query.ajaxSettings.xhr = function() {
277 | 	try {
278 | 		return new window.XMLHttpRequest();
279 | 	} catch ( e ) {}
280 | };``
281 | 
282 | 
283 | 
284 | ```javascript
285 | $.ajax({
286 |   method: 'GET',
287 |   url: 'some.api.com',
288 |   // datatype: 'json',
289 | })
290 | .done(function(res) {
291 |   console.log(res);
292 |   // data is automatically parsed (dataType parameter); we don't need to JSON.parse or data.json().then
293 |   // default: intelligent guess, e.g. JSON
294 |   // it's better to be explicit
295 | })
296 | .fail(function() {
297 |   // do something
298 |   // fail will automatically check response code, i.e. will trigger on 404, not only problem with request itself
299 | })
300 | ```
301 | 
302 | #### $.get
303 | 
304 | Load data from the server using a HTTP GET request ($.ajax method: 'get')
305 | - https://api.jquery.com/jQuery.get/
306 | 
307 | ```javascript
308 | $("#getBtn").click(function(){
309 |   $.get('https://api.github.com/users/colt')
310 |   // note that parameters are strings, so jQuery.get( url [, data ] [, success ] [, dataType ] )
311 |   .done(function(data){
312 |     console.log(data);
313 |   })
314 |   .fail(function(){
315 |     console.log("ERROR!");
316 |   })
317 | });
318 | ```
319 | 
320 | #### $.post
321 | 
322 | Load data from the server using a HTTP POST request
323 | - https://api.jquery.com/jQuery.post/
324 | 
325 | ```javascript
326 | $("#postBtn").click(function(){
327 |   var data = {name: "Charlie", city: "Florence"};
328 |   $.post("www.catsarecoolandsoaredogs.com", data)
329 |   .done(function(data){
330 |     console.log("HI!");
331 |   })
332 |   .fail(function(){
333 |     console.log("ERROR!");
334 |   })
335 | });
336 | ```
337 | 
338 | #### $.json
339 | 
340 | Load JSON-encoded data from the server using a GET HTTP request
341 | - https://api.jquery.com/jQuery.getJSON/
342 | 
343 | ```javascript
344 | $("#getJSONBtn").click(function(){
345 |   $.getJSON("https://api.github.com/users/colt")
346 |   .done(function(data){
347 |     console.log(data);
348 |   })
349 |   .fail(function(){
350 |     console.log("PROBLEM!");
351 |   })
352 | });
353 | ```
354 | 
355 | ### Axios
356 | 
357 | If we don't need whole jQuery (there are many features which could be not needed), we can use some other library for making request, such as Axios
358 | 
359 | Axios is a lightweight HTTP request library (creates XHR under the hood; we need to install or include it first)
360 | - Make XMLHttpRequests from the browser
361 | - Make http requests from node.js
362 | - Supports the Promise API
363 | - Intercept request and response
364 | - Transform request and response data
365 | - Cancel requests
366 | - Automatic transforms for JSON data
367 | - Client side support for protecting against XSRF
368 | - https://github.com/axios/axios
369 | 
370 | ```javascript
371 | // basic example
372 | axios.get(url)
373 | .then(function(res) {
374 |   console.log(res.data)
375 | })
376 | .catch(function(e) {
377 |   console.log(e);
378 | })
379 | 
380 | // usage example (get)
381 | var url = 'https://opentdb.com/api.php?amount=1';
382 | axios.get(url)
383 | .then(function(res){
384 |   console.log(res.data.results[0].question);
385 | })
386 | .catch(function(){
387 |   console.log("ERR");
388 | })
389 | ```
390 | 
391 | #### Axios Error Handling
392 | 
393 | ```javascript
394 | // html:
395 | // <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
396 | // <button>CLICK</button>
397 | // <section id="comments"></section>
398 | 
399 | var btn = document.querySelector("button");
400 | var section = document.querySelector("#comments");
401 | btn.addEventListener("click", sendRequest);
402 | 
403 | function sendRequest(){
404 |   axios.get("https://jsonplaaskjldceholder.typicode.com/comments", {
405 |     params: {
406 |       postId: 1 // we can pass in an object with parameters (instead of ?postId=1 etc.)
407 |     }
408 |   })
409 |   .then(addComments)
410 |   .catch(handleErrors)
411 | }
412 | 
413 | function addComments(res) {
414 |   res.data.forEach(function(comment) {
415 |     appendComment(comment);
416 |   });
417 | }
418 | 
419 | function appendComment(comment) {
420 |   var newP = document.createElement("p");
421 |   newP.innerText = comment.email;
422 |   section.appendChild(newP);
423 | }
424 | 
425 | function handleErrors(err) {
426 |     if (err.response) {
427 |       // err.response if used for bad statuses
428 |       console.log("Problem With Response ", err.response.status);
429 |     } else if (err.request) {
430 |       // err.request is used for bad requests
431 |       console.log("Problem With Request!");
432 |     } else {
433 |       console.log('Error', err.message);
434 |     }
435 |   }
436 | ```


--------------------------------------------------------------------------------
/advanced theory/css3.md:
--------------------------------------------------------------------------------
  1 | # CSS 3
  2 | 
  3 | #### Table of Contents
  4 | 
  5 | - [CSS 3](#css-3)
  6 |       - [Table of Contents](#table-of-contents)
  7 |   - [CSS Animations](#css-animations)
  8 |     - [Pseudoclasses](#pseudoclasses)
  9 |       - [:hover](#hover)
 10 |       - [:focus](#focus)
 11 |       - [:active](#active)
 12 |     - [Transform](#transform)
 13 |       - [Transform: Translate](#transform-translate)
 14 |       - [Transform: Scale](#transform-scale)
 15 |       - [Transform-Origin](#transform-origin)
 16 |       - [Transform: Rotate](#transform-rotate)
 17 |       - [Browser (Vendor) Prefixes](#browser-vendor-prefixes)
 18 |     - [Transitions](#transitions)
 19 |       - [Transition Shorthands](#transition-shorthands)
 20 |       - [What Can Be Transitioned](#what-can-be-transitioned)
 21 |       - [What Should Be Transitioned](#what-should-be-transitioned)
 22 |     - [Keyframes](#keyframes)
 23 |     - [CSS Animation Properties](#css-animation-properties)
 24 |       - [Animation Shorthand](#animation-shorthand)
 25 |   - [Layout With Flexbox](#layout-with-flexbox)
 26 |     - [Intro to Flexbox](#intro-to-flexbox)
 27 |       - [Display: Flex Property](#display-flex-property)
 28 |       - [Flex Terminology](#flex-terminology)
 29 |     - [Flexbox Properties of Container](#flexbox-properties-of-container)
 30 |       - [Flex-direction](#flex-direction)
 31 |       - [Flex-wrap](#flex-wrap)
 32 |       - [Justify-content](#justify-content)
 33 |       - [Align-items](#align-items)
 34 |       - [Align-content](#align-content)
 35 |     - [Flexbox Properties of Item](#flexbox-properties-of-item)
 36 |       - [Align-self](#align-self)
 37 |       - [Order](#order)
 38 |       - [Flex](#flex)
 39 |       - [Flex-basis](#flex-basis)
 40 |       - [Flex-grow](#flex-grow)
 41 |       - [Flex-shrink](#flex-shrink)
 42 |     - [Holy Grail Layout](#holy-grail-layout)
 43 |     - [Flexbox Browser Support](#flexbox-browser-support)
 44 |     - [Responsiveness](#responsiveness)
 45 | 
 46 | ## CSS Animations
 47 | 
 48 | ### Pseudoclasses
 49 | 
 50 | Usually animations are triggered by something, they do not happen on page load
 51 | 
 52 | Pseudoclasses are commonly used triggers, special selectors which are added to selector and specify a special state of the selected elements (not only related to animations)
 53 | - They let you apply a style to an element not only in relation to the content fo the document tree, but also in relation to external factors, e.g.
 54 |   - History of the navigator (:visited)
 55 |   - Status of the content (:checked)
 56 |   - Position of the mouse (:hover)
 57 | 
 58 | Syntax:
 59 | 
 60 | ```css
 61 | selector:pseudo-class {
 62 |   property: value;
 63 | }
 64 | ```
 65 | 
 66 | #### :hover
 67 | 
 68 | Trigger by a user mousing over (not necessarily activating it)
 69 | 
 70 | ```css
 71 | div:hover {
 72 |   background: purple;
 73 | }
 74 | ```
 75 | 
 76 | #### :focus
 77 | 
 78 | Triggers when an element 'receives focus' (triggered when the user clicks, taps on an element or selects with 'tab')
 79 | 
 80 | ```css
 81 | input:focus {
 82 |   color: red;
 83 | }
 84 | ```
 85 | 
 86 | #### :active
 87 | 
 88 | Triggers when an element is 'being activated by user' (click on an element (actual action is happening) or when it's selected by 'tab', commonly used on \<a> or \<button>)
 89 | 
 90 | ```css
 91 | button:active {
 92 |   color: green;
 93 | }
 94 | ```
 95 | 
 96 | ### Transform
 97 | 
 98 | It lets you manipulate the coordinate space of the CSS visual formatting model, i.e. lets you move, warp, rotate, and scale elements
 99 | - If we put two 'translate' only the latter will work, so we need to use single transform
100 | 
101 | Syntax:
102 | 
103 | ```css
104 | transform: function(value1, value2, ...);
105 | /* transform: scale(2, 0.5); */
106 | transform: function1(value1) function1(value1, value2, ...);
107 | /* transform: translateX(10px) rotate(10deg) translateY(5px); */
108 | 
109 | /* global values */
110 | transform: inherit;
111 | ```
112 | 
113 | #### Transform: Translate
114 | 
115 | Move something around (usually used on trigger)
116 | 
117 | ```css
118 | p.move-right {
119 |   transform: translateX(100px);
120 |   /* negative makes it move left */
121 | }
122 | 
123 | p.move-down {
124 |   transform: translateY(100px);
125 |   /* negative makes it move up */
126 | }
127 | 
128 | p:hover {
129 |   transform: translate(20px, 20px);
130 |   /* x and then y */
131 |   /* translate works with original position (as if the paragraph wasn't moved before with examples above) */
132 | }
133 | ```
134 | 
135 | #### Transform: Scale
136 | 
137 | Alter the size of an elemnent (every aspect of it, like border, font, etc.)
138 | 
139 | ```css
140 | div {
141 |   transform: scale(2);
142 |   /* doubles the size of all divs */
143 |   /* decimals shrink the element (0.5) */
144 |   /* there are also scaleX and scaleY */
145 |   /* scale(2,5) makes it twice as long on X axis, 5 times large on Y axis */
146 | }
147 | ```
148 | 
149 | #### Transform-Origin
150 | 
151 | Transform takes as an origin the middle of an element, and (for example) scales it evenly from there
152 | 
153 | We can change it:
154 | 
155 | ```css
156 | transform-origin: 0 0;
157 | /* set origin to left up corner */
158 | /* we can give a direction: */
159 | transform-origin: left;
160 | /* transforms from the left side on X (keeps center for the Y position) */
161 | transform-origin: left bottom;
162 | /* scales up from the left and from the bottom */
163 | ```
164 | 
165 | #### Transform: Rotate
166 | 
167 | Allows us to rotate elements (positive clock-wise, negative counter clock-wise)
168 | 
169 | ```css
170 | div {
171 |   transform: rotate(45deg);
172 | }
173 | ```
174 | 
175 | #### Browser (Vendor) Prefixes
176 | 
177 | These are prefixes we need to add to transform in order for it to work across different browsers (as well as some other new, non-standard properties)
178 | - ``-webkit-transform: rotate(90deg)``
179 | 
180 | The major browsers use the following prefixes:
181 | 
182 | - -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
183 | - -moz- (Firefox)
184 | - -o- (Old, pre-WebKit, versions of Opera)
185 | - -ms- (Internet Explorer and Microsoft Edge)
186 | 
187 | We can use this tool to put prefixes for you: https://autoprefixer.github.io or built-in prefixes addition in VSCode
188 | 
189 | ### Transitions
190 | 
191 | Allow us to control animation when changing CSS properties, e.g. double the size of this div over 3 seconds
192 | 
193 | 4 transition properties:
194 | 
195 | - transition-duration
196 |   - Controls the timing of a change, how long it should take
197 | - transition-property
198 |   - Calling out which individual CSS properties we want to transition
199 | - transition-timing-function
200 |   - Acceleration of transition (linear or other)
201 |   - See easings.net for examples or matthewlein.com/ceaser
202 | - transition-delay
203 |   - Once a change is set to occur, determine how long we wait until the transition starts
204 | 
205 | Examples:
206 | 
207 | ```css
208 | /* transition-duration */
209 | transition-duration: 1s;
210 | transition-duration: 3s, 1s;
211 | 
212 | /* p class="animated box" */
213 | 
214 | .animated {
215 |   transition-duration: 0.3s;
216 | }
217 | 
218 | .box:hover {
219 |   transform-origin: top left;
220 |   transform: scale(2);
221 | }
222 | 
223 | /* transition-property */
224 | 
225 | transition-property: opacity;
226 | 
227 | .animated {
228 |   transition-duration: 0.3s;
229 |   transition-property: transform;
230 |   /* you can't choose only scale or only rotate */
231 |   /* transition-property: all; for all properties */
232 |   /* use comma to separate properties if you want to select multiple */
233 |   /* transition-property: background, border-radius; */
234 |   /* transition-duration: 5s, 1s; for background and border-radius respectively */
235 | }
236 | 
237 | .box:hover {
238 |   background-color: purple;
239 |   transform-origin: top left;
240 |   transform: scale(2) rotate(45deg);
241 |   border-radius: 50px;
242 | }
243 | 
244 | /* transition-delay */
245 | 
246 | transition-delay: 3s;
247 | transition-delay: 5ms, 6s; /* the same as with transition-property, they work independently of each other */
248 | 
249 | /* transition-timing-function */
250 | 
251 | transition-timing-function: ease-in;
252 | transition-timing-function: ease-out;
253 | transition-timing-function: linear;
254 | transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);
255 | ```
256 | 
257 | #### Transition Shorthands
258 | 
259 | Syntax:
260 | 
261 | ```css
262 | transition: background 1.5s ease-in 1;
263 | /* property duration timing-function delay */
264 | /* for multiple: */
265 | transition: transform 2s ease-out 1s, 
266 | background-color 0.5s linear;
267 | ```
268 | 
269 | #### What Can Be Transitioned
270 | 
271 | ![Screenshot](../images/cantransition.png)
272 | 
273 | #### What Should Be Transitioned
274 | 
275 | Mostly we should use properties which perform best and don't affect performance negatively (not a hard rule, just recommended)
276 | - See more: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
277 | 
278 | - transform: translate(npx, npx)
279 | - transform: scale(n)
280 | - transform: rotate(ndeg)
281 | - opacity 0 ... 1
282 | 
283 | ### Keyframes
284 | 
285 | Unlike transitions, keyframe animations allow us to build more complex, multi-component and multi-state animations while providing more control over them
286 | 
287 | - Transitions allow us to animate a single state change (from A to B)
288 | - Keyframes allow us to animate multi-state change (from A to B to C to D to E...)
289 |   - Keyframe is actually a point that we set to change state, e.g. at: ``0% color: red; font-size: 20opx, 25% color: orange; 50% color: yellow; font-size: 40px, 75% color: green, 100%: color: blue; font-size: 20px``
290 |   - This example shows how some text gradually grows and shrinks while changing colors
291 | 
292 | Syntax (rainbow text example):
293 | 
294 | ```css
295 | /* <p> Hello </p> */
296 | 
297 | /* step 1: define (nothing will happen, we just define it) */
298 | /* as many steps inside of it as we want */
299 | 
300 | @keyframes rainbowtext {
301 |   0%{
302 |     color: red;
303 |     font-size: 20px;
304 |   }
305 |   25%{
306 |     color: orange;
307 |   }
308 |   50% {
309 |     color: yellow;
310 |     font-size: 40px;
311 |     transform: translateX(200px);
312 |   }
313 |   75%{
314 |     color: green;
315 |   }
316 |   
317 |   85%{
318 |     color: blue
319 |   }
320 |   100% {
321 |     color: purple;
322 |     font-size: 20px;
323 |   }
324 | }
325 | 
326 | /* step 2 - assignment */
327 | 
328 | p {
329 |   animation-name: rainbowtext;
330 |   animation-duration: 5s;
331 |   animation-timing-function: linear;
332 |   animation-delay: 0s;
333 |   /* nothing triggers it, start on page load */
334 |   animation-iteration-count: infinite;
335 |   /* how many times this animation runs */
336 | }
337 | ```
338 | 
339 | ### CSS Animation Properties
340 | 
341 | Options to control animation:
342 | 
343 | Most common (they sort of have analogues to transitions):
344 | 
345 | - animation-name
346 | - animation-duration
347 | - animation-timing-function
348 | - animation-delay
349 | 
350 | 'Newer' ones:
351 | 
352 | - animation-iteration-count
353 |   - How many times should animation repeat
354 | - animation-fill-mode
355 |   - Specifies how an animation should apply styles before  (during delay) and after the animation
356 |     - Forwards (takes the end state and it makes it linger, stay)
357 |     - Backwards (takes 0% value and applies it immediately, if there is a delay, it stays at the initial animation state during it)
358 |     - Both
359 |     - None
360 | - animation-direction
361 |   - When we have an animation defined, we can run it forward, in reverse, or alternate it (make it run back and forth)
362 | - animation-play-state
363 |   - Specifies whether the animation is running or paused
364 |     - Usually this is used with JS, but can be something like ``box:hover {animation-play-state: paused;}``
365 | 
366 | #### Animation Shorthand
367 | 
368 | Order is important within each animation definition (e.g. first time is duration, second time is delay); long statements make the code hard to read
369 | - For some properties, order doesn't matter: we can put different things first
370 | 
371 | ```css
372 | animation: 3s ease-in 1s 2 reverse both paused slidein;
373 | animation: changecolor 3s linear 1s infinite;
374 | animation: jiggle 4s;
375 | ```
376 | 
377 | ---
378 | 
379 | ## Layout With Flexbox
380 | 
381 | ### Intro to Flexbox
382 | 
383 | Flexbox is a layout model, it is a more efficient way to lay out, align and distibute space among items in a container (even if their size is unknown)
384 | - See https://css-tricks.com/snippets/css/a-guide-to-flexbox/
385 | 
386 | Container properties:
387 | - flex-direction
388 | - justify-content
389 | - flex-wrap
390 | - align-items
391 | - align-content
392 | 
393 | Flex item properties:
394 | - order
395 | - flex
396 | - flex-grow
397 | - flex-shrink
398 | - align-self
399 | 
400 | #### Display: Flex Property
401 | 
402 | ```css
403 | .container {
404 |   display: flex;
405 |   /* sets container to flex */
406 | }
407 | ```
408 | 
409 | #### Flex Terminology
410 | 
411 | Inside of a flex container there are two axes: main axis (x, by default goes from left to right) and cross axis (y, by default goes from top to bottom); all items are aligned along them (they are called flex items)
412 | 
413 | ### Flexbox Properties of Container
414 | 
415 | #### Flex-direction
416 | 
417 | Specifies how items are placed in the flex container, defining the main axis and its direction
418 | 
419 | ```css
420 | flex-direction: row; /* default value for main axis */
421 | flex-direction: row-reverse; /* main axis goes from right to left, changes order of items */
422 | flex-direction: column; /* main axis is now from top to bottom, they basically switch places with cross axis */
423 | flex-direction: column-reverse; /* main axis is now from bottom to top */
424 | ```
425 | 
426 | #### Flex-wrap
427 | 
428 | Specifies whether items are forced into a single line (default) or can be wrapped into multiple lines
429 | 
430 | ```css
431 | flex-wrap: wrap; /* items can be placed into multiple lines, it'll automatically make additional rows if needed */
432 | flex-wrap: no-wrap; /* default */
433 | flex-wrap: wrap-reverse; /* applies wrap and reverses the start/end of the cross axis (it's now from bottom to top */
434 | ```
435 | 
436 | #### Justify-content
437 | 
438 | Defines how space is distributed between items in flex container along the main axis
439 | 
440 | ```css
441 | justify-content: flex-start; /* default */
442 | justify-content: flex-end; /* content moves to the right side without changing order*/
443 | justify-content: center; /* centers content */
444 | justify-content: space-between; /* divides space between elements, putting them to edges */
445 | justify-content: space-around /* evenly divides space around items */
446 | ```
447 | 
448 | #### Align-items
449 | 
450 | Defines how space is distributed between items in flex container along the cross axis
451 | 
452 | ```css
453 | align-items: flex-start; /* content moves to the top, sticks to it, takes minimum amount of space we need */
454 | align-items: flex-end; /* content moves to the bottom side */
455 | align-items: stretch; /* default, takes up the whole container */
456 | align-items: center; /* centers content along the cross axis */
457 | align-items: baseline; /* align items based on the baseline of the text font (as in copybook) */
458 | ```
459 | 
460 | #### Align-content
461 | 
462 | Defines how space is distributed between rows in flex container along the cross axis (if there are multiple rows)
463 | 
464 | ```css
465 | align-content: stretch; /* default, takes up the whole space */
466 | align-content: flex-start; /* sticks to top */
467 | align-content: flex-end; /* sticks to bottom */
468 | align-content: space-between; /* divides space between rows, sticking them to edges */
469 | align-content: space-around; /* evenly divides space around rows */
470 | align-content: center; /* centers rows */
471 | ```
472 | 
473 | ### Flexbox Properties of Item
474 | 
475 | #### Align-self
476 | 
477 | Allows us to override align-items on individual flex items
478 | 
479 | ```css
480 | .container {
481 |   align-items: flex-start;
482 |   /* makes all items stick to the top */
483 | }
484 | 
485 | .item-2, .item-3 {
486 |   align-self: flex-end;
487 |   /* sets second and third items to stick to bottom */
488 | }
489 | ```
490 | 
491 | #### Order
492 | 
493 | Specifies the order used to lay out items in their flex container
494 | - By default everything has an order of 0, i.e. doesn't matter what the numbers are, the only thing that matters is relation between 'order' values in items
495 | - Using negative numbers makes an item go to the first place
496 | 
497 | ```css
498 | .item-1 {
499 |   order: 2;
500 |   /* 4 items, item 1 goes to the last place */
501 | }
502 | 
503 | /* |2| |1| |3| |4| : making item 1 second in line */
504 | 
505 | .item-1 {
506 |   order: 2;
507 | }
508 | 
509 | .item-2 {
510 |   order: 1;
511 | }
512 | 
513 | .item-3, .item-4 {
514 |   order: 3;
515 | }
516 | ```
517 | 
518 | #### Flex
519 | 
520 | Defines how a flex item will frow or shrink to fit the available space in a container; it's a shorthand which allows us to control flex-grow, flex-shrink, flex-basis
521 | 
522 | ```css
523 | .container {
524 |   flex: 2 1 200px;
525 |   /* grow shrink basis */
526 | }
527 | ```
528 | 
529 | #### Flex-basis
530 | 
531 | Specifies the ideal, initial size of a flex item before it's placed into a flex containers (sort of like width, but not; it's like height when working with columns)
532 | - Between weight/height and flex-basis, flex-basis wins
533 | - See difference: http://gedd.ski/post/the-difference-between-width-and-flex-basis/
534 | 
535 | ```css
536 | flex-basis: 200px;
537 | ```
538 | 
539 | #### Flex-grow
540 | 
541 | Dictates how the unused space should be spread amongst flex items (it's all about ratios)
542 | 
543 | ```css
544 | .box {
545 |   flex-grow: 1;
546 |   /* boxes share space evenly, the number could be anything as long as all items share the same number */
547 | }
548 | 
549 | .box-2 {
550 |   flex-grow: 2;
551 |   /* equals to 9-18, 10-20, 100-200, the ratio is important */
552 |   /* it will take that unused space and get two times as much compared to the others */
553 |   /* this does not mean making the box twice as large, it means use twice as much available space */
554 | }
555 | 
556 | /* imagine container has 1000px width */
557 | 
558 | .box-1, .box-2 {
559 |   width: 100px;
560 |   /* 800px of free space */
561 | }
562 | 
563 | .box-1, .box-2 {
564 |   width: 100px;
565 |   flex-grow: 1;
566 |   /* each 500px */
567 | }
568 | 
569 | .box-1, .box-2 {
570 |   width: 100px;
571 | }
572 | 
573 | .box-1 {
574 |   flex-grow: 1;
575 |   /* 260px */
576 | }
577 | 
578 | .box-2 {
579 |   flex-grow: 4;
580 |   /* 740px; not 4 times as large */
581 |   /* 5 parts of unused space, each 160px; 1 goes to box 1, 4 to box 2 */
582 | }
583 | ```
584 | 
585 | #### Flex-shrink
586 | 
587 | Dictates how items should shrink when there isn't enough space in container (math is different from flex-grow, a complicated one; but it's roughly proportional, ratio matters)
588 | 
589 | ```css
590 | flex-shrink: 1; /* default */
591 | flex-shrink: 0; /* never shrink */
592 | flex-shrink: 2; /* shrinks fater than other items */
593 | /* common scenario */
594 | 
595 | ```
596 | 
597 | 
598 | ### Holy Grail Layout
599 | 
600 | The holy grail refers to a web page layout which has multiple, equal height columns that are defined with style sheets; it is commonly desired and implemented, but for many years, the various ways in which it could be implemented with the current technologies all had drawbacks
601 | 
602 | Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail
603 | 
604 | The CSS3 standards contain modules which are intended for layout of page elements; two of these fully solve the holy grail problem (flexbox and grid layout)
605 | 
606 | ### Flexbox Browser Support
607 | 
608 | For a long time flexbox wasn't used because it wasn't supported, but now it's good for most of the modern browsers without any prefixes
609 | - Check caniuse.com if in doubt
610 | - https://medium.com/css-mine/flexbox-how-to-deal-with-older-browsers-fbf6eb8c7a65
611 | 
612 | ---
613 | 
614 | ### Responsiveness
615 | 
616 | We can set different styles for different screen sizes using @media query
617 | 
618 | ```css
619 | /* technically we can omit 'screen and' */
620 | 
621 | @media screen and (max-width: 920px) {
622 |   nav {
623 |     justify-content: center;
624 |   }
625 |   a {
626 |     font-size: 26px;
627 |   }
628 | }
629 | 
630 | @media screen and (max-width: 600px) {
631 |   nav {
632 |     flex-direction: column;
633 |     align-items: center;
634 |     background: #34495e;
635 |   }
636 |   a {
637 |     color: white;
638 |   }
639 | }
640 | ```


--------------------------------------------------------------------------------
/basic theory/js and html.md:
--------------------------------------------------------------------------------
  1 | # JS and HTML
  2 | 
  3 | #### Table of Contents
  4 | 
  5 | - [JS and HTML](#js-and-html)
  6 |       - [Table of Contents](#table-of-contents)
  7 |   - [DOM](#dom)
  8 |     - [DOM (Document Object Model)](#dom-document-object-model)
  9 |     - [The Process of DOM Manipulation](#the-process-of-dom-manipulation)
 10 |   - [DOM Selectors](#dom-selectors)
 11 |     - [getElementById](#getelementbyid)
 12 |     - [getElementsByClassName](#getelementsbyclassname)
 13 |     - [getElementsByTagName](#getelementsbytagname)
 14 |     - [querySelector](#queryselector)
 15 |     - [querySelectorAll](#queryselectorall)
 16 |   - [DOM Manipulation](#dom-manipulation)
 17 |     - [Changing an element's style](#changing-an-elements-style)
 18 |       - [Separation of Concerns](#separation-of-concerns)
 19 |     - [Adding/removing classes](#addingremoving-classes)
 20 |     - [Retreiving and changing the content of a tag](#retreiving-and-changing-the-content-of-a-tag)
 21 |       - [textContent](#textcontent)
 22 |       - [innerHTML](#innerhtml)
 23 |     - [Changing attributes (src, href, etc.)](#changing-attributes-src-href-etc)
 24 |   - [Events](#events)
 25 |       - [Mouseover and mouseout example](#mouseover-and-mouseout-example)
 26 |   - [jQuery](#jquery)
 27 |     - [jQuery Selectors](#jquery-selectors)
 28 |     - [Manipulating Style](#manipulating-style)
 29 |     - [Common jQuery Methods](#common-jquery-methods)
 30 |       - [val()](#val)
 31 |       - [text()](#text)
 32 |       - [attr()](#attr)
 33 |       - [html()](#html)
 34 |       - [addClass()](#addclass)
 35 |       - [removeClass()](#removeclass)
 36 |       - [toggleClass()](#toggleclass)
 37 |       - [append()](#append)
 38 |       - [parent()](#parent)
 39 |     - [jQuery Events](#jquery-events)
 40 |       - [click()](#click)
 41 |       - [keypress()](#keypress)
 42 |       - [on()](#on)
 43 |       - [click() and on('click')](#click-and-onclick)
 44 |     - [Event bubbling](#event-bubbling)
 45 |     - [jQuery Effects](#jquery-effects)
 46 |       - [Fading](#fading)
 47 |       - [Sliding](#sliding)
 48 | 
 49 | ## DOM
 50 | 
 51 | ### DOM (Document Object Model)
 52 | 
 53 | Note: the script should be located at the bottom of an HTML doc right before the \</body>
 54 | 
 55 | DOM stands for 'Document Object Model'\
 56 | It is the interface between your Javascript and HTML+CSS
 57 | 
 58 | Number of special JS methods, objects, functions that we can use to interact with HTML and CSS: change, move, add, etc.
 59 | 
 60 | The browser turns every HTML tag in a JS object, each object models one of the elements, and everything is stored inside of the *document* object
 61 | 
 62 | ![Screenshot](../images/domscreenshot.png)
 63 | 
 64 | ### The Process of DOM Manipulation
 65 | 
 66 | SELECT an element and then MANIPULATE it
 67 | 
 68 | ```javascript
 69 | var h1 = document.querySelector('h1'); // select
 70 | 
 71 | h1.style.color = 'pink'; // manipulate
 72 | 
 73 | var body = document.querySelector('body'); // select
 74 | var isBlue = false;
 75 | 
 76 | setInterval(function () { // manipulate
 77 |     if (isBlue) {
 78 |         body.style.background = 'white';
 79 |     } else {
 80 |         body.style.background = '#3498db';
 81 |     }
 82 |     isBlue = !isBlue;
 83 | }, 1000); // changes background color from white to blue every second
 84 | ```
 85 | 
 86 | ---
 87 | 
 88 | ## DOM Selectors
 89 | 
 90 | 5 main methods for selecting elements:
 91 | - ``document.getElementById()``
 92 | - ``document.getElementsByClassName()``
 93 | - ``document.getElementsByTagName()``
 94 | - ``document.querySelector()``
 95 | - ``document.querySelectorAll()``
 96 | 
 97 | ### getElementById
 98 | 
 99 | Takes a string argument and returns the one element with a matching ID (as an object)
100 | 
101 | ```javascript
102 | var tag = document.getElementById('highlight');
103 | ```
104 | 
105 | ```html
106 | <body>
107 |     <h1>Hello</h1>
108 |     <h1>Goodbye</h1>
109 |     <ul>
110 |         <li id='highlight'>List item 1</li> <!-- selected -->
111 |         <li class='bolded'>List item 2</li>
112 |         <li class='bolded'>List item 3</li>
113 |     </ul>
114 | </body>
115 | ```
116 | 
117 | ### getElementsByClassName
118 | 
119 | Takes a string argument and returns a list of elements that have a matching class as an 'HTMLCollection'
120 | 
121 | HTMLCollection is a collection of DOM nodes which only contains Element nodes (in contrast with 'NodeList' which can contain any node type)
122 | - It is somewhat similar to an array but more 'lightweight', i.e. we can access items in it by index, but can't use forEach and many other things
123 | - Every item in this collection is an object
124 | 
125 | ```javascript
126 | var tags = document.getElementsByClassName('bolded');
127 | 
128 | console.log(tags[0]); // first <li> with class 'bolded' (List item 2)
129 | ```
130 | 
131 | ```html
132 | <body>
133 |     <h1>Hello</h1>
134 |     <h1>Goodbye</h1>
135 |     <ul>
136 |         <li id='highlight'>List item 1</li>
137 |         <li class='bolded'>List item 2</li> <!-- selected -->
138 |         <li class='bolded'>List item 3</li> <!-- selected -->
139 |     </ul>
140 | </body>
141 | ```
142 | 
143 | ### getElementsByTagName
144 | 
145 | Returns a list of all elements of a given tag name, like \<li> or \<h1> (even if there is only one of a type, like \<body>\
146 | Every item is an object
147 | 
148 | ```javascript
149 | var tags = document.getElementsByTagName('li');
150 | 
151 | console.log(tags[0]); // first <li> (List item 1)
152 | ```
153 | 
154 | ```html
155 | <body>
156 |     <h1>Hello</h1>
157 |     <h1>Goodbye</h1>
158 |     <ul>
159 |         <li id='highlight'>List item 1</li> <!-- selected -->
160 |         <li class='bolded'>List item 2</li> <!-- selected -->
161 |         <li class='bolded'>List item 3</li> <!-- selected -->
162 |     </ul>
163 | </body>
164 | ```
165 | 
166 | ### querySelector
167 | 
168 | Returns the first element that matches a given CSS-style selector (any selector we would use in a CSS document) as an object
169 | 
170 | ```javascript
171 | // select by ID
172 | var tagById = document.querySelector('#highlight'); // CSS syntax inside
173 | 
174 | // select by class
175 | var tagByClass = document.querySelector('.bolded');
176 | 
177 | // select by tag
178 | var tag = document.querySelector('h1');
179 | 
180 | var absentTag = document.querySelector('li a.special'); // returns null
181 | ```
182 | 
183 | ```html
184 | <body>
185 |     <h1>Hello</h1> <!-- selected by tag (tag) -->
186 |     <h1>Goodbye</h1>
187 |     <ul>
188 |         <li id='highlight'>List item 1</li> <!-- selected by ID (tagById) -->
189 |         <li class='bolded'>List item 2</li> <!-- selected by class (tagByClass) -->
190 |         <li class='bolded'>List item 3</li>
191 |     </ul>
192 | </body>
193 | ```
194 | 
195 | ### querySelectorAll
196 | 
197 | Returns a list of elements that match a given CSS-style selector (even if there is only one of a type)\
198 | Every item is an object
199 | 
200 | ```javascript
201 | // select by tag
202 | var tags = document.querySelectorAll('h1');
203 | 
204 | // select by class
205 | var tagsByClass = document.querySelectorAll('.bolded');
206 | ```
207 | 
208 | ```html
209 | <body>
210 |     <h1>Hello</h1> <!-- selected by tags -->
211 |     <h1>Goodbye</h1> <!-- selected by tags -->
212 |     <ul>
213 |         <li id='highlight'>List item 1</li>
214 |         <li class='bolded'>List item 2</li> <!-- selected by class (tagsByClass) -->
215 |         <li class='bolded'>List item 3</li> <!-- selected by class (tagsByClass) -->
216 |     </ul>
217 | </body>
218 | ```
219 | 
220 | ---
221 | 
222 | ## DOM Manipulation
223 | 
224 | ### Changing an element's style
225 | 
226 | The style property is one way to manipulate an element's style
227 | 
228 | ```javascript
229 | // select
230 | var tag = document.getElementById('highlight');
231 | 
232 | // manipulate (note: follow JS rules since it is JS, and not CSS)
233 | tag.style.color = 'blue';
234 | tag.style/border = '5px solid red';
235 | tag.style.fontSize = '24px';
236 | tag.style.background = 'yellow';
237 | tag.style.marginTop = '200px';
238 | ```
239 | 
240 | It is not recommended to follow this example (in general)
241 | 
242 | It is recommended for styles to be defined in a separate file or files; the style property allows for quick styling, e.g. for testing purposes
243 | 
244 | #### Separation of Concerns
245 | 
246 | Separation of Concerns is a concept that HTML, JS, and CSS are each responsible for their own domain (structure, behavior, presentation)
247 | 
248 | ### Adding/removing classes
249 | 
250 | Rather than directly manipulate style with JS, we can define a CSS class and then toggle it on or off with JS
251 | 
252 | ```CSS
253 | .some-class {
254 |     color: blue;
255 |     border: 3px solid red;
256 | }
257 | ```
258 | 
259 | ```javascript
260 | var tag = document.getElementById('highlight');
261 | // add the new class to the selected element
262 | tag.classList.add('some-class');
263 | ```
264 | 
265 | classList is a read-only list that contains the classes for a given element
266 | - It is not an array!
267 | 
268 | ```javascript
269 | var tag = document.querySelector('h1');
270 | 
271 | // add a class the the selected element
272 | tag.classList.add('another-class');
273 | 
274 | // remove a class
275 | tag.classList.remove('another-class');
276 | 
277 | // toggle a class
278 | tag.classList.toggle('another-class');
279 | ```
280 | 
281 | ### Retreiving and changing the content of a tag
282 | 
283 | #### textContent
284 | 
285 | Returns a string of all the text contained in a given element
286 | 
287 | ```html
288 | <p>This is an <strong>awesome</strong> paragraph</p>
289 | 
290 | <ul>
291 |     <li>Orchid</li>
292 |     <li>Succulents</li>
293 |     <li>Tulips</li>
294 | <ul>
295 | ```
296 | 
297 | ```javascript
298 | // select the tag
299 | var tag = document.querySelector('p');
300 | var ul = document.querySelector('ul');
301 | 
302 | // retrieve the textContent
303 | tag.textContent // 'This is an awesome paragraph' (doesn't contain the tags, just everything inside of a selected tag)
304 | ul.textContent // ' Orchids Succulents Tulips '
305 | 
306 | // alter the textContent (kind of dangerous since there won't be any tags inside of an element, like <strong>)
307 | tag.textContent = 'blah blah blah';
308 | ```
309 | 
310 | #### innerHTML
311 | 
312 | Similar to textContent, except it returns a string of all the HTML contained in a given element
313 | - Rarely used to alter the content
314 | 
315 | ```html
316 | <p>This is an <strong>awesome</strong> paragraph</p>
317 | 
318 | <ul>
319 |     <li>Orchid</li>
320 |     <li>Succulents</li>
321 |     <li>Tulips</li>
322 | <ul>
323 | ```
324 | 
325 | ```javascript
326 | // select the tag
327 | var tag = document.querySelector('p');
328 | var ul = document.querySelector('ul');
329 | 
330 | tag.innerHTML // 'This is an <strong>awesome</strong> paragraph'
331 | ul.innerHTML // ' <li>Orchids</li> <li>Succulents</li> <li>Tulips</li> '
332 | 
333 | document.body.innerHTML // returns all of the body's HTML; when changed will treat tags as HTML tags
334 | document.body.textContent // returns only the text present on the page; when changed will treat tags as plain text
335 | ```
336 | 
337 | ### Changing attributes (src, href, etc.)
338 | 
339 | Use getAttribute() and setAttribute() to read and write attributes like src or href
340 | 
341 | ```html
342 | <a href="http://www.google.com">I am a link</a>
343 | <img src="logo.png">
344 | ```
345 | 
346 | ```javascript
347 | var link = document.querySelector('a');
348 | link.getAttribute('href'); // 'http://www.google.com'
349 | link.setAttribute('href', 'http://www.dogs.com'); // <a href="http://www.dogs.com">I am a link</a>
350 | 
351 | var img = document.querySelector('img');
352 | img.setAttribute('src', 'corgi.png'); // <img src="corgi.png">
353 | ```
354 | 
355 | ---
356 | 
357 | ## Events
358 | 
359 | We select an element and then add an event listener
360 | - 'Listen for a click on this \<button>'
361 | - 'Listen for a hover event on the \<h1>'
362 | - 'Listen for a keypress event on text input'
363 | 
364 | Syntax:\
365 | To add a listener, we use a method called addEventListener
366 | 
367 | ```javascript
368 | element.addEventListener(type, functionToCall);
369 | 
370 | var button = document.querySelector('button'); // function can also be named, e.g. changeText (no parenthesis)
371 | button.addEventListener('click', function() {
372 |     console.log('Someone clicked the button!');
373 | });
374 | 
375 | // this is a callback, i.e. this function is called only when the event happens, JS 'comes back' in the code and 'tells' the function to 'fire'
376 | 
377 | // there could be more than one event listener
378 | 
379 | // we can use an arrow function ('click', () => {}) but be careful since it doesn't have its own 'this' context
380 | ```
381 | 
382 | #### Mouseover and mouseout example
383 | 
384 | ```html
385 | <ul>
386 |     <li>Item 1</li>
387 |     <li>Item 2</li>
388 |     <li>Item 3</li>
389 | </ul>
390 | ```
391 | 
392 | ```javascript
393 | var lis = document.querySelectorAll('li');
394 | 
395 | // code which changes the color when mouse is over an element
396 | for (var i = 0; i < lis.length; i++) {
397 |     lis[i].addEventListener('mouseover', function() { // it doesn't fire constantly, only once when the mouse is over the element
398 |         this.style.color = 'green';
399 |     });
400 |     lis[i].addEventListener('mouseout', function() {
401 |         this.style.color = 'black';
402 |     });
403 | }
404 | ```
405 | 
406 | ---
407 | 
408 | ## jQuery
409 | 
410 | jQuery is a DOM manipulation library
411 | - Library is some code that's been written, and we can use this code in our project (e.g. methods)
412 | - When adding libraries it's a good practice to put them into a separate 'lib' folder
413 | 
414 | jQuery helps
415 | - Select elements
416 | - Manipulate elements
417 | - Create elements
418 | - Add event listeners
419 | - Animate elements
420 | - Add effects
421 | - Make HTTP requests (AJAX)
422 | 
423 | Reasons to use jQuery:
424 | - Fixes 'broken' DOM API
425 |     - The DOM API was considered 'broken' for a while
426 | - Brevity and Clarity
427 | - Ease of use
428 | - Cross-browser Support
429 | - AJAX
430 | - Many people use it
431 |     - There is a strong community which can help
432 | 
433 | Reasons to not use jQuery:
434 | - The DOM API is no longer 'broken'
435 | - It doesn't do anything you can't do on your own
436 |     - youmightnotneedjquery.com
437 | - It's an unnecessary dependency
438 |     - You don't exactly need everything in jQuery
439 | - Performance
440 |     - You can write inefficient and slower code (sometimes)
441 | - Lots of people are moving away from jQuery
442 | 
443 | Either way, it's worth knowing
444 | 
445 | ### jQuery Selectors
446 | 
447 | Selection with jQuery is very similar to querySelectorAll, in that we provide a CSS style selector and jQuery will return all matching elements
448 | - ``$('selectorGoesHere')``
449 | 
450 | ```javascript
451 | // to select all img tags
452 | $('img');
453 | 
454 | // to select all elements with class 'sale'
455 | $('.sale');
456 | 
457 | // to select element with id 'bonus'
458 | $('#bonus');
459 | 
460 | // to select all 'a' tags inside of 'li's
461 | $('li a');
462 | ```
463 | 
464 | ### Manipulating Style
465 | 
466 | The .css() method is jQuery's interface to styling
467 | - ``$(selector).css(property, value)``
468 | 
469 | ```javascript
470 | // gives an element with id 'special' a red border
471 | $('#special').css('border', '2px solid red');
472 | 
473 | // we can also pass in an object with styles
474 | var styles = {
475 |     backgroundColor: 'pink',
476 |     fontWeight: 'bold'
477 | }
478 | 
479 | $('#special').css(styles);
480 | 
481 | // we can style multiple elements at once (doesn't require a loop or something else)
482 | 
483 | // select all li's and make them yellow
484 | $('li').css('color', 'yellow');
485 | 
486 | // select all elements with class 'big' and give them an orange border
487 | $('.big').css('border', '1px dashed orange');
488 | ```
489 | 
490 | ### Common jQuery Methods
491 | 
492 | Many of them follow the 'Getter and Setter' paradigm (we can use them both for retreiving and setting information)
493 | 
494 | ```html
495 | <style type="text/css">
496 |     .correct {
497 |         color: green;
498 |     }
499 | 
500 |     .wrong {
501 |         color: red;
502 |         background: pink;
503 |     }
504 | 
505 |     .done {
506 |         color: gray;
507 |         text-decoration: line-through;
508 |     }
509 | </style>
510 | 
511 | <h1>jQuery Methods Demo Page</h1>
512 | 
513 | <input type="text" placeholder="Your name">
514 | 
515 | <select>
516 |     <option>Cat</option>
517 |     <option>Dog</option>
518 |     <option>Other</option>
519 | </select>
520 | 
521 | <ul>
522 |     <li>Skittles</li>
523 |     <li>Starburst</li>
524 |     <li>Twix</li>
525 | </ul>
526 | 
527 | <img src="www.google.com/img.jpg">
528 | <img src="www.google.com/img1.jpg">
529 | <img src="www.google.com/img2.jpg">
530 | ```
531 | 
532 | #### val()
533 | 
534 | Get the current vlue of the first element in the set of matched elements or set the value of every matched element
535 | - Similar to .value()
536 | - Works with checkboxed, dropdown menus, etc.
537 | 
538 | ```javascript
539 | $('input').val(); // '' (since it's empty)
540 | $('input').val('Something is here'); // 'Something is here' inside of an input; it is used sometimes to delete the value with an empty string
541 | $('select').val(); // returns what's selected, e.g. 'Dog'
542 | ```
543 | 
544 | #### text()
545 | 
546 | Gets the combined text contents of each elements in a set of matched elements (including descendants) or set the text content
547 | - Similar to textContent
548 | 
549 | ```javascript
550 | $('h1').text(); // 'jQuery Methods Demo Page'
551 | $('ul').text(); // ' Skittles Starburst Twix '
552 | $('li').text(); // 'SkittlesStarburstTwix'
553 | $('h1').text('New text!'); // <h1>New text!</h1>
554 | $('li').text('I am a new li'); 
555 | // I am a new li
556 | // I am a new li
557 | // I am a new li
558 | ```
559 | 
560 | #### attr()
561 | 
562 | Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element
563 | 
564 | ```javascript
565 | $('img').attr('src'); // 'www.google.com/img.jpg'
566 | $('img').attr('src', 'www.yandex.ru/img.jpg'); // <img src ="www.yandex.ru/img.jpg">
567 | $('input').attr('type', 'checkbox'); // changes input into a checkbox
568 | $('img:first-of-type') // to choose the first element we can also use ':first' or .first(), but it's a jQuery thing so it's a little slower
569 | $('img').last().attr('src', 'www.rambler.ru/img.jpg'); // changing the last element's attribute
570 | ```
571 | 
572 | #### html()
573 | 
574 | Get the HTML contents of the first element in the set of matched element or set the HTML content if every matched element
575 | - Similar to innerHTML
576 | 
577 | ```javascript
578 | $('ul').html(); // ' <li>Skittles</li> <li>Starburst</li> <li>Twix</li> '
579 | $('ul').html('<li>I hacked your UL</li><li>Yes I did</li>')
580 | // <li>I hacked your UL</li>
581 | // <li>Yes I did</li>
582 | $('li').html('<a href="google.com">Click me to go to Google</a>');
583 | // <li><a href="google.com">Click me to go to Google</a></li>
584 | // <li><a href="google.com">Click me to go to Google</a></li>
585 | ```
586 | 
587 | #### addClass()
588 | 
589 | Adds the specified class(es) to each element in the set of matched elements
590 | - Similar to classList.add()
591 | 
592 | ```javascript
593 | $('h1').addClass('correct'); // <h1 class="correct">jQuery Methods Demo Page</h1>
594 | ```
595 | 
596 | #### removeClass()
597 | 
598 | Removes the specified class(es) from each element in the set of matched elements
599 | - Similar to classList.remove()
600 | 
601 | ```javascript
602 | $('h1').removeClass('correct'); // <h1 class="">jQuery Methods Demo Page</h1>
603 | ```
604 | 
605 | #### toggleClass()
606 | 
607 | Toggles the specified class(es) in each element in the set of matched elements
608 | - Similar to classList.toggle()
609 | 
610 | ```javascript
611 | $('h1').toggleClass('correct'); // <h1 class="correct">jQuery Methods Demo Page</h1>
612 | $('h1').toggleClass('correct'); // <h1 class="">jQuery Methods Demo Page</h1>
613 | 
614 | // works for every element individually
615 | $('li').first().toggleClass('done');
616 | // <li class="done">Skittles</li>
617 | // <li class="">Starburst</li>
618 | // <li class="">Twix</li>
619 | $('li').toggleClass('done');
620 | // <li class="">Skittles</li>
621 | // <li class="done">Starburst</li>
622 | // <li class="done">Twix</li>
623 | ```
624 | 
625 | #### append()
626 | 
627 | We select an element to append to and then add something to this element as an HTML
628 | 
629 | ```javascript
630 | $('ul').append('<li>This is a new li</li>');
631 | ```
632 | 
633 | #### parent()
634 | 
635 | Lets you access the parent element, gives us the parent element as a jQuery element
636 | 
637 | ```javascript
638 | // <li><span>Something</span> Else</li>
639 | $('span').click(function() {
640 |     $(this).remove(); // will remove only the span ('Something')
641 |     $(this).parent().remove(); // will remove the whole li ('Something Else')
642 | });
643 | ```
644 | 
645 | ### jQuery Events
646 | 
647 | There are many different event methods in jQuery
648 | 
649 | Three main methods:
650 | - click()
651 | - keypress()
652 | - on()
653 | 
654 | #### click()
655 | 
656 | It is a quick and easy way to add a click listener to element(s)
657 | 
658 | ```javascript
659 | // prints when item with id 'submit' is selected
660 | $('#submit').click(function() {
661 |     console.log('Another click');
662 | });
663 | 
664 | // alerts when any button is clicked
665 | $('button').click(function() {
666 |     alert('Someone clicked a button');
667 | });
668 | 
669 | // we need to use jQuery $(this) if we want to refer to the element which was clicked (and not all elements)
670 | $('button').click(function() {
671 |     $(this).css('background', 'pink');
672 | });
673 | ```
674 | 
675 | #### keypress()
676 | 
677 | It is a simple way to add a keypress listener to element(s)
678 | - keydown() fires when someone presses the button on a keyboard
679 | - keyup() fires when someone releases the button on a keyboard
680 | - keypress() fires in between down and up (usually)
681 |     - keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered
682 |     - e.g. if a user inputs an uppercase A, keydown and key up will fire on shift key and on the lowercase a, while keypress will fire on uppercase A (it cares about end result character)
683 | 
684 | ```javascript
685 | $('input[type="text"]').keypress(function() {
686 |     console.log('You pressed a key');
687 | });
688 | 
689 | $('input[type="text"]').keypress(function(event) { // event is an object which contains all the information about the keypress event (time, type, charCode, which etc.)
690 |     if (event.which === 13) { // which contains a char code (charCode does as well but there are some differences)
691 |         console.log('You pressed enter');
692 |     }
693 | });
694 | ```
695 | 
696 | #### on()
697 | 
698 | Work similarly to addEventListener; it lets you specify the type of event to listen for
699 | 
700 | ```javascript
701 | // prints when item with id 'submit' is selected
702 | $('#submit').on('click', function() {
703 |     console.log('Another click');
704 | });
705 | 
706 | // alerts when any button is clicked
707 | $('button').on('click',function() {
708 |     alert('Someone clicked a button');
709 | });
710 | 
711 | // double click event
712 | $('button').on('dblclick', function() {
713 |     alert('Double clicked!');
714 | });
715 | 
716 | // drag start event
717 | $('a').on('dragstart', function() {
718 |     console.log('Drag started');
719 | });
720 | 
721 | // keypress event
722 | $('input[type="text"]').on('keypress', function() {
723 |     alert('Key press in an input!');
724 | });
725 | 
726 | // create a hover selection event which makes a button text bold
727 | // mouse enter event
728 | $('button').on('mouseenter', function() {
729 |     $(this).css('font-weight', 'bold');
730 | });
731 | // mouse leave event
732 | $('button').on('mouseleave', function() {
733 |     $(this).css('font-weight', 'normal');
734 | });
735 | ```
736 | 
737 | #### click() and on('click')
738 | 
739 | There is a key difference between these methods
740 | - click() only adds listeners for existing elements
741 | - on('click') will add listeners for all potential future elements
742 | 
743 | ```javascript
744 | // we can only add listeners to elements which existed when this code is run the first time
745 | // we add a listener to the ul parent, and the listener will technically fire every time the ul is clicked
746 | // adding an argument 'li' specifies that the code should run only when an li inside of ul is clicked
747 | $('ul').on('click', 'li', function () {
748 |     $(this).toggleClass('completed');
749 | });
750 | ```
751 | 
752 | ### Event bubbling
753 | 
754 | Imagine we have a span inside of an li inside of a ul inside of a div
755 | 
756 | Event bubbling is when event (e.g. click) is triggered for span it then bubbles up to the li and trigger an li click event, and then to ul, to div, etc. until it hits the html element
757 | 
758 | To prevent it we can tell the event inside of the span to not bubble anymore and not trigger event in any of the parent elements
759 | 
760 | ```javascript
761 | $('span').click(function(event) { // the most common names are e or event
762 |     console.log('You clicked a span');
763 |     event.stopPropagation; // this stops the bubbling
764 | });
765 | ```
766 | 
767 | ### jQuery Effects
768 | 
769 | There are many differents effects in jQuery\
770 | The most common are fading and sliding
771 | 
772 | #### Fading
773 | 
774 | - .fadeOut() fades an element out by changing its opacity from 100 to 0 and then sets its 'display' to 'none
775 | - .fadeIn() fades an element in by changing its opacity from 0 to 100 and sets its 'display' to 'block'
776 | - .fadeToggle() toggles the fading (in or out)
777 | 
778 | ```javascript
779 | // all the divs are disappearing in 1 sec when a button is pressed
780 | $('button').on('click', function() {
781 |     $('div').fadeOut(1000, function() {
782 |         console.log('Fade completed'); // this message will be printed after the div disappears
783 |         $(this).remove(); // removes the div from the page
784 |     });
785 |     console.log('Fade completed'); // JS will print this message immediately, it won't wait for the divs to fade out
786 | });
787 | ```
788 | 
789 | #### Sliding
790 | 
791 | - .slideDown() displays the elements with a sliding motion (animating height)
792 | - .slideUp() hides the elements with a sliding motion
793 | - .slideToggle() displays or hides the elements with a sliding motion


--------------------------------------------------------------------------------
/advanced theory/testing.md:
--------------------------------------------------------------------------------
  1 | # Testing Basics
  2 | 
  3 | Unit tests test parts of an application (units)
  4 | 
  5 | Very commonly each unit is tested individually and independently to ensure that application is running as expected
  6 | 
  7 | What we need for testing:
  8 | - A framework to write tests
  9 | - A way of describing the code we are testing
 10 | - A tool where we can make assertions or expectations about our code
 11 | 
 12 | #### Table of Contents
 13 | 
 14 | - [Testing Basics](#testing-basics)
 15 |       - [Table of Contents](#table-of-contents)
 16 |   - [TDD and BDD](#tdd-and-bdd)
 17 |     - [Test Driven Development](#test-driven-development)
 18 |     - [Behavior Driven Development](#behavior-driven-development)
 19 |   - [Types of Tests](#types-of-tests)
 20 |     - [Unit Tests](#unit-tests)
 21 |     - [Integration Tests](#integration-tests)
 22 |     - [Acceptance Tests](#acceptance-tests)
 23 |     - [Stress Testing](#stress-testing)
 24 |   - [Jasmine](#jasmine)
 25 |     - [Jasmine Syntax and Matchers](#jasmine-syntax-and-matchers)
 26 |       - [Matchers](#matchers)
 27 |     - [Writing Better Tests with Hooks](#writing-better-tests-with-hooks)
 28 |       - [beforeEach](#beforeeach)
 29 |       - [afterEach](#aftereach)
 30 |       - [beforeAll/afterAll](#beforeallafterall)
 31 |     - [Testing Larger Test Suites](#testing-larger-test-suites)
 32 |       - [Nesting Describe](#nesting-describe)
 33 |       - [Pending Tests](#pending-tests)
 34 |       - [Number of Expect's](#number-of-expects)
 35 |     - [Mocking](#mocking)
 36 |     - [Spies](#spies)
 37 |       - [Creating a Spy](#creating-a-spy)
 38 |       - [Testing Parameters](#testing-parameters)
 39 |       - [Returning a Value](#returning-a-value)
 40 |         - [Why Use a Spy](#why-use-a-spy)
 41 |       - [Testing frequency](#testing-frequency)
 42 |     - [Clock](#clock)
 43 |       - [setTimeout](#settimeout)
 44 |       - [setInterval](#setinterval)
 45 |       - [Testing Async Code](#testing-async-code)
 46 |   - [Mocha](#mocha)
 47 | 
 48 | ## TDD and BDD
 49 | 
 50 | ### Test Driven Development
 51 | 
 52 | The idea of TDD is that we write test before we write our app code
 53 | 
 54 | This is a contrast to other testing methodologies which involve writing code and then testing it
 55 | 
 56 | With TDD we follow a pattern called 'Red Green Refactor'
 57 | 1. Write the tests
 58 | 2. Since we don't have any code yet, these tests sould fail after we see the tests fail (red)
 59 | 3. Write the code necessary to pass the tests (green)
 60 | 4. Refactor code as necessary
 61 | 
 62 | As long as the tests are still passing we can be reasonably confident that we aren't introducing new bugs into our program 
 63 | 
 64 | As our applications grow larger and we add more features, we will still have a solid suite of tests which ensure that we are not adding additional bugs to our application
 65 | 
 66 | The development process may be a bit longer with writing tests first the code written is much more likely to be bug free and maintainable as the code base grows
 67 | 
 68 | ### Behavior Driven Development
 69 | 
 70 | Jasmine is a behavior driven javacript framework (BDD)
 71 | 
 72 | BDD is a subset of TDD; the two ideas are not mutually exclusive - we can have BDD without TDD and vice versa
 73 | 
 74 | The idea behind behavior driven development or BDD is that when writing tests we describe the behavior of our functionality and not just what we expect the result to be
 75 | 
 76 | When we use functions like 'describe' and 'it', the first parameter to each of these is a string for how we want to describe the behavior of what we are testing
 77 | 
 78 | BDD involves being verbose with our style and describing the behavior of our functionality (this is helpful when testing the design of some software instead of just testing or describing the expected output we can be much more descriptive in our tests)
 79 | 
 80 | ## Types of Tests
 81 | 
 82 | ### Unit Tests
 83 | 
 84 | These are tests which are written for one small component or unit of our application, they are meant to test the individual pieces of the app
 85 | 
 86 | Unit tests are written for the purpose of proving that the units or parts of our application behave as expected before they're put together
 87 | 
 88 | ### Integration Tests
 89 | 
 90 | Having passed the unit tests, our application may fail when our units are combined
 91 | 
 92 | This leads us to integration testing which is meant to test the integration of our units or larger parts of our application; here we test more than one unit and how they function together
 93 | 
 94 | Integration testing builds off of unit testing
 95 | 
 96 | ### Acceptance Tests
 97 | 
 98 | Acceptance testing involves performing tests on the full system which could be using your application in the browser or on a device to see whether the application's functionality satisfies a specification provided; here we are simply testing to see if something is acceptable or not
 99 | 
100 | The purpose of acceptance tests is to evaluate the entire business or system requirements, not to test how one unit or how multiple units are integrated together
101 | 
102 | 
103 | ### Stress Testing
104 | 
105 | The idea behind stress testing is to determine how effective our applications can be under unfavorable conditions; these conditions include systems going down, high traffic, or other types of scenarios that may not be
106 | common but can happen to an application
107 | 
108 | ## Jasmine
109 | 
110 | It is a testing framework which works with all kinds of JS environments (browser, node.js) and has a simple syntax (and even has an interface)
111 | - Tests are usually not written inside of HTML, instead we have a couple of js files (one of them spec file wthich contains tests, and other one is the code we're testing)
112 | 
113 | ```html
114 | <html lang="en">
115 | <head>
116 |   <meta charset="UTF-8">
117 |   <title>Jasmine Tests</title>
118 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.2/jasmine.css">
119 | </head>
120 | <body>
121 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.2/jasmine.js"></script>
122 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.2/jasmine-html.js"></script>
123 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.2/boot.js"></script>
124 | </body>
125 | </html>
126 | ```
127 | 
128 | ### Jasmine Syntax and Matchers
129 | 
130 | Essential keywords:
131 | - describe
132 |   - is given by Jasmine, we use it to organize our tests (as well as other keywords)
133 |   - 'let me describe ... to you'
134 |   - very often we have one describe block per function/unit that we're testing
135 | - it
136 |   - is used inside of describe functions
137 |   - inside of the it function we write code that explains in more detail what we expect this piece of functionality to do
138 |   - 'let me tell you about ...'
139 |   - each it function corresponds to a test, and is often called a 'spec'
140 | - expect
141 |   - lives inside of the it function
142 |   - inside of expect function we make expectations or assertions about that functionality we are testing
143 |   - if one of our expectations isn't met, the test (or spec) fails
144 |   - 'here's what I expect'
145 | 
146 | Example:
147 | 
148 | ```
149 | describe('Earth')
150 |   it('isRound')
151 |     expect(earth.isRound.toBe(true))
152 |   it('is the third planet from the sun')
153 |     expect(earth.numberFromSun).toBe(3)
154 | ```
155 | 
156 | In code:
157 | 
158 | ```javascript
159 | var earth = {
160 |   isRound: true;
161 |   numberFromSun: 3
162 | }
163 | 
164 | describe("Earth", function() {
165 |   // string, callback
166 |   it("is round", function() {
167 |     expect(earth.isRound).toBe(true)
168 |     // returns an object which we can attach other methods to
169 |     // these methods attached onto the result of expect function are called matchers
170 |     // here the matcher is toBe (result of expect function === value we pass to toBe function)
171 |   });
172 |   it("is the third planet from the sun", function() {
173 |     expect(earth.numberFromSun).toBe(3)
174 |   });
175 | });
176 | ```
177 | 
178 | #### Matchers
179 | 
180 | Matchers are functions we attach to the result of the expect function
181 | 
182 | List of matchers:
183 | - toBe/not.toBe
184 |   - === values
185 | - toBeCloseTo
186 |   - compares two values, and accepts second parameter for precision
187 |   - useful if we only care if something is similar, but not exactly the same
188 | - toBeDefined
189 |   - check if certain variables have specific value, and not undefined
190 | - toBeFalsey/toBeTruthy
191 |   - when we expect a value when converted to a boolean to be true or false
192 | - toBeGreaterThan/toBeLessThan
193 |   - comparing numbers
194 | - toContain
195 |   - if a value is contained in an array
196 |   - sometimes we don't know all the values in an array, but want to make sure that something is there
197 | - toEqual
198 |   - when compating two objects with ===, we will not always get what we expect even if they look the same
199 |   - if the two objects are different references in memory, === is false
200 |     - ``arr1 = [1, 2, 3]``
201 |     - ``arr2 = [1, 2, 3]``
202 |     - ``arr1 === arr2 // false``
203 |     - ``arr3 = []``
204 |     - ``arr4 = arr3``
205 |     - ``arr3 === arr4 // true, they are the same reference in memory``
206 |   - toEqual accepts two different objects, and if their values inside are the same, it will return true (even if they are different references in memory)
207 |   - used mostly for objects and arrays
208 | - jasmine.any() (not really a matcher, but a useful tool especially in type checking)
209 |   - if we want to make sure some value is an array or function, or constructed from a specific function, we can use jasmine.any() to check the type
210 |   - typeof doesn't work for arrays (arrays are a type of object)
211 | 
212 | ```html
213 | <!DOCTYPE html>
214 | <html lang="en">
215 | <head>
216 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.2/jasmine.css">
217 | </head>
218 | <body>
219 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.2/jasmine.js"></script>
220 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.2/jasmine-html.js"></script>
221 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.2/boot.js"></script>
222 |   <script>
223 |     describe("Jasmine Matchers", function() {
224 |       it("allows for === and deep equality", function() {
225 |         expect(1+1).toBe(2);
226 |         expect([1,2,3]).toEqual([1,2,3]);
227 |       });
228 |       it("allows for easy precision checking", function() {
229 |         expect(3.1415).toBeCloseTo(3.14,2);
230 |       });
231 |       it("allows for easy truthy / falsey checking", function() {
232 |         expect(0).toBeFalsy();
233 |         expect([]).toBeTruthy();
234 |       });
235 |       it("allows for easy type checking", function() {
236 |         expect([]).toEqual(jasmine.any(Array));
237 |         expect(function(){}).toEqual(jasmine.any(Function));
238 |       });
239 |       it("allows for checking contents of an object", function() {
240 |         expect([1,2,3]).toContain(1);
241 |         expect({name:'Elie', job:'Instructor'}).toEqual(jasmine.objectContaining({name:'Elie'}));
242 |       });
243 |     });
244 |   </script>
245 | </body>
246 | </html>
247 | ```
248 | 
249 | ### Writing Better Tests with Hooks
250 | 
251 | #### beforeEach
252 | 
253 | Example of a test with much repetition:
254 | 
255 | ```javascript
256 | decribe('#push', function() {
257 |   it('adds elements to an array', function() {
258 |     var arr = [1,3,5]; // we can't simply define arr once since it will be changed, and tests will give unexpected results
259 |     arr.push(7);
260 |     expect(arr).toEqual([1,3,5,7]);
261 |   });
262 | 
263 |   it('returns the new length of the array', function() {
264 |     var arr = [1,3,5];
265 |     expect(arr.push(7)).toBe(4);
266 |   });
267 | 
268 |   it('adds anything into the array', function() {
269 |     var arr = [1,3,5];
270 |     expect(arr.push({})).toBe(4);
271 |   });
272 | });
273 | ```
274 | 
275 | Jasmine has a way to avoid repeating: beforeEach
276 | - It accepts a callback that will be run before a callback to each 'it' function
277 | 
278 | ```javascript
279 | decribe('Arrays', function() {
280 |   var arr;
281 |   beforeEach(function() {
282 |     arr = [1,3,5];
283 |   });
284 | });
285 | // Notice here that we are declaring the 'arr' variable inside of the callback to 'describe' and then assigning it to an array inside of a callback to beforeEach
286 | // The reason we do this is because of scoping in javascript
287 | // If we place the 'var' keyword inside of the callback to before each then that variable would only be accessible inside of the callback to beforeEach and nowhere else
288 | // If we declare the variable outside of the beforeEach, we can access it inside of inner functions
289 | 
290 | // refactored result:
291 | decribe('Arrays', function() {
292 |   var arr;
293 |   beforeEach(function() {
294 |     arr = [1,3,5];
295 |   });
296 |   it('adds elements to an array', function() {
297 |     arr.push(7);
298 |     expect(arr).toEqual([1,3,5,7]);
299 |   });
300 | 
301 |   it('returns the new length of the array', function() {
302 |     expect(arr.push(7)).toBe(4);
303 |   });
304 | 
305 |   it('adds anything into the array', function() {
306 |     expect(arr.push({})).toBe(4);
307 |   });
308 | });
309 | 
310 | // Now notice that we only have to define 'arr' once and each callback to the it function has an 'arr' variable that gets redefined each time
311 | ```
312 | 
313 | #### afterEach
314 | 
315 | The same way that we can run code before each 'it' callback, we can run after each 'it' callback
316 | 
317 | afterEach runs after each 'it' callback, and is useful for teardown
318 | 
319 | ```javascript
320 | describe('Counting', function() {
321 |   var count = 0;
322 | 
323 |   beforeEach(function() {
324 |     count++; // we are adding one to our count variable before each 'it' callback
325 |   });
326 | 
327 |   afterEach(function() {
328 |     count = 0; // we are resetting our count to 0 after each 'it' callback
329 |   });
330 | 
331 |   it('has a counter that increments', function() {
332 |     expect(count.toBe(1));
333 |   });
334 | 
335 |   it('gets reset', function() {
336 |     expect(count).toBe(1);
337 |   });
338 | });
339 | 
340 | // The idea here is that we can use afterEach to reset variables used between tests
341 | // This is also called a teardown and is useful when ensuring that your data stays the same between tests
342 | // Very commonly we see teardown code when testing databases to ensure that we start and end with the same sample data
343 | ```
344 | 
345 | #### beforeAll/afterAll
346 | 
347 | If we you want to create a variable that persists among all tests, we can use the beforeAll and afterAll functions
348 | - They run before or after all tests, and do not reset in between
349 | - This is not as common since it can lead to unintended side effects but sometimes it is needed
350 | 
351 | ```javascript
352 | var arr = [];
353 | beforeAll(function() {
354 |   arr = [1,2,3];
355 | });
356 | 
357 | describe('Counting', function() {
358 |   it('starts with an array', function() {
359 |     arr.puch(4);
360 |     expect(1).toBe(1);
361 |   });
362 |   it('keeps mutating that array', function() {
363 |     console.log(arr); // [1,2,3,4]
364 |     arr.push(5);
365 |     expect(1).toBe(1);
366 |   });
367 | });
368 | 
369 | describe('Again', function() {
370 |   it('keeps mutating the array again', function() {
371 |     console.log(arr); // [1,2,3,4,5]
372 |     expect(1).toBe(1);
373 |   });
374 | });
375 | 
376 | // Notice that the code is similar to beforeEach, but the 'arr' variable we create only gets defined once and is shared amongst all the tests
377 | ```
378 | 
379 | ### Testing Larger Test Suites
380 | 
381 | #### Nesting Describe
382 | 
383 | Describe is how we can express a specific high level topic that we will test; we can also nest describe blocks if we are describing quite a few things
384 | 
385 | ```javascript
386 | // here we are describing arrays, and then describing specific methods for arrays 
387 | // inside of each of these inner 'describe' blocks we can place 'it' blocks
388 | 
389 | describe('Array', function() {
390 |   var arr;
391 |   beforeEach(function() {
392 |     arr = [1,3,5];
393 |   });
394 | 
395 |   describe('#unshift', function() {
396 |     it('adds an element to the beginning of an array', function() {
397 |       arr.unshift(17);
398 |       expect(arr[0]).toBe(17);
399 |     });
400 |     it('returns the new length', function() {
401 |       expect(arr.unshift(1000)).toBe(4);
402 |     });
403 |   });
404 | 
405 |   describe('#push', function() {
406 |     it('adds elements to the end of an array', function() {
407 |       arr.push(7);
408 |       expect(arr[arr.length-1]).toBe(7);
409 |     });
410 |     it('returns the new length', function() {
411 |       expect(arr.push(1000)).toBe(4);
412 |     });
413 |   });
414 | });
415 | 
416 | // the idea here is that we want to test arrays but arrays are a very large topic
417 | // so we'll break it down into smaller describe blocks, and in each of these describe blocks will cover individual array methods
418 | ```
419 | 
420 | #### Pending Tests
421 | 
422 | We can mark tests as pending when we don't know exactly what we'll be testing or if we do not want to run a specific test
423 | 
424 | We can mark a test as pending by either omitting a callback function to the 'it' function, adding the 'pending'
425 | function inside, or simply placing an X before the 'it' function
426 | 
427 | ```javascript
428 | describe('Pending specs', function() {
429 | 
430 |   xit('can start with an xit', function() {
431 |     expect(true).toBe(true);
432 |   });
433 | 
434 |   it('is a pending test if there is no callback function');
435 | 
436 |   it('is pending if the pending function is invoked inside the callback', function() {
437 |     expect(2).toBe(2);
438 |     pending();
439 |   });
440 | 
441 | });
442 | ```
443 | 
444 | #### Number of Expect's
445 | 
446 | If the testing of one unit needs more than one 'expect' - use more; just make sure we are not testing several aspects of a unit which do not belong together in a single one test case
447 | 
448 | ```javascript
449 | // not great
450 | 
451 | describe('Earth', function() {
452 |   it('is round and has a method to check what number it is from the sun', function() {
453 |     expect(earth.isRound()).toBe(true);
454 |     expect(earth.howFarFromSun).toBe(jasmine.any(Function));
455 |     expect(earth.howFarFromSun()).toBe(3);
456 |   });
457 | });
458 | 
459 | // better
460 | 
461 | describe('Earth', function() {
462 |   it('is round', function() {
463 |     expect(earth.isRound()).toBe(true);
464 |   it('has a method to check what number it is from the sun', function() {
465 |     expect(earth.howFarFromSun).toBe(jasmine.any(Function));
466 |     expect(earth.howFarFromSun()).toBe(3);
467 |   });
468 | });
469 | ```
470 | 
471 | ### Mocking
472 | 
473 | When unit testing, we strive to isolate specific functionality and how this functionality behaves under a variety of circumstances
474 | 
475 | Unfortunately, many functions or objects may depend on other parts of our application; these can include other functions and data sources, and even previously executed functions; this is what mocking is used for
476 | 
477 | To isolate the behavior of the object you want to replace the other objects by mocks that simulate the behavior of the real objects; this is useful if the real objects are impractical to incorporate into the unit test
478 | 
479 | A mock is a fake object that poses as a function without having to go through the overhead of creating the real object; when we create a mock object, it creates a fake object that takes the place of the real object
480 | 
481 | We can then define what methods are called and their return values from within our mock object
482 | 
483 | Mocks can be used to retrieve certain values like how many times the mock function was called, what value the function returned, and how many parameters the function was called with
484 | 
485 | In short, mocking is creating objects that simulate the behavior of real objects.
486 | 
487 | - Some people differenciate mocking and stubbing (stub being a 'minimal' simulated object which implements just enough behavior to allow the object under the test to execute a test)
488 | - See more: https://stackoverflow.com/questions/2665812/what-is-mocking
489 | 
490 | 
491 | ### Spies
492 | 
493 | In Jasmine mocks are referred to as spies
494 | 
495 | - Jasmine has test double functions called spies
496 | - A spy can stub (mimic) any function and track calls to it and all its arguments
497 | - Spies only exist in the 'describe' or 'it' block in which they are defined
498 | - Spies are removed after each spec
499 | - There are special matchers for interacting with spies
500 | - A spy listens to method calls on your objects and can be asked if and how a method got called later on
501 | - More info: https://blog.codeship.com/jasmine-spyon/
502 | 
503 | #### Creating a Spy
504 | 
505 | There are two ways to create a spy in Jasmine: the spyOn() function and the jasmine.createsBy() function
506 | - spyOn() can only be used when the method exists on an object 
507 | - jasmine.createsBy() will return a brand new function
508 | 
509 | ```javascript
510 | // when we are spying on an existing function, make sure to use spyOn()
511 | 
512 | function add(a, b, c) {
513 |   return a + b + c;
514 | }
515 | // this function is attached to the 'window' object (it's in the global scope)
516 | 
517 | // spy on the 'add' function and test to see if our spy has been called
518 | decribe('add', function() {
519 |   var addSpy, result;
520 |   beforeEach(function() {
521 |     addSpy = spyOn(window, 'add');
522 |     result = addSpy();
523 |   });
524 |   it('can have params tested', function() {
525 |     expect(addSpy).toHaveBeenCalled();
526 |   });
527 | });
528 | 
529 | // Notice here that we don't care about any kind of return value; we just want to make sure that our function is called
530 | // So if our function had to go through an expensive process like connecting to a database we wouldn't have to worry about any of that now, we're just faking the behavior of this function
531 | ```
532 | 
533 | #### Testing Parameters
534 | 
535 | We can use toHaveBeenCalledWith matcher to test default parameters or the type of certain parameters
536 | 
537 | ```javascript
538 | function add(a, b, c) {
539 |   return a + b + c;
540 | }
541 | 
542 | decribe('add', function() {
543 |   var addSpy, result;
544 |   beforeEach(function() {
545 |     addSpy = spyOn(window, 'add');
546 |     result = addSpy();
547 |   });
548 |   it('can have params tested', function() {
549 |     expect(addSpy).toHaveBeenCalled();
550 |     expect(addSpy).toHaveBeenCalledWith(1, 2, 3);
551 |   });
552 | });
553 | ```
554 | 
555 | #### Returning a Value
556 | 
557 | We can use .and.callThrough function to make sure that we store the return value instead of just undefined (if our spy actually returns the correct value)
558 | 
559 | ```javascript
560 | function add(a, b, c) {
561 |   return a + b + c;
562 | }
563 | 
564 | decribe('add', function() {
565 |   var addSpy, result;
566 |   beforeEach(function() {
567 |     addSpy = spyOn(window, 'add').and.callThrough();
568 |     result = addSpy(1, 2, 3);
569 |   });
570 |   it('can have a return value tested', function() {
571 |     expect(result).toEqual(6);
572 |   });
573 | });
574 | ```
575 | 
576 | ##### Why Use a Spy
577 | 
578 | Why would we bother to use a spy to test a return value instead of the actual function?
579 | 
580 | It's possible that the original function takes a while to run or depends on other objects that we cannot access
581 | 
582 | With unit testing we want to test small units of our code so we should not be invoking lots of functions that depend on other ones; We should strive to use dummy data whenever possible to speed up our tests
583 | 
584 | #### Testing frequency
585 | 
586 | We can test the frequency or how many times a function is called; this is useful if we want to make sure a function is only called a certain amount of times or maybe we want the function to only be invoked once
587 | 
588 | To test this we can use the 'calls' object on the spy to access the count or see if the function has been called at
589 | all
590 | 
591 | ```javascript
592 | function add(a, b, c) {
593 |   return a + b + c;
594 | }
595 | 
596 | decribe('add', function() {
597 |   var addSpy, result;
598 |   beforeEach(function() {
599 |     addSpy = spyOn(window, 'add').and.callThrough();
600 |     result = addSpy(1, 2, 3);
601 |   });
602 |   it('can have a return value tested', function() {
603 |     expect(addSpy.calls.any()).toBe(true);
604 |     expect(addSpy.calls.count()).toBe(1);
605 |     expect(result).toEqual(6);
606 |   });
607 | });
608 | ```
609 | 
610 | ### Clock
611 | 
612 | Clock is used to test time dependent code and asynchronous code (this includes setInterval, setTimeout, as well as operations that use dates)
613 | - It is installed by jasmine.clock.install()
614 |   - This is commonly done in a beforeEach callback
615 | - We need to make sure to uninstall the clock after we are done to restore the original functions (after each spec to make sure we do not have any unintended side effects)
616 |   - Usually done in afterEach callback
617 | 
618 | 
619 | #### setTimeout
620 | 
621 | ```javascript
622 | describe('a simple setTimeout', function() {
623 |   var sample;
624 |   beforeEach(function() {
625 |     sample = jasmine.createSpy('sampleFunction'); // dummy function
626 |     jasmine.clock().install();
627 |   });
628 | 
629 |   afterEach(function() {
630 |     jasmine.clock().uninstall();
631 |   });
632 | 
633 |   it('is only invoked after 1000 ms', function() {
634 |     setTimeout(function() {
635 |       sample();
636 |     }, 1000);
637 |     jasmine.clock().tick(999); // moving clock by a certain amount of time
638 |     expect(sample).not.toHaveBeenCalled();
639 |     jasmine.clock().tick(1);
640 |     expect(sample).toHaveBeenCalled();
641 |   });
642 | });
643 | ```
644 | 
645 | #### setInterval
646 | 
647 | ```javascript
648 | describe('a simple setInterval', function() {
649 |   var dummyFunction;
650 | 
651 |   beforeEach(function() {
652 |     dummyFunction = jasmine.createSpy('dummyFunction');
653 |     jasmine.clock().install();
654 |   });
655 | 
656 |   afterEach(function() {
657 |     jasmine.clock.uninstall();
658 |   });
659 | 
660 |   it('check to see the number of times the function is invoked', function() {
661 |     setInterval(function() {
662 |       dummyFunction();
663 |     }, 1000);
664 |     jasmine.clock().tick(999);
665 |     expect(dummyFunction.calls.count()).toBe(0);
666 |     jasmine.clock().tick(1000);
667 |     expect(dummyFunction.calls.count()).toBe(1);
668 |     jasmine.clock().tick(1);
669 |     expect(dummyFunction.calls.count()).toBe(2);
670 |   });
671 | });
672 | ```
673 | 
674 | #### Testing Async Code
675 | 
676 | Jasmine also has support for running specs that require testing async code (this includes timers like setInterval, setTimeout as well as HTTP request with something like ajax)
677 | 
678 | beforeAll, afterAll, beforeEach, afterEach, and 'it' take an optional single argument (commonly called 'done') that sould be called when the async work is complete
679 | 
680 | Test will not complete until the 'done' function is invoked (Jasmine has an internal timer which it runs before the test fails to make sure that the test is not waiting too long)
681 | - Jasmine will wait 5 seconds by default; the internal timer can be modified with jasmine.DEFAULT_TIMEOUT_INTERVAL (it is done rarely)
682 | 
683 | ```javascript
684 | function getUserInfo(username) {
685 |   return $.getJSON('https://api.github.com/users/' + username);
686 | }
687 | 
688 | describe('#getUserInfo', function() {
689 |   // passing a parameter 'done' to the callback of the 'it' function
690 |   it('returns the correct name for the user', function(done) {
691 |     // invoking the getUserInfo function and passing the user name of elie, and then attaching a .then to handle the resolved promise and passing a callback to .then which contains the data we get back from the GitHub API
692 |     getUserInfo('elie').then(function(data) {
693 |       // inside of this callback we test to see if the name property on the data we got back is the name which is expected
694 |       expect(data.name).toBe('Elie Schoppik');
695 |       done(); // making sure the test doesn't time out
696 |     });
697 |   });
698 | });
699 | ```
700 | 
701 | ---
702 | 
703 | ## Mocha


--------------------------------------------------------------------------------
/basic theory/basic JS info.md:
--------------------------------------------------------------------------------
   1 | # JS knowledge doc
   2 | 
   3 | #### Table of Contents
   4 | 
   5 | - [JS knowledge doc](#js-knowledge-doc)
   6 |       - [Table of Contents](#table-of-contents)
   7 |   - [DRY concept](#dry-concept)
   8 |   - [Semicolons](#semicolons)
   9 |   - [Data types](#data-types)
  10 |   - [Numerical operators](#numerical-operators)
  11 |   - [Strings](#strings)
  12 |   - [Variables](#variables)
  13 |   - [Methods for exercises](#methods-for-exercises)
  14 |   - [Comparison operators](#comparison-operators)
  15 |   - [Logical operators](#logical-operators)
  16 |     - ['Truthy' or 'Falsy' statements](#truthy-or-falsy-statements)
  17 |   - [Conditionals](#conditionals)
  18 |     - [Ternary operator](#ternary-operator)
  19 |   - [Loops](#loops)
  20 |     - [While loop](#while-loop)
  21 |     - [For loop](#for-loop)
  22 |   - [Functions](#functions)
  23 |     - [Arguments](#arguments)
  24 |     - [Return keyword](#return-keyword)
  25 |     - [Function Declaration vs Function Expression](#function-declaration-vs-function-expression)
  26 |     - [Pure Functions](#pure-functions)
  27 |     - [Scope](#scope)
  28 |     - [Higher Order Functions](#higher-order-functions)
  29 |   - [Arrays](#arrays)
  30 |     - [Some array methods](#some-array-methods)
  31 |     - [Array iteration](#array-iteration)
  32 |     - [Comparing arrays and objects](#comparing-arrays-and-objects)
  33 |       - [Array](#array)
  34 |       - [Object](#object)
  35 |     - [Nested objects and arrays](#nested-objects-and-arrays)
  36 |     - [Adding methods to an object](#adding-methods-to-an-object)
  37 |     - [The Keyword This](#the-keyword-this)
  38 | 
  39 | ## DRY concept
  40 | 
  41 | Don't Repeat Yourself\
  42 | Code should be as DRY as possible, it's not good to repeat your code, i.e. you should simplify and optimize everything
  43 | 
  44 | ---
  45 | 
  46 | ## Semicolons
  47 | 
  48 | Some people omit semicolons, and some not\
  49 | Google format is to include semicolons everywhere except for function and class declaration after {} (see https://google.github.io/styleguide/jsguide.html#formatting-semicolons-are-required or https://google.github.io/styleguide/javascriptguide.xml?showone=Semicolons#Semicolons (older version))
  50 | 
  51 | ## Data types
  52 | 
  53 | 1. Number 
  54 |     - 4
  55 |     - 9.8
  56 |     - -10
  57 | 2. String 
  58 |     - "hello world"
  59 |     - '32'
  60 | 3. Boolean 
  61 |     - true
  62 |     - false
  63 | 4. Null
  64 |    - Basically means 'nothing'
  65 | 5. Undefined
  66 |    - Variable that is declared but not initialized to a value
  67 | 
  68 | ## Numerical operators
  69 | 
  70 | 1. Regular (+, -, /, *)
  71 | 2. Modulo (mod)
  72 |     - 10 % 3 // 1
  73 |     - 24 % 2 // 0
  74 | 
  75 | ## Strings
  76 | 
  77 | 1. Single of double quotes are ok
  78 |     - Although "I can't stop eating" is valid, but 'I can't stop' is not (see 'Escape characters')
  79 | 2. Concatenation
  80 |     - `'charlie' + 'brown' // 'charliebrown'`
  81 | 3. Escape characters begin with \
  82 |     - `'I can\'t stop'`
  83 | 4. Length property
  84 |     - `'hello world!'.length // 12`
  85 | 5. Access individual chars using [] and index
  86 |     - `'hello'[4] // 'o'`
  87 | 
  88 | ## Variables
  89 | 
  90 | 1. Container that stores values
  91 |     - `var yourVariableName = yourValue;`
  92 | 2. Store all the values
  93 | 3. Recalled by the name
  94 | 4. We can update the value
  95 |     ```javascript
  96 |     var name = 'Bob';
  97 |     name = 'Dima';
  98 |     ```
  99 | 5. camelCase in JS (there is also snake_case and kebab-case or dash-case)
 100 | 
 101 | ##  Methods for exercises
 102 | 
 103 | 1. alert()
 104 | 2. prompt()
 105 |     - Popup where user writes something
 106 |     - `prompt('What is your name');`
 107 |     - `var userName = prompt('What is your name?');`
 108 | 3. console.log()
 109 | 4. string.indexOf('X') 
 110 |     - returns position of X in a string
 111 |     - X can be a word, but it will return position where X starts in the string, i.e. 
 112 |         ```javascript
 113 |         var str = 'Hello world';
 114 |         str.indexOf('World'); // 6
 115 |         ```
 116 |     - returns -1 if X is not in the string
 117 | 5. Number()
 118 |     - turns string into a number
 119 | 6. String()
 120 |     - turns number into a string
 121 | 7. Math.sqrt()
 122 |     - returns a square root of a number
 123 | 8. str.includes('X')
 124 |     - checks if str includes X
 125 | 9. Math.random()
 126 |     - returns a random number between 0 and 1 (exclusively)
 127 |     - to mimic a dice roll use Math.random() * 6 + 1
 128 |         - multiplying by 6 gives us the 'dice' and adding one is to get number about 5.999...
 129 | 10. Math.floor()
 130 |     - 'chops' off the decimal part of a number
 131 | 
 132 | ---
 133 | 
 134 | ## Comparison operators
 135 | 
 136 | They are: >, >=, <, <=, == (equal), != (not equal), === (equal value and type), !== (not equal value or equal type)
 137 | 
 138 | x = 5
 139 | 
 140 | **Examples**
 141 | 
 142 | - `x == "5" // true`\
 143 | Uses type coercion: it takes 2 variables and turns them into similar type\
 144 | When the operands of an operator are different types, one of them will be converted to an "equivalent" value of the other operand's type
 145 |     ```javascript
 146 |     boolean == integer // Boolean is converted to an integer, false = 0, true = 1
 147 |     var x = 99;
 148 |     X == "99" // true;
 149 |     x === "99" // false;
 150 |     var y = null;
 151 |     y == undefined // true;
 152 |     y === undefined // false;
 153 |     ```
 154 | - `x != "b" // true`
 155 | - `x === "5" // false`
 156 | - `x !== "5" // true`
 157 | 
 158 |  **Weird examples**
 159 | 
 160 | - `true == "1" // true (only for 1)`
 161 | - `0 == false // true`
 162 | - `null == undefined // true`
 163 | - `NaN == NaN // false (Not a Number)`
 164 | 
 165 | ## Logical operators
 166 | 
 167 | x = 5, y = 9
 168 | 
 169 | 1. && - And (not sure if it is used in English, but it is multiplication)
 170 |     - `(x < 10 && x !==5 // false)`
 171 | 2. || - Or (addition)
 172 |     - `(y > 9 || x === 5 // true)`
 173 | 3. ! - Not
 174 |     - `(!(x === y) // true)`
 175 | 
 176 | ### 'Truthy' or 'Falsy' statements
 177 | 
 178 | Values that aren't actually true or false, are still inherintly 'truthy' or 'falsy' when evaluated in a boolean statement (try checking with !)
 179 | 
 180 | - `!'hello' // false`
 181 | - `!!'hello' // true`
 182 | - `!!'' // false`
 183 | - `!!-1 // true`
 184 | 
 185 | **Falsy values (everything else is truthy):**
 186 | 1. false
 187 | 2. 0
 188 | 3. ""
 189 | 4. null
 190 | 5. undefined
 191 | 6. NaN
 192 | 
 193 | ## Conditionals
 194 | 
 195 | Keywords: if, else if (it is one word for JS), else
 196 | 
 197 | Syntax:
 198 | 
 199 | ```javascript
 200 | if (age < 18) {
 201 |     console.log("Sorry, you are not allowed to enter");
 202 | }
 203 | else if (age < 21) { // Equals to (age > 18 && age < 21)
 204 |     console.log("You can enter, but cannot drink");
 205 | }
 206 | else {
 207 |     console.log("Come on in. You can drink");
 208 | }
 209 | ```
 210 | 
 211 | ### Ternary operator
 212 | 
 213 | The conditional (ternary) operator is the only JavaScript operator that takes three operands; it is frequently used as a shortcut for the `if` statement
 214 | 
 215 | Syntax:
 216 | 
 217 | ```javascript
 218 | var age = 26;
 219 | var beverage = (age >= 21) ? "Beer" : "Juice";
 220 | console.log(beverage); // "Beer"
 221 | ```
 222 | 
 223 | With null:
 224 | 
 225 | ```javascript
 226 | function greeting(person) {
 227 |     var name = person ? person.name : "stranger";
 228 |     return "Howdy, " + name;
 229 | }
 230 | 
 231 | console.log(greeting({name: 'Alice'}));  // "Howdy, Alice"
 232 | console.log(greeting(null));             // "Howdy, stranger"​​​​​
 233 | ```
 234 | 
 235 | Conditional chain:
 236 | 
 237 | ```javascript
 238 | function example(…) {
 239 |     return condition1 ? value1
 240 |          : condition2 ? value2
 241 |          : condition3 ? value3
 242 |          : value4;
 243 | }
 244 | 
 245 | // Equivalent to:
 246 | 
 247 | function example(…) {
 248 |     if (condition1) { return value1; }
 249 |     else if (condition2) { return value2; }
 250 |     else if (condition3) { return value3; }
 251 |     else { return value4; }
 252 | }
 253 | ```
 254 | 
 255 | ---
 256 | 
 257 | ## Loops
 258 | 
 259 | ### While loop
 260 | 
 261 | Repeats a code while a condition is true
 262 | 
 263 | ```javascript
 264 | while (condition) {
 265 |     //code
 266 | }
 267 | // Printing numbers from 1 to 5
 268 | var count = 1;
 269 | while (count < 6) {
 270 |     console.log('Count is ' + count);
 271 |     count++; // count += 2 if you want to add 2
 272 | }
 273 | ```
 274 | 
 275 | Printing each character in a string example
 276 | 
 277 | ```javascript
 278 | // string we are looping over:
 279 | var str = 'Hello';
 280 | // first char is at index 0
 281 | var count = 0;
 282 | 
 283 | while (count < str.length) {
 284 |     console.log(str[count]);
 285 |     count++;
 286 | }
 287 | ```
 288 | 
 289 | **Avoid infinite loops (a loop where condition can't be false)**
 290 | 
 291 | ### For loop
 292 | 
 293 | Syntax
 294 | 
 295 | ```javascript
 296 | for (init; condition; step) {
 297 |     // code
 298 | }
 299 | 
 300 | for (var count = 1; count < 6; count++) { // variable can be initialized here, exists only inside of the loop; we can use count += 5 or anything
 301 |     console.log(count);
 302 | }
 303 | ```
 304 | 
 305 | Printing each character in a string with a for loop
 306 | 
 307 | ```javascript
 308 | var str = 'hello';
 309 | 
 310 | for (var i = 0; i < str.length; i++) {
 311 |     console.log(str[i]);
 312 | })
 313 | ```
 314 | ---
 315 | 
 316 | ## Functions
 317 | 
 318 | Functions let wrap bits of code up into reusable packages, sort of a building block
 319 | 
 320 | Declare a function first
 321 | 
 322 | ```javascript
 323 | function doSomething() {
 324 |     console.log('Doing something');
 325 |     console.log('Yes, I am doing something');
 326 | }
 327 | ```
 328 | 
 329 | Then call it (parentheses are important)
 330 | ```javascript
 331 | doSomething();
 332 | // Doing something
 333 | // Yes, I am doing something
 334 | ```
 335 | 
 336 | ### Arguments
 337 | 
 338 | Input for the function
 339 | 
 340 | ```javascript
 341 | function square(num) {
 342 |     console.log(num*num);
 343 | }
 344 | 
 345 | square(10); // prints 100
 346 | ```
 347 | 
 348 | Functions can have many arguments
 349 | 
 350 | ```javascript
 351 | function volume(length, width, height) {
 352 |     console.log(length * width * height);
 353 | }
 354 | ```
 355 | 
 356 | If an argument is missing, there will be no error message
 357 | 
 358 | ```javascript
 359 | function greet(person1, person2, person3) {
 360 |     console.log('Hi ' + person1);
 361 |     console.log('Hi ' + person2);
 362 |     console.log('Hi ' + person3);
 363 | }
 364 | 
 365 | greet('Harry', 'Hermione');
 366 | // Hi Harry
 367 | // Hi Hermione
 368 | // Hi undefined
 369 | ```
 370 | 
 371 | ### Return keyword
 372 | Function does something with inputs and returns, sends back an output value\
 373 | Returns only one thing per function (if there are many returns, only the first one will work)
 374 | 
 375 | It is possible to store this value in a variable
 376 | 
 377 | ```javascript
 378 | function square(x) {
 379 |     return x * x;
 380 | }
 381 | 
 382 | var result = square(4);
 383 | // result = 16
 384 | ```
 385 | 
 386 | The return keyword stops execution of a function
 387 | 
 388 | ```javascript
 389 | function capitalize(str) {
 390 |     if (typeof str === 'number') {
 391 |         return 'that\'s not a string!'
 392 |     }
 393 |     return str.charAt(0).toUpperCase() + str.slice(1);
 394 | }
 395 | 
 396 | var city = 'paris'; // 'paris'
 397 | var capital = capitalize(city); // 'Paris'
 398 | 
 399 | var num = 378;
 400 | var capital = capitalize(num); // 'that's not a string!
 401 | ```
 402 | 
 403 | ### Function Declaration vs Function Expression
 404 | 
 405 | Function declaration:
 406 | 
 407 | ```javascript
 408 | function capitalize(str) {
 409 |     return str.charAt(0).toUpperCase() + str.slice(1);
 410 | }
 411 | 
 412 | // function functionName (argument) {}
 413 | ```
 414 | 
 415 | Function expression:
 416 | 
 417 | ```javascript
 418 | var capitalize = function(str) {
 419 |     return str.charAt(0).toUpperCase() + str.slice(1);
 420 | }
 421 | 
 422 | // var variableName = function(argument) {} 
 423 | // doesn't require a name
 424 | ```
 425 | 
 426 | In case of expression: if we decide to change 'capitalize' to be equal to something else, the function is lost
 427 | 
 428 | ```javascript
 429 | var sayHi = function() {
 430 |     console.log('Hi');
 431 | }
 432 | 
 433 | // sayHi()
 434 | // Hi
 435 | 
 436 | sayHi = 35
 437 | 
 438 | // sayHi()
 439 | // sayHi is not a function
 440 | ```
 441 | 
 442 | ### Pure Functions
 443 | 
 444 | It is a functional programming concept
 445 | 
 446 | It is a function with no side effects
 447 | - It does not modify its inputs
 448 | - It does not modify any global state
 449 | - It is repeatable (same inputs -> same outputs)
 450 | 
 451 | ```javascript
 452 | // not a pure function (the result of this function will keep changing our array)
 453 | function doubleVals(arr) {
 454 |     for (var i = 0; i < arr.length; i++) {
 455 |         arr[i] = arr[i] * 2;
 456 |     }
 457 |     return arr;
 458 | }
 459 | 
 460 | // pure function, we're not modifying an input since array.map returns a new array
 461 | function doubleVals(arr) {
 462 |   return arr.map(v => v * 2);
 463 | }
 464 | 
 465 | // not a pure function (it is modifying a global state, adds a property to the object)
 466 | var person = {id: 53, name: "Tim"};
 467 | function addJob(job){
 468 |     person.job = job;
 469 | }
 470 | addJob("Instructor");
 471 | 
 472 | // pure function
 473 | // we're taking that person object as a parameter, since that data is involved in what we're doing in the function, it should be a parameter to our function
 474 | // also, we're not modifying that person object directly, we're using Object.assign to create a new object which is a combination of the original object, and our new value that we want to add (job)
 475 | var person = {id: 53, name: "Tim"};
 476 | function addJob(personObj, job){
 477 |     return Object.assign({},
 478 |                         personObj,
 479 |                         {job});
 480 | }
 481 | addJob(person, "Instructor");
 482 | 
 483 | // another way to write that same function as a pure function (using object spread operator)
 484 | // spread operator takes all the keys and the values from that object, and puts it in this new object that we're creating
 485 | // any key to the right of that spread operator overwrites any key that may have been an object on the left
 486 | // if Person object in this case had a key called job, job would be overwritten, and if it didn't have a key called job then we would also have the new job
 487 | var person = {id: 53, name: "Tim"};
 488 | function addJob(personObj, job){
 489 |     return {...personObj, job}; // job is shorthand for job: job
 490 | }
 491 | addJob(person, "Instructor");
 492 | ```
 493 | 
 494 | ### Scope
 495 | 
 496 | Scope in JS refers to the context that some code is being executed in\
 497 | Scope determines which variables and properties are visible in the function
 498 | 
 499 | ```javascript
 500 | function doMath() {
 501 |     var x = 40;
 502 |     console.log(x);
 503 | }
 504 | 
 505 | // doMath()
 506 | // 40
 507 | // x
 508 | // x is not defined
 509 | ```
 510 | 
 511 | This example shows that there are two scopes: inside of the function, and outside (global scope, not inside of any function)\
 512 | X is visible only inside of the function doMath
 513 | 
 514 | If we define x and access it when we're outside of the function (in the global scope), we will get the defined value
 515 | 
 516 | ```javascript
 517 | var x = 'hello';
 518 | 
 519 | // x
 520 | // 'hello'
 521 | ```
 522 | 
 523 | But if we run function again, we will get the value returned by the function
 524 | 
 525 | ```javascript
 526 | // doMath()
 527 | // 40
 528 | ```
 529 | 
 530 | When we create a function, it has its own scope, its own set of variables\
 531 | But it doesn't mean that we can't use variables defined outside of the function inside of it
 532 | 
 533 | ```javascript
 534 | var y = 99;
 535 | 
 536 | // y
 537 | // 99
 538 | 
 539 | function doMoreMath() {
 540 |     console.log(y);
 541 | }
 542 | 
 543 | // doMoreMath()
 544 | // 99
 545 | ```
 546 | 
 547 | What this means is that 'child' scopes have access to variables defined in the 'parent' scope
 548 | 
 549 | Functions use previously declared, available variables, they do not declare another one in the child scope
 550 | 
 551 | ```javascript
 552 | var y = 99; // y is declared in the global scope
 553 | 
 554 | // y
 555 | // 99
 556 | 
 557 | function doMoreMath() {
 558 |     y = 100; // y is changed inside of the function
 559 |     console.log(y);
 560 | }
 561 | 
 562 | // doMoreMath()
 563 | // 100
 564 | // y
 565 | // 100
 566 | ```
 567 | 
 568 | This does not happen if we specifically declare a new variable inside of the function (even with the same name; it exists only in the function scope)
 569 | 
 570 | ```javascript
 571 | var phrase = 'hi there';
 572 | 
 573 | // phrase
 574 | // 'hi there'
 575 | 
 576 | function doSomething() {
 577 |     var phrase = 'goodbye';
 578 |     console.log(phrase);
 579 | }
 580 | 
 581 | // doSomething()
 582 | // 'goodbye'
 583 | // phrase
 584 | // 'hi there'
 585 | ```
 586 | 
 587 | ### Higher Order Functions
 588 | 
 589 | Higher order functions are functions that either take a function as an argument or they return another function
 590 | 
 591 | ```javascript
 592 | function sing() {
 593 |     console.log('Twinkle twinkle...');
 594 |     console.log('How I wonder...');
 595 | }
 596 | 
 597 | setInterval(sing, 1000); // (function (no parentheses since we are not the ones calling the function), interval in ms)
 598 |  
 599 |  // 2 (a (random?) number which is used to stop setInterval)
 600 |  // 'Twinkle twinkle...'
 601 |  // 'How I wonder...'
 602 |  // 'Twinkle twinkle...'
 603 |  // 'How I wonder...'
 604 | 
 605 | clearInterval(2); // number which was given by setInterval
 606 | ```
 607 | 
 608 | Sometimes we want to run some code every second, but we don't want to define a separate function ahead of time
 609 | 
 610 | ```javascript
 611 | setInterval(function() {
 612 |     console.log('Example of an anonymous function');
 613 | }, 2000);
 614 | ```
 615 | ---
 616 | 
 617 | ## Arrays
 618 | 
 619 | Array is a data structure, a way of storing data, holding information using JS
 620 | 
 621 | Arrays can be initialized in 2 ways:
 622 | 
 623 | ```javascript
 624 | var friends = []; // no friends
 625 | var friends = new Array() // uncommon way (a function which creates a new array)
 626 | 
 627 | var friend1 = 'Charlie';
 628 | var friend2 = 'Liz';
 629 | var friend3 = 'David';
 630 | var friend3 = 'Matt';
 631 | 
 632 | var friends = ['Charlie', 'Liz', 'David', 'Matt'];
 633 | ```
 634 | 
 635 | Arrays can hold any type of data and have a length property
 636 | 
 637 | ```javascript
 638 | var collection = [45, true, 'Cake', null];
 639 | collection.length // 4
 640 | 
 641 | var friendGroups = [
 642 |     ['Harry', 'Ron', 'Hermione'],
 643 |     ['Malfoy', 'Crabbe', 'Goyle'],
 644 |     ['Mooney', 'Wormtail', 'Prongs']
 645 | ]
 646 | 
 647 | ```
 648 | 
 649 | Arrays are indexed starting at 0, and every slot has a correspondent number
 650 | 
 651 | We can retreive or change data by index, or even add new data:
 652 | 
 653 | ```javascript
 654 | console.log(friends[1]); // Liz
 655 | console.log(friendGroups[2][0]); // Mooney
 656 | 
 657 | friends[0] = 'Chuck'; // changes Charlie to Chuck
 658 | 
 659 | friends[4] = 'Amelia'; // adds Amelia to the array
 660 | 
 661 | friends[10] = 'Danny'; // items from 5 to 9 will be undefined
 662 | ```
 663 | 
 664 | ### Some array methods
 665 | 
 666 | Push is used to add to the end of an array\
 667 | Pop is used to remove the last item in an array
 668 | 
 669 | ```javascript
 670 | var colors = ['red', 'green', 'blue'];
 671 | colors.push('black'); // 'red', 'green', 'blue', 'black'; and returns number of elements in the array
 672 | colors.pop(); // 'red', 'green', 'blue'; returns the removed element
 673 | 
 674 | var col = colors.pop(); // blue
 675 | ```
 676 | 
 677 | Unshift is used to add to the front of an array\
 678 | Shift is used to remove the first item in an array
 679 | 
 680 | ```javascript
 681 | var colors = ['red', 'green', 'blue'];
 682 | colors.unshift('infrared'); // 'infrared', 'red', 'green', 'blue'; returns number of elements in the array
 683 | colors.shift(); // 'red', 'green', 'blue'; returns the removed element
 684 | 
 685 | var col = colors.shift(); // red
 686 | ```
 687 | 
 688 | IndexOf is used to find the index of an item in an array
 689 | 
 690 | ```javascript
 691 | var friends = ['Charlie', 'Liz', 'David', 'Matt', 'Liz'];
 692 | 
 693 | // returns the first index at which a given element can be found
 694 | friends.indexOf('David'); // 2
 695 | friends.indexOf('Liz'); // 1, not 4
 696 | friends.indexOf('Hagrid'); // -1 (element is not present)
 697 | ```
 698 | 
 699 | Slice is used to copy parts of an array
 700 | 
 701 | ```javascript
 702 | var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
 703 | 
 704 | // use slice to copy the 2nd and 3rd fruits
 705 | // specify index where the new array starts (1) and ends (3);
 706 | var citrus = fruits.slice(1, 3); // citrus contains 'Orange', 'Lemon'
 707 | 
 708 | // this doesn't change the original fruits array
 709 | 
 710 | // you can also use slice() to copy an entire array
 711 | var nums = [1, 2, 3];
 712 | var moreNums = nums.slice();
 713 | // both arrays are [1, 2, 3]
 714 | ```
 715 | 
 716 | Splice is used to remove specific number of elements out of an array
 717 | 
 718 | ```javascript
 719 | var nums = [12, 24, 48, 56, 72];
 720 | nums.splice(3, 1); // (index, number of items to delete); returns the removed element(s)
 721 | // nums = [12, 24, 48, 72]
 722 | ```
 723 | 
 724 | ### Array iteration
 725 | 
 726 | Using a for loop to iterate over an array (dealing with number which is used to access the array)
 727 | 
 728 | ```javascript
 729 | var colors = ['red', 'orange', 'blue', 'green'];
 730 | 
 731 | for (var i = 0; i < colors.length; i++) {
 732 |     console.log(colors[i]);
 733 | }
 734 | ```
 735 | 
 736 | Using forEach to iterate over an array (more abstracted way)\
 737 | .forEach takes a callback function, that callback function is expected to have at least 1, but up to 3, arguments
 738 | 
 739 | The arguments are in a specific order:
 740 | - The first one represents each element in the array (per loop iteration) that .forEach was called on.
 741 | - The second represents the index of said element.
 742 | - The third represents the array that .forEach was called on (it will be the same for every iteration of the loop).
 743 | 
 744 | ```javascript
 745 | arr.forEach(someFunction) // general syntax
 746 | 
 747 | 
 748 | var colors = ['red', 'orange', 'blue', 'green'];
 749 | 
 750 | colors.forEach(function() {
 751 |     console.log('Something')
 752 | }
 753 | // Something x4
 754 | 
 755 | // using an anonymous function
 756 | colors.forEach(function(iLoveColor) { // iLoveColor is a placeholder, it holds a value of an item in an array
 757 |     console.log('I love ' + iLoveColor);
 758 | });
 759 | 
 760 | // using pre-written, named function
 761 | function printColor(colorWithAsterisks) {
 762 |     console.log('*****');
 763 |     console.log(colorWithAsterisks)
 764 |     console.log('*****');
 765 | };
 766 | 
 767 | colors.forEach(printColor); // note that there are no () since every time there are () with function, it is called
 768 | // will print all the colors from an array with ***** between them
 769 | ```
 770 | 
 771 | While loop can also be used, although we need a new variable count = 0 first\
 772 |  ``while (count < arr.length){};``
 773 | 
 774 | ---
 775 | 
 776 |  ## Objects
 777 | 
 778 |  Another data structure
 779 | 
 780 | ```javascript
 781 | // modelling a person
 782 | var person = ['Dan', 23, 'Moscow'];
 783 | 
 784 | // retrieving age
 785 | person[2];
 786 | 
 787 | // but what if the order is reversed or unknown?
 788 | // it is best to use an object
 789 | 
 790 | var person = {
 791 |     name: 'Dan',
 792 |     age: 23,
 793 |     city: 'Moscow'
 794 | };
 795 | ```
 796 | 
 797 | There are two ways to retrieve a data: bracket and dot notation
 798 | 
 799 | ```javascript
 800 | var person = {
 801 |     name: 'Dan',
 802 |     age: 23,
 803 |     city: 'Moscow'
 804 | };
 805 | 
 806 | // bracket notation (similar to arrays), but there is a string instead of a number
 807 | console.log(person['name']);
 808 | 
 809 | // dot notation (shorter and preferable, mostly)
 810 | console.log(person.name);
 811 | ```
 812 | 
 813 | You cannot use dot notation in some cases:
 814 | 
 815 | ```javascript
 816 | // you cannot use dot notation if the property starts with a number
 817 | someObject.1blah // INVALID
 818 | someObject['1blah'] // VALID
 819 | 
 820 | // you cannot use dot notation for property names with spaces
 821 | someObject.fav color // INVALID
 822 | someObject['fav color'] // VALID
 823 | 
 824 | // you cannot lookup using a variable with dot notation
 825 | var str = 'name';
 826 | someObject.str // doesn't look for 'name'
 827 | someObject[str] // does evalute str and looks for 'name'
 828 | ```
 829 | 
 830 | We can update data by accessing a property and reassigning it
 831 | 
 832 | ```javascript
 833 | var person = {
 834 |     name: 'Dan',
 835 |     age: 23,
 836 |     city: 'Moscow'
 837 | };
 838 | 
 839 | // updating age
 840 | person['age'] += 1;
 841 | // updating city
 842 | person.city = 'London';
 843 | ```
 844 | 
 845 | Like arrays, there are a few methods of initializing objects
 846 | 
 847 | ```javascript
 848 | // make an empty object and then add data to it
 849 | var person = {};
 850 | 
 851 | person.name: 'Dan';
 852 | person.age: 23;
 853 | person.city: 'Moscow';
 854 | 
 855 | // all at once (object literal notation)
 856 | var person = {
 857 |     name: 'Dan',
 858 |     age: 23,
 859 |     city: 'Moscow'
 860 | };
 861 | 
 862 | // another way of initializing an object
 863 | var person = new Object(); // function creating empty object
 864 | person.name: 'Dan';
 865 | person.age: 23;
 866 | person.city: 'Moscow';
 867 | ```
 868 | 
 869 | Object can hold all sorts of data
 870 | 
 871 | ```javascript
 872 | var someObject = {
 873 |     age: 52,
 874 |     color: 'purple',
 875 |     isHungry: true,
 876 |     friends: ['Harry', 'Ron'],
 877 |     pet: {
 878 |         name: 'Aragog',
 879 |         species: 'Spider',
 880 |         age: 36
 881 |     }
 882 | };
 883 | ```
 884 | 
 885 | ---
 886 | 
 887 | ### Comparing arrays and objects
 888 | 
 889 | #### Array 
 890 | - It is a list of data with a specific order
 891 | - Syntax:
 892 |     - ``var colors = ['red', 'green', 'blue'];``
 893 | - Retrieving data
 894 |     - Need to know the exact index of an item
 895 |     - ``colors[2];``
 896 |     - We can think of an array as a special type of object where key is always a number
 897 | - Adding new data
 898 |     - ``colors.push('black');``
 899 |     - Many methods (push, unshift) exist only because the order of items is important
 900 | - Updating data
 901 |     - We need to find an item first and then change it
 902 |     - ``colors[1] = 'yellow';``
 903 | 
 904 | #### Object
 905 | - There is no particular order in objects
 906 |     - Key: value pairs
 907 |     - In some languages are called dictionaries (word - definition)
 908 | - Syntax:
 909 |     - ``var dog = {name: 'Bubba', breed: 'Lab'};``
 910 |     - Rarely written in a one line
 911 | - Retrieving data
 912 |     - Need to know the property
 913 |     - ``dog['name'];``
 914 |     - ``dog.breed;``
 915 | - Adding new data
 916 |     - ``dog.age = 6;``
 917 |     - Just assign any key and value that you want
 918 | - Updating data
 919 |     - Look for the property you need to change, and change it 
 920 |     - ``dog.breed = 'Black Lab';``
 921 | 
 922 | ### Nested objects and arrays
 923 | 
 924 | ```javascript
 925 | // example of blog posts
 926 | var posts = [
 927 |     {
 928 |         title: 'Cats are mediocre',
 929 |         author: 'Colt',
 930 |         comments: ['Amazing post', 'terrible post']
 931 |     },
 932 |     {
 933 |         title: 'Cats are awesome',
 934 |         author: 'Cat',
 935 |         comments: ['<3', 'I hate cats']
 936 |     }
 937 | ]
 938 | 
 939 | posts.length // 2
 940 | posts[0].title // Cats are mediocre
 941 | posts[1].comments[1] // I hate cats
 942 | posts[1]['comments'][0] // <3
 943 | ```
 944 | 
 945 | ---
 946 | 
 947 | ### Adding methods to an object
 948 | 
 949 | We can add functions as properties, and in that case they are called methods
 950 | 
 951 | ```javascript
 952 | var obj = {
 953 |     name: 'Chuck',
 954 |     age: 45,
 955 |     isCool: false,
 956 |     friends: ['Bob', 'Tina'],
 957 |     add: function(x, y) {
 958 |         return x + y;
 959 |     }
 960 | }
 961 | 
 962 | add(); // won't work
 963 | obj.add(10, 5); // 15
 964 | ```
 965 | 
 966 | The reasons for this are:
 967 | - keeping the code organized, to group things logically together
 968 | - to avoid namespace collision
 969 |     ```javascript
 970 |     function speak() {
 971 |         return 'Woof';
 972 |     }
 973 |     speak(); // Woof
 974 | 
 975 |     function speak() {
 976 |         return 'Meow';
 977 |     }
 978 |     speak(); // Meow
 979 | 
 980 |     // the first function is lost, there was a namespace collision, i.e. two things have the same name
 981 | 
 982 |     var dogSpace = {};
 983 |     dogSpace.speak = function speak() {
 984 |         return 'Woof';
 985 |     }
 986 |     var catSpace = {};
 987 |     catSpace.speak = function speak() {
 988 |         return 'Meow';
 989 |     }
 990 |     ```
 991 | 
 992 | ### The Keyword This
 993 | 
 994 | 'This' is the way to share the data inside of an object\
 995 | Used in different contexts to do different things
 996 | 
 997 | For example, 'this' when used in methods refers to an object that the method is defined in
 998 | 
 999 | ```javascript
1000 | var comments = {};
1001 | 
1002 | comments.data = ['Good job', 'Not bad', 'Lame'];
1003 | 
1004 | // to print comments we could use something like this:
1005 | function print(arr) {
1006 |     arr.forEach(function(el) {
1007 |         console.log(el);
1008 |     });
1009 | }
1010 | 
1011 | print(comments.data); // prints comments from the 'data'
1012 | 
1013 | // instead we can write
1014 | comments.print = function () { // we remove argument from the function
1015 |     this.data.forEach(function(el) { // 'this' refers to the object 'comments'
1016 |         console.log(el);
1017 |     });
1018 | }
1019 | 
1020 | comments.print(); // prints comments from the 'data'
1021 | ```
1022 | 
1023 | ---


--------------------------------------------------------------------------------
/advanced theory/asynchronous JS.md:
--------------------------------------------------------------------------------
  1 | # Asynchronous JS
  2 | 
  3 | Asynchronous events are those occurring independently of the main program flow (Don't call us, we'll call you)
  4 | 
  5 | #### Table of Contents
  6 | 
  7 | - [Asynchronous JS](#asynchronous-js)
  8 |       - [Table of Contents](#table-of-contents)
  9 |   - [Callback Functions](#callback-functions)
 10 |     - [forEach](#foreach)
 11 |     - [findIndex](#findindex)
 12 |   - [The Stack and the Heap](#the-stack-and-the-heap)
 13 |     - [Call Stack](#call-stack)
 14 |     - [Heap](#heap)
 15 |     - [Stack Example](#stack-example)
 16 |   - [setTimeout and setInterval](#settimeout-and-setinterval)
 17 |     - [setTimeout](#settimeout)
 18 |     - [setInterval](#setinterval)
 19 |   - [The Event Loop and the Queue](#the-event-loop-and-the-queue)
 20 |       - [The Queue](#the-queue)
 21 |       - [The Event Loop](#the-event-loop)
 22 |       - [Queue Example](#queue-example)
 23 |       - [Queue Example: Waiting for the Stack to Empty](#queue-example-waiting-for-the-stack-to-empty)
 24 |       - [JavaScript Is Single Threaded](#javascript-is-single-threaded)
 25 |   - [Promises](#promises)
 26 |       - [Creating a Promise](#creating-a-promise)
 27 |       - [.then and .catch](#then-and-catch)
 28 |       - [Handling Errors](#handling-errors)
 29 |       - [Randomly Occuring Errors](#randomly-occuring-errors)
 30 |       - [setTimeout and Promises](#settimeout-and-promises)
 31 |       - [Asynchronous Handlers of .then and .catch](#asynchronous-handlers-of-then-and-catch)
 32 |     - [Promise chaining](#promise-chaining)
 33 |       - [Nested Async Callbacks](#nested-async-callbacks)
 34 |       - [Returing a Promise: Promise Chaining](#returing-a-promise-promise-chaining)
 35 |       - [Promise Chaining: Returning Data](#promise-chaining-returning-data)
 36 |       - [Nested Callbacks: Refactored](#nested-callbacks-refactored)
 37 |       - [Promise.all](#promiseall)
 38 |       - [Promises in Practice](#promises-in-practice)
 39 | 
 40 | ## Callback Functions
 41 | 
 42 | It is a function that is passed into another function as a parameter then invoked by that other function
 43 | - Higher order function is a function that accepts a callback as a parameter
 44 | 
 45 | ```javascript
 46 | function callback() {
 47 |   console.log('coming from callback');
 48 | }
 49 | 
 50 | function higherOrder(fn) {
 51 |   console.log('about to call callback');
 52 |   fn(); // callback function is invoked
 53 |   console.log('callback has been invoked');
 54 | }
 55 | 
 56 | higherOrder(callback);
 57 | ```
 58 | 
 59 | Callbacks are used for:
 60 | - Advanced array methods
 61 | - Browser events
 62 | - AJAX requests
 63 | - React development
 64 | 
 65 | ```javascript
 66 | function sendMessageConsole(message) {
 67 |   console.log(message);
 68 | }
 69 | 
 70 | function sendMessageAlert(message) {
 71 |   alert(message);
 72 | }
 73 | 
 74 | function sendMessageConfirm(message) {
 75 |   return confirm(message);
 76 | }
 77 | 
 78 | sendMessageAlert("Lots of duplication");
 79 | 
 80 | // lots of duplication, instead: 
 81 | function sendMessage(message, callback) {
 82 |   return callback(message);
 83 | }
 84 | 
 85 | sendMessage("Message for console", console.log);
 86 | 
 87 | sendMessage("Message for alert", alert);
 88 | 
 89 | var answer = sendMessage("Are you sure??", confirm);
 90 | 
 91 | // another example
 92 | function greet(name, formatter) {
 93 |   return "Hello, " + formatter(name);
 94 | }
 95 | 
 96 | function upperCaseName(name) {
 97 |   return name.toUpperCase();
 98 | }
 99 | 
100 | greet("Tim", upperCaseName);
101 | ```
102 | 
103 | The most often scenario is to use anonymous functions:
104 | 
105 | ```javascript
106 | function greet(name, formatter) {
107 |   return "Hello, " + formatter(name);
108 | }
109 | 
110 | greet("Tim", function(name) {
111 |   return name.toUpperCase();
112 | });
113 | ```
114 | 
115 | ### forEach
116 | 
117 | This function is used to iterate over items in an array
118 | 
119 | ```javascript
120 | var arr = [1,2,3,4,5,6];
121 | function double(arr) {
122 |   for(var i = 0; i < arr.length; i++) {
123 |     console.log(arr[i] * 2);
124 |   }
125 | }
126 | double(arr);
127 | 
128 | // with forEach
129 | var arr = [1,2,3,4,5,6];
130 | forEach(arr, function(number) {
131 |     console.log(number * 2);
132 | });
133 | ```
134 | 
135 | Syntax:
136 | 
137 | ```javascript
138 | function forEach(array, callback) {
139 |   // To be implemented
140 | }
141 | 
142 | // Callback signature
143 | function callback(curElement, currentIndex, array) {
144 |   // Implemented by the caller of forEach
145 | }
146 | 
147 | // Example with all parameters:
148 | var strings = ["my", "forEach", "example"];
149 | var result = "";
150 | 
151 | forEach(strings, function(str, index, array) {  
152 |   if (array.length - 1 !== index){
153 |     result += str + " ";
154 |   } else {
155 |     result += str + "!!!";
156 |   }
157 | });
158 | 
159 | // result = "my forEach example!!!"
160 | ```
161 | 
162 | ### findIndex
163 | 
164 | Returns the index of the first element in the array for which the callback returns a truthy value
165 | - -1 is returned if the callback never returns a truthy value
166 | 
167 | Syntax:
168 | 
169 | ```javascript
170 | function findIndex(array, callback) {
171 |   // findIndex code to be implemented
172 | }
173 | 
174 | function callback(curElement, curIndex, array) {
175 |   // callback implemented by caller of function
176 | }
177 | ```
178 | 
179 | Examples:
180 | 
181 | ```javascript
182 | // Find A Number
183 | var arr = [3,4,6,2,1];
184 | findIndex(arr, function(num, index, array) {
185 |   return num === 6;
186 | });
187 | 
188 | // result: 2
189 | 
190 | // Find First Even
191 | var arr = [5,11,13,8,6,7];
192 | findIndex(arr, function(num, index, array) {
193 |   return num % 2 === 0;
194 | });
195 | 
196 | // result: 3
197 | 
198 | // Could Not Find
199 | var langs = ["Java", "C++", "Python", "Ruby"];
200 | findIndex(langs, function(lang, index, arr) {
201 |   return lang === "JavaScript";
202 | });
203 | 
204 | // result: -1
205 | 
206 | // Bad Callback (no return)
207 | var langs = ["Java", "C++", "JavaScript"];
208 | findIndex(langs, function(lang, index, arr) {
209 |   lang === "JavaScript";
210 | });
211 | 
212 | // result: -1
213 | ```
214 | 
215 | ---
216 | 
217 | ## The Stack and the Heap
218 | 
219 | ### Call Stack
220 | 
221 | Stack is an ordered data structire which keeps track of function invocations; it's a part of JS runtime (we don't access it directly)
222 | - Every time we invoke a function, the stack gets modified to keep track of that function; when the function is finished running, it'll be popped off the stack, and JS runtime will take it off for us
223 | 
224 | 
225 | Process:
226 | - Whenever we invoke a function, the details of the invocation are saved to the top of the stack (pushed to the top)
227 | - Whenever a function returns, the information about the invocation is taken off the top of the stack (popped off of the top)
228 | 
229 | Example:
230 | 
231 | ```javascript
232 | 1 function multiply(x, y) {
233 | 2   return x * y;
234 | 3 }
235 | 4
236 | 5 var res = multiply(3, 5);
237 | 
238 | // before anything is executed JS runtime will place the main program on the stack
239 | 
240 | // stack: 
241 | 
242 | 
243 | // 5 function: main
244 | 
245 | // multiply is being invoked, JS runtime places multiply on top
246 | 
247 | // stack:
248 | 
249 | // 2 function: multiply(3, 5) (stack frame)
250 | // 5 function: main (stack frame)
251 | 
252 | // after it's done multiplying, JS runtimes pops it off
253 | 
254 | // stack: 
255 | 
256 | 
257 | // 5 function: main
258 | 
259 | // our main function is still on the stack, once we assigned the result to 15, our code is all done, JS runtime takes main off the stack as well
260 | 
261 | // stack empty
262 | ```
263 | 
264 | Stack frame contents:
265 | - The function that was invoked
266 | - The parameters that were passed to the function
267 | - Current line number
268 | 
269 | So, stack is:
270 | - An ordered set of stack frames
271 | - Most recently invoked function is on the top of the stack
272 | - The bottom of the stack is the first function invoked
273 | - The stack is processed from top to bottom
274 | 
275 | ### Heap
276 | 
277 | Heap is an area in memory where our data is stored
278 | 
279 | ```javascript
280 | // The object is created in the heap. 
281 | // obj is a reference to the object.
282 | var obj = {firstName: "Tim", lastName: "Garcia"};
283 | 
284 | // New data is not created, it is only a copy of the reference (same area in memory, if value in referenceCopy is changed, it is chanjed in obj as well)
285 | var referenceCopy = obj;
286 | ```
287 | 
288 | ### Stack Example
289 | 
290 | ```javascript
291 | 1  function upperCaseFirst(word) {
292 | 2    return word[0].toUpperCase() + word.slice(1);
293 | 3  }
294 | 4 
295 | 5  function upperCaseWords(sentence) {
296 | 6    var words = sentence.split(" ");
297 | 7    for (var i = 0; i < words.length; i++) {
298 | 8      words[i] = upperCaseFirst(words[i]);
299 | 9    }
300 | 10   return words.join(" ");
301 | 11 }
302 | 12
303 | 13 upperCaseWords("lowercase words");
304 | ```
305 | 
306 | Stack:
307 | - First, we get a main function to the stack
308 |   - 13 function: main (waiting on line 13 for something to do)
309 | - When upperCaseWords is invoked, we are placing it on the stack (now we are inside of this function, and have passed in 'lowercase words', moving to line 6)
310 |   - 6 function: upperCaseWords
311 |   - 13 function: main
312 | - On line 6 we're invoking 'split' function (it'll take our sentence and break into an array of words separating them by ' ')
313 |   - ? function: split
314 |   - 6 function: upperCaseWords
315 |   - 13 function: main
316 | - Split is done, it comes off the stack, 'words' is assigned that new array, and we move on to the next line of code
317 |   - 8 function: upperCaseWords
318 |   - 13 function: main
319 | - On line 8, we're going to invoke upperCaseFirst with the current element that we're on here
320 |   - 2 function: upperCaseFirst
321 |   - 8 function: upperCaseWords
322 |   - 13 function: main
323 | - Now upperCaseFirst is on the stack, we're on line 2, we have the word 'lowercase'; the first letter of our word is going to be uppercased, so 'l' -> 'L', and that causes a function invokation, putting toUpperCase on top of the stack:
324 |   - ? function: toUpperCase
325 |   - 2 function: upperCaseFirst
326 |   - 8 function: upperCaseWords
327 |   - 13 function: main
328 | - toUpperCase does its thing, returns 'L', and gets taken off the stack
329 |   - 2 function: upperCaseFirst
330 |   - 8 function: upperCaseWords
331 |   - 13 function: main
332 | - Next, we have to invoke slice which returns the string minus the first character
333 |   - ? function: slice
334 |   - 2 function: upperCaseFirst
335 |   - 8 function: upperCaseWords
336 |   - 13 function: main
337 | - Slice is done, it has returned the new string, and gets popped off the stack
338 |   - 2 function: upperCaseFirst
339 |   - 8 function: upperCaseWords
340 |   - 13 function: main
341 | - Now we have the first letter and the rest of the string, we're gonna concatenate them together, and upperCaseFirst is now finished (we're back on line 8, the previous stack frame, waiting for the result)
342 |   - 8 function: upperCaseWords
343 |   - 13 function: main
344 | - words[i] is equal to the result of invoking that function 'Lowercase', and then the process is repeated
345 |   - 8 function: upperCaseWords
346 |   - 13 function: main
347 | - We move on to line 10, where we're taking the 'words' array of capitalized words and then join them together with ' ' (takes an array, converts back into string with spaces in between them)
348 |   - ? function: join
349 |   - 10 function: upperCaseWords
350 |   - 13 function: main
351 | - Then join gets popped off the stack, now on line 10 we have our result
352 |   - 10 function: upperCaseWords
353 |   - 13 function: main
354 | - We return the result, and upperCaseWords is done
355 |   - 13 function: main
356 | - Our main function finishes up
357 |   - empty
358 | 
359 | ---
360 | 
361 | ## setTimeout and setInterval
362 | 
363 | These functions facilitate asynchronous code
364 | 
365 | ### setTimeout
366 | 
367 | A function that asynchronously invokes a callback after a delay in milliseconds
368 | 
369 | ```javascript
370 | // setTimeout usage
371 | function callback() {
372 |   console.log("callback function");
373 | }
374 | var delay = 1000;  // Delay is in ms
375 | setTimeout(callback, delay);
376 | 
377 | // with anonymous function
378 | setTimeout(function() {
379 |   console.log("Runs in approx. 2000ms");
380 | }, 2000);
381 | 
382 | // cancelling
383 | // every time we invoke setTimeout, we get back an id for that timeout
384 | 
385 | var timerId = setTimeout(function() {
386 |   console.log("This function runs in 30 seconds");
387 | }, 30000);
388 | // this will never actually run because the second setTimeout will be invoked first, and it will clear the first setTimeout
389 | 
390 | setTimeout(function() {
391 |   console.log("Canceling the first setTimeout", timerId);
392 |   clearTimeout(timerId);
393 | }, 2000);
394 | 
395 | // Canceling the first setTimeout 42 (some integer number that references the first setTimeout)
396 | ```
397 | 
398 | ### setInterval
399 | 
400 | A function that continually invokes a callback after every X milliseconds, where X is provided to setInterval
401 | 
402 | ```javascript
403 | // setInterval usage
404 | function callback() {
405 |   console.log("callback is called continuously");
406 | }
407 | var repeat = 3000;
408 | setInterval(callback, repeat);
409 | 
410 | // example
411 | var num = 0;
412 | setInterval(function() {
413 |   num++;
414 |   console.log("num:", num);
415 | }, 1000);
416 | 
417 | // num: 1
418 | // num: 2
419 | // num: 3
420 | 
421 | // cancelling
422 | var num = 0;
423 | var intervalId = setInterval(function() {
424 |   num++;
425 |   console.log("num:", num);
426 |   if (num === 2) {
427 |     clearInterval(intervalId);
428 |   }
429 | }, 1000);
430 | 
431 | // num: 1
432 | // num: 2
433 | ```
434 | 
435 | ## The Event Loop and the Queue
436 | 
437 | #### The Queue
438 | 
439 | An ordered list of functions waiting to be placed on the stack
440 | 
441 | Functions in the queue are processed on a first in, first out basis (FIFO)
442 | 
443 | #### The Event Loop
444 | 
445 | Functionality in the JavaScript runtime that checks the queue when the stack is empty
446 | 
447 | If the stack is empty, the front of the queue is placed in the stack
448 | 
449 | #### Queue Example
450 | 
451 | ```javascript
452 | 1 setTimeout(function() {
453 | 2   console.log('Hello World');
454 | 3 }, 0);
455 | ```
456 | 
457 | Console.log will NOT happen immediately, it runs after the stack is empty:
458 | - We have our main function
459 |   - Stack:
460 |     - 1 function: main
461 |   - Queue:
462 |     - | --- | | --- | | --- | | --- |
463 | - It invokes our setTimeout (it takes our callback function that we want to run, and places it in the queue (here it places it after 0 sec))
464 |   - Stack:
465 |     - ? function: setTimeout
466 |     - 1 function: main
467 |   - Queue:
468 |     - |function()| | --- | | --- | | --- |
469 | - setTimeout is popped off
470 |   - Stack:
471 |     - 1 function: main
472 |   - Queue:
473 |     - |function()| | --- | | --- | | --- |
474 | - Main function is finished
475 |   - Stack:
476 |     - empty
477 |   - Queue:
478 |     - |function()| | --- | | --- | | --- |
479 | - Event loop checks if there is anything in the queue, if there is, it takes it out of the queue and places in the stack
480 |   - Stack:
481 |     - 2 function: function
482 |   - Queue:
483 |     - | --- | | --- | | --- | | --- |
484 | - console.log is placed on the stack as another function that gets invoked
485 |   - Stack:
486 |     - ? function: console.log
487 |     - 2 function: function
488 |   - Queue:
489 |     - | --- | | --- | | --- | | --- |
490 | - console.log comes off the stack
491 |   - Stack:
492 |     - 2 function: function
493 |   - Queue:
494 |     - | --- | | --- | | --- | | --- |
495 | - Callback function finishes up
496 |   - Stack:
497 |     - empty
498 |   - Queue:
499 |     - | --- | | --- | | --- | | --- |
500 | 
501 | #### Queue Example: Waiting for the Stack to Empty
502 | 
503 | ```javascript
504 | 1 function square(n) {
505 | 2   return n * n;
506 | 3 }
507 | 4 setTimeout(function() {
508 | 5   console.log("Callback is placed", "on the queue");
509 | 6 }, 0);
510 | 7 console.log(square(2));
511 | ```
512 | 
513 | - Main function is on the stack
514 |   - Stack:
515 |     - 4 function: main
516 |   - Queue:
517 |     - | --- | | --- | | --- | | --- |
518 | - Invoking setTimeout, it's placed on the stack
519 |   - Stack:
520 |     - ? function: setTimeout
521 |     - 4 function: main
522 |   - Queue:
523 |     - | --- | | --- | | --- | | --- |
524 | - setTimeout places that function on the queue
525 |   - Stack:
526 |     - ? function: setTimeout
527 |     - 4 function: main
528 |   - Queue:
529 |     - | function() | | --- | | --- | | --- |
530 | - setTimeout finished and comes off of the stack
531 |   - Stack:
532 |     - 4 function: main
533 |   - Queue:
534 |     - | function() | | --- | | --- | | --- |
535 | - We move on to line 7, the first thing we have to do is square number, so, we're invoking square
536 |   - Stack:
537 |     - 2 function: square
538 |     - 7 function: main
539 |   - Queue:
540 |     - | function() | | --- | | --- | | --- |
541 | - We calculate 2*2, return 4, and square comes off of the stack (we're back on line 7)
542 |   - Stack:
543 |     - 7 function: main
544 |   - Queue:
545 |     - | function() | | --- | | --- | | --- |
546 | - We put console.log on the stack
547 |   - Stack:
548 |     - ? function: console.log
549 |     - 7 function: main
550 |   - Queue:
551 |     - | function() | | --- | | --- | | --- |
552 | - It adds 4 to the console, and comes off of the stack
553 |   - Stack:
554 |     - 7 function: main
555 |   - Queue:
556 |     - | function() | | --- | | --- | | --- |
557 | - Main function comes off of the stack
558 |   - Stack:
559 |     - empty
560 |   - Queue:
561 |     - | function() | | --- | | --- | | --- |
562 | - Event loop takes the function() and places it on the stack
563 |   - Stack:
564 |     - 5 function: function
565 |   - Queue:
566 |     - | --- | | --- | | --- | | --- |
567 | - console.log from callback is placed on the stack
568 |   - Stack:
569 |     - ? function: console.log
570 |     - 5 function: function
571 |   - Queue:
572 |     - | --- | | --- | | --- | | --- |
573 | - 'Callback was placed on the queue' is printed, and console.log is taken off the stack
574 |   - Stack:
575 |     - 5 function: function
576 |   - Queue:
577 |     - | --- | | --- | | --- | | --- |
578 | - Callback function is taken off the stack
579 |   - Stack:
580 |     - empty
581 |   - Queue:
582 |     - | --- | | --- | | --- | | --- |
583 | 
584 | #### JavaScript Is Single Threaded
585 | 
586 | Single Threaded: Code execution is linear; code that is running cannot be interrupted by something else going on in the program
587 | 
588 | ```javascript
589 | setTimeout(function() {
590 |   console.log("Hello from the timeout");
591 | }, 0);
592 | for (var i = 0; i < 1000000000; i++) {
593 |   var x = i * 2;
594 | }
595 | console.log("Done with loop");
596 | 
597 | // Done with loop
598 | // Hello from the timeout
599 | ```
600 | 
601 | ## Promises
602 | 
603 | A promise is an object that represents a task that will be completed in the future
604 | 
605 | Analogy: taking a number at a government office before you can get helped
606 | - The piece of paper you get is like your promise
607 | - The help you get at the counter is like the invocation of your callback
608 | 
609 | Another analogy: you are a singer, and your fans are waiting for your new song; you offer them to subscribe for updates so when the song is available or is cancelled, they receive notifications
610 | 
611 | There are 3 parts:
612 | - A “producing code” that does something and takes time. For instance, the code loads a remote script. That’s a “singer”.
613 | - A “consuming code” that wants the result of the “producing code” once it’s ready. Many functions may need that result. These are the “fans”.
614 | - A promise is a special JavaScript object that links the “producing code” and the “consuming code” together.
615 | - In terms of our analogy: this is the “subscription list”. The “producing code” takes whatever time it needs to produce the promised result, and the “promise” makes that result available to all of the subscribed code when it’s ready.
616 | 
617 | #### Creating a Promise
618 | 
619 | ```javascript
620 | var p1 = new Promise(function(resolve, reject) {
621 |   resolve([1,2,3,4]);
622 | });
623 | // this function inside is called executor
624 | // resolve and reject — these functions are pre-defined 
625 | 
626 | // When the promise is created, this executor function runs automatically. It contains the producing code, that should eventually produce a result
627 | 
628 | p1.then(function(arr) {
629 |   console.log("Promise p1 resolved with data:", arr);
630 | });
631 | 
632 | // Promise p1 resolved with data: [1,2,3,4]
633 | ```
634 | 
635 | The resulting promise object has internal properties:
636 | - state — initially "pending", then changes to either "fulfilled" or "rejected"
637 | - result — an arbitrary value of your choosing, initially undefined
638 | 
639 | When the executor finishes the job, it should call one of the functions that it gets as arguments:
640 | - resolve(value) — to indicate that the job finished successfully:
641 |   - sets state to "fulfilled"
642 |   - sets result to value
643 | - reject(error) — to indicate that an error occurred:
644 |   - sets state to "rejected"
645 |   - sets result to error
646 | - The properties state and result of the Promise object are internal. We can’t directly access them from our "consuming code"
647 | 
648 | 
649 | #### .then and .catch
650 | 
651 | Consuming functions can be registered (subscribed) using the methods .then and .catch which are functions to be executed when the promise is resolved or rejected
652 | - Each .then returns another promise with .then method
653 |   - it is called 'thenable'
654 | - The first argument of .then is a function that:
655 |   - runs when the Promise is resolved 
656 |   - receives the result
657 |   - i.e. it accepts a callback function with the value passed to the resolve function
658 | - The second argument of .then is a function that:
659 |   - runs when the Promise is rejected
660 |   - receives the error
661 |   - i.e. it accepts a callback function with the value passed to the reject function
662 | - If we’re interested only in successful completions, then we can provide only one function argument to .then
663 | - If we’re interested only in errors, then we can use null as the first argument: .then(null, errorHandlingFunction)
664 |   - Or we can use .catch(errorHandlingFunction), which is exactly the same
665 | - If a promise is pending, .then/catch handlers wait for the result
666 |   - Otherwise, if a promise has already settled, they execute immediately
667 | - Handlers of .then/.catch are always asynchronous
668 |   - Even when the Promise is immediately resolved, code which occurs on lines below your .then/.catch may still execute first
669 | 
670 | #### Handling Errors
671 | 
672 | ```javascript
673 | var p1 = new Promise(function(resolve, reject) {
674 |   reject("ERROR");
675 | });
676 | 
677 | p1.then(function(data) {
678 |   console.log("Promise p1 resolved with data:", data);
679 | }).catch(function(data) {
680 |   console.log("Promise p1 was rejected with data:", data);
681 | });
682 | 
683 | // Promise p1 was rejected with data: ERROR
684 | 
685 | // If a promise is pending, .then/catch handlers wait for the result. Otherwise, if a promise has already settled, they execute immediately
686 | ```
687 | 
688 | #### Randomly Occuring Errors
689 | 
690 | ```javascript
691 | var p1 = new Promise(function(resolve, reject) {
692 |   var num = Math.random();
693 |   if (num < 0.5) {
694 |     resolve(num);
695 |   } else {
696 |     reject(num);
697 |   }
698 | });
699 | 
700 | p1.then(function(result) {
701 |   console.log("Success:", result);
702 | }).catch(function(error) {
703 |   console.log("Error:", error);
704 | });
705 | 
706 | // There can be only a single result or an error
707 | // The executor should call only one resolve or reject; the promise’s state change is final
708 | 
709 | // All further calls of resolve and reject are ignored
710 | ```
711 | 
712 | #### setTimeout and Promises
713 | 
714 | setTimeout
715 | - an asynchronous function that runs a callback function after a specified amount of time
716 | Promises 
717 | - a tool to manage asynchronous code (as opposed to callbacks); so to manage one or many asynchronous functions (like setTimeout or AJAX calls), we can use promises
718 | 
719 | Wrap setTimeout with promise:
720 | 
721 | ```javascript
722 | var promise = new Promise(function(resolve, reject) {
723 |   setTimeout(function() {
724 |     var randomInt = Math.floor(Math.random() * 10);
725 |     resolve(randomInt);
726 |   }, 4000);
727 | });
728 | // The executor is called automatically and immediately (by the new Promise)
729 | // Although 'resolve' code won't have finished running, we will have an object already to attach our callback to (promise will be created before it resolves)
730 | 
731 | promise.then(function(data) {
732 |   console.log("Random int passed to resolve:", data);
733 | });
734 | 
735 | // This promise object will immediately be returned even though the setTimeout is not done, and resolve has not been called
736 | // We can decide what callback functions we want to add to .then
737 | ```
738 | 
739 | #### Asynchronous Handlers of .then and .catch
740 | 
741 | Even when the Promise is immediately resolved, code which occurs on lines below your .then/.catch may still execute first
742 | - The JavaScript engine has an internal execution queue which gets all .then/catch handlers
743 | - But it only looks into that queue when the current execution is finished
744 | - In other words, .then/catch handlers are pending execution until the engine is done with the current code
745 | 
746 | ```javascript
747 | // an "immediately" resolved Promise
748 | const executor = resolve => resolve("done!");
749 | const promise = new Promise(executor);
750 | 
751 | promise.then(alert); // this alert shows last (*)
752 | 
753 | alert("code finished"); // this alert shows first
754 | ```
755 | 
756 | The promise becomes settled immediately, but the engine first finishes the current code, calls alert, and only afterwards looks into the queue to run .then handler
757 | 
758 | So the code after .then ends up always running before the Promise’s subscribers, even in the case of an immediately-resolved Promise
759 | 
760 | Usually that’s unimportant, but in some scenarios the order may matter a great deal
761 | 
762 | ### Promise chaining
763 | 
764 | Since a promise always returns something that has a .then (thenable) - we can chain promises together and return values from one promise to another
765 | 
766 | #### Nested Async Callbacks
767 | 
768 | ```javascript
769 | // Nested Async Callbacks
770 | var counter = 0;
771 | setTimeout(function() {
772 |   counter++;
773 |   console.log("Counter:", counter);
774 |   setTimeout(function() {
775 |     counter++;
776 |     console.log("Counter:", counter);
777 |     setTimeout(function() {
778 |       counter++;
779 |       console.log("Counter:", counter);
780 |     }, 3000);
781 |   }, 2000);
782 | }, 1000);
783 | 
784 | // Counter: 1
785 | // Counter: 2
786 | // Counter: 3
787 | ```
788 | 
789 | Disadvantages of nested callbacks:
790 | - The code is hard to read
791 | - Logic is difficult to reason about
792 | - The code is not modular
793 | 
794 | #### Returing a Promise: Promise Chaining
795 | 
796 | Promise chaining allows multiple .then functions to be chained to a promise, and if a previous callback inside .then returns a promise, the next .then will be waiting for that promise to be resolved
797 | 
798 | ```javascript
799 | var promise = new Promise(function(resolve, reject) {
800 |   setTimeout(function() {
801 |     randomInt = Math.floor(Math.random() * 10);
802 |     resolve(randomInt);
803 |   }, 500);
804 | });
805 | 
806 | // first .then will be waiting for that promise above to finish
807 | promise.then(function(data) {
808 |   console.log("Random int passed to resolve:", data);
809 |   return new Promise(function(resolve, reject) {
810 |     setTimeout(function() {
811 |       resolve(Math.floor(Math.random() * 10));
812 |     }, 3000);
813 |   });
814 | }).then(function(data) {
815 |   // this .then will be waiting for the returned promise above to finish
816 |   console.log("Second random int passed to resolve:", data);
817 | });
818 | ```
819 | 
820 | #### Promise Chaining: Returning Data
821 | 
822 | ```javascript
823 | var promise = new Promise(function(resolve, reject) {
824 |   resolve(5);
825 | });
826 | 
827 | promise.then(function(data) {
828 |   return data * 2;
829 | }).then(function(data) {
830 |   return data + 20;
831 | }).then(function(data) {
832 |   console.log(data);
833 | });
834 | 
835 | // 30 (5 * 2 and then 10 + 20)
836 | ```
837 | 
838 | #### Nested Callbacks: Refactored
839 | 
840 | ```javascript
841 | // create a function declaration (for a counter)
842 | var counter = 0;
843 | function incCounter() {
844 |   counter++;
845 |   console.log("Counter:", counter);
846 | }
847 | 
848 | // create a runLater function which wraps setTimeout in a promise
849 | function runLater(callback, timeInMs) {
850 |   var p = new Promise(function(resolve, reject) {
851 |     setTimeout(function() {
852 |       var res = callback();
853 |       resolve(res);
854 |     }, timeInMs);
855 |   });
856 |   return p;
857 | }
858 | 
859 | // chain promises
860 | runLater(incCounter, 1000).then(function() {
861 |   return runLater(incCounter, 2000);
862 | }).then(function() {
863 |   return runLater(incCounter, 3000);
864 | }).then(function() {
865 |   // final .then not necessary
866 | });
867 | ```
868 | 
869 | #### Promise.all
870 | 
871 | It is a method on a promise constructor
872 | 
873 | - Accepts an array of promises and resolves all of them or rejects once a single one of the promises has been first rejected (fail fast behavior)
874 | - If all of the passed-in promises fullfill, Promise.all is resolved with an array of the values from the passed-in promises, in the same order as the promises passed in to Promise.all
875 | - Promise.all doesn't guarantee that these promises will resolve sequentially, that it will return an array of resolved promises in the same order that you pass them in to the function
876 |   - Something like this happens with $.when in jQuery or Q
877 | - The promises don't resolve sequentially, but Promise.all waits for them to resolve
878 | 
879 | ```javascript
880 | function getMovie('title'){
881 |   return $.getJSON(`https://omdbapi.com?t=${title}&apikey=thewdb`);
882 | }
883 | 
884 | // value of these variables is a pending promise, it has not been rejected or resolved, there is simply a promise for some future value
885 | var titanicPromise = getMovie('titanic');
886 | var shrekPromise = getMovie('shrek');
887 | var braveheartPromise = getMovie('braveheart');
888 | 
889 | // instead of chaining all of these promises together with .then and another .then and another .then, we can simply place them all inside of a Promise.all invocation
890 | Promise.all([titanicPromise, shrekPromise, braveheartPromise]).then(function(movies) {
891 |   return movies.forEach(function(value) {
892 |     console.log(value.Year);
893 |   });
894 | });
895 | 
896 | // 1997
897 | // 2001
898 | // 1995
899 | ```
900 | 
901 | #### Promises in Practice
902 | 
903 | It is useful to understand how promises work (resolve, reject), but in practice we will often use promises that are returned to you (instead of creating ones)


--------------------------------------------------------------------------------
/advanced theory/OOP with JS.md:
--------------------------------------------------------------------------------
  1 | # Closures, 'this', and OOP
  2 | 
  3 | #### Table of Contents
  4 | 
  5 | - [Closures, 'this', and OOP](#closures-this-and-oop)
  6 |       - [Table of Contents](#table-of-contents)
  7 |   - [Closures](#closures)
  8 |     - [Private Variables](#private-variables)
  9 |   - [Keyword This](#keyword-this)
 10 |     - [Global context](#global-context)
 11 |       - [Global With Strict](#global-with-strict)
 12 |     - [Implicit (Object) Binding](#implicit-object-binding)
 13 |     - [Call Apply Bind (Explicit Binding)](#call-apply-bind-explicit-binding)
 14 |       - [Call](#call)
 15 |       - [Apply](#apply)
 16 |       - [Bind](#bind)
 17 |     - ['New' Keyword](#new-keyword)
 18 |   - [OOP in JS](#oop-in-js)
 19 |     - [Intro to OOP](#intro-to-oop)
 20 |       - [Constructor Functions](#constructor-functions)
 21 |     - [The 'New' Keyword](#the-new-keyword)
 22 |     - [Multiple Constructors](#multiple-constructors)
 23 |     - [Prototypes](#prototypes)
 24 |       - [Prototype Chain](#prototype-chain)
 25 |     - [Adding Methods to Prototype (Refactoring)](#adding-methods-to-prototype-refactoring)
 26 |     - [Prototypal Inheritance](#prototypal-inheritance)
 27 |       - [Object.create](#objectcreate)
 28 |       - [Why not 'new'?](#why-not-new)
 29 |       - [Resetting the Constructor](#resetting-the-constructor)
 30 | 
 31 | ## Closures
 32 | 
 33 | A closure is a function that makes use of variables defined in outer functions that have previously returned
 34 | - A closure only exists when an inner function makes use of vars defined from an outer function that has returned
 35 | - If the inner function does not make use of any of the external vars, all we have is a nested function
 36 | - Closure does not exist if we do not return an inner function
 37 | - We can use them to create private variables and write better code that isolates our logic and application
 38 |   - Mostly replaced with 'let' and 'const'
 39 |     - not sure about this though
 40 | 
 41 | ```javascript
 42 | function outer() {
 43 |   var data = 'closures are ';
 44 |   return function inner() {
 45 |     var innerData = 'awesome';
 46 |     return data + innerData;
 47 |   }
 48 | }
 49 | 
 50 | outer(); // returns the definition of the inner function
 51 | 
 52 | //function inner() {
 53 | //   var innerData = 'awesome';
 54 | //   return data + innerData;
 55 | // }
 56 | 
 57 | outer()(); // 'closures are awesome'
 58 | 
 59 | // we use a variables defined in outer function (data) inside of an inner function when the outer function has already returned (the function is returned, but we are still able to use this data variable)
 60 | ```
 61 | 
 62 | Another example:
 63 | 
 64 | ```javascript
 65 | function outer(a) {
 66 |   return function inner(b) {
 67 |     // the inner function is making use of the var 'a', which was defined in an outer function 'outer', and by the time this is calles, that outer function has returned
 68 |     // this function called 'inner' is a closure
 69 |     return a + b;
 70 |   }
 71 | }
 72 | 
 73 | outer(5)(5) // 10
 74 | 
 75 | var storeOuter = outer(5);
 76 | storeOuter(10) // 15
 77 | ```
 78 | 
 79 | Notes:
 80 | - We have to 'return' the inner function for this to work
 81 | - We can either call the inner function right away by using an extra () or we can store the result of a function in a var (very similar to how 'bind' works)
 82 | - We do NOT have to give the inner function a name - we can make it anonymous
 83 | - Inner functions do not remember everything from outer functions that have returned - only the variables they need
 84 |   - When a function returns, it first checks if there are any inner functions which use variables defined in the function, and 'remembers' them if it needs to
 85 | 
 86 | ### Private Variables
 87 | 
 88 | The most common use case for closures is to create a private variable
 89 | 
 90 | Private variable is a variable that can only be accessed in a certain scope, and not modified from an external scope
 91 | 
 92 | In other languages, there exists support for variables that can not be modified externally, but in JS we don't have that built in - we use closures for that
 93 | 
 94 | ```javascript
 95 | function counter() {
 96 |   var count = 0;
 97 |   return function () {
 98 |     return ++count;
 99 |   }
100 | }
101 | 
102 | counter1 = counter();
103 | counter1(); // 1
104 | counter1(); // 2
105 | 
106 | counter2 = counter();
107 | counter2(); // 1
108 | counter2(); // 2
109 | 
110 | counter1(); // 3 (not affected by counter2)
111 | 
112 | count // ReferenceError: count is not defined - because it's private!
113 | ```
114 | 
115 | Another example:
116 | 
117 | ```javascript
118 | // When we use a function that returns an object, that used closure is the foundation for a popular design pattern known as the module pattern
119 | 
120 | function classRoom() {
121 |   var instructors = ['Colt', 'Elie'];
122 |   return {
123 |     getInstructors: function () {
124 |       return instructors;
125 |     },
126 |     addInstructor: function (instructor) {
127 |       instructors.push(instructor);
128 |       return instructors;
129 |     }
130 |   }
131 | }
132 | 
133 | course1 = classRoom();
134 | course1.getInstructors(); // ['Colt', 'Elie']
135 | course1.addInstructors('Ian'); // ['Colt', 'Elie', 'Ian']
136 | course1.getInstructors(); // ['Colt', 'Elie']
137 | 
138 | course2 = classRoom();
139 | course2.getInstructors(); // ['Colt', 'Elie'] - not affected by course1
140 | 
141 | // we also have NO access to instructors variable which makes it private - no one can modify it
142 | // although there is a way to directly manipulate the instructors variable
143 | // if we were to directly remove a value from the output of getInstructors, we could actually modify the instructors array
144 | 
145 | course1.getInstructors().pop();
146 | // 'Ian'
147 | course1.getInstructors();
148 | // ['Colt', 'Elie']
149 | 
150 | // we can prevent this with concept in functional programming called immutability, which means that you cannot change the value of something
151 | // to create that idea, we'll return a copy of the instructors array, and not the actual array that someone could accidentaly or intentionally manipulate
152 | // in order to do that we will invoke the .slice() on our output so that we return a copy of the instructors array which will stop someone from externally modifying it; now this variable is completely private
153 | function classRoom() {
154 |   var instructors = ['Colt', 'Elie'];
155 |   return {
156 |     getInstructors: function () {
157 |       return instructors.slice();
158 |     },
159 |     addInstructor: function (instructor) {
160 |       instructors.push(instructor);
161 |       return instructors.slice();
162 |     }
163 |   }
164 | }
165 | 
166 | course1 = classRoom();
167 | course1.getInstructors().pop(); // ['Colt']
168 | course1.getInstructors().pop(); // ['Colt']
169 | course1.getInstructors(); // ['Colt', 'Elie']
170 | ```
171 | 
172 | ## Keyword This
173 | 
174 | What is 'this'?
175 | 
176 | - A reserved keyword in JS (we can't set it as a var)
177 | - Value is determing by how a function is called (what we call 'execution context'), i.e. its value is determined at execution
178 |   - Functions always are given 'argument' and 'this' keywords
179 | - Can be determined using four rules (global, object/implicit, explicit, new)
180 |   - They are not a part of official specification, just a helpful way to keep track of 'this' value
181 | 
182 | ### Global context
183 | 
184 | This rule applies when 'this' is not inside of a declared object ('this' is in the wild'); it refers to the global object which in the browser is the 'window' object
185 | 
186 | Every var that we declare in the global scope is attached to the window object (`` var person = "Elie"; window.person // "Elie" ``)
187 | 
188 | ```javascript
189 | console.log(this) // window
190 | var dog = 'Rusty'; // global variable, the best practice when using global vars is to declare them in the top part (even if they're empty) and then assign a value when needed
191 | // window.dog === dog
192 | 
193 | function whatIsThis() {
194 |   return this
195 | }
196 | 
197 | whatIsThis() //window
198 | 
199 | function variablesInThis() {
200 |   // when we put 'this' inside of a function, its value is still the global object (it's not in a declared object)
201 |   // since the value of this is the window, all we are doing here is creating a global variable
202 |   // this is a very bad practice
203 |   this.person = 'Elie';
204 |   
205 |   var colt = 'Colt'; // this will be unavailable in the global scope, although it will be if we omit the 'var' keyword
206 | }
207 | 
208 | colt // undefined
209 | dog // Rusty
210 | 
211 | console.log(person) // Elie
212 | 
213 | ```
214 | 
215 | What is declared object:
216 | 
217 | ```javascript
218 | var data = {}; // declaring an object
219 | 
220 | data.instructor = 'Elie'; // adding a key 'instructor' to data with value 'Elie' (it's inside of the declared object)
221 | ```
222 | 
223 | #### Global With Strict
224 | 
225 | When we enable strict mode and we are not inside a declared object
226 | 
227 | ```javascript
228 | "use strict"
229 | 
230 | console.log(this); // window
231 | 
232 | function whatIsThis() {
233 |   return this;
234 | }
235 | 
236 | whatIsThis()// undefined
237 | 
238 | function variablesInThis() {
239 |   // since we are in strict mode this is undefined
240 |   // so if we add a property on undefined and see what happens
241 |   this.person = 'Elie';
242 | }
243 | 
244 | variablesInThis(); // TypeError, can't set person on undefined!
245 | ```
246 | 
247 | ### Implicit (Object) Binding
248 | 
249 | When the keyword 'this' is inside of a declared object, value of 'this' will always be the closest parent object
250 | 
251 | ```javascript
252 | // strict mode doesn't make a difference here
253 | 
254 | var person = {
255 |   firstName: 'Elie',
256 |   sayHi: function () {
257 |     return 'Hi ' + this.firstName // this refers to the 'person' object
258 |   },
259 |   determineContext: this, // window
260 |   // A keyword 'this' is defined when a function is run! There is not a function being run here to create a new value of 'this', so the value of 'this' is still the window
261 |   determineContextFunction: function () {
262 |     return this === person;
263 |   }
264 | }
265 | 
266 | person.sayHi() // 'Hi Elie'
267 | person.determineContextFunction() // true
268 | ```
269 | 
270 | Nested objects:
271 | 
272 | ```javascript
273 | var person = {
274 |   firstName: 'Colt',
275 |   sayHi: function () {
276 |     return 'Hi ' + this.firstName;
277 |   },
278 |   determineContext: function () {
279 |     return this === person;
280 |   },
281 |   dog: {
282 |     sayHello: function () {
283 |       return 'Hello ' + this.firstName;
284 |     },
285 |     determineContext: function () {
286 |       return this === person;
287 |     }
288 |   }
289 | }
290 | 
291 | person.sayHi() // 'Hi Colt'
292 | person.determineContext() // true
293 | 
294 | person.dog.sayHello() // 'Hello undefined'
295 | person.dog.determineContext() // false
296 | ```
297 | 
298 | ### Call Apply Bind (Explicit Binding)
299 | 
300 | Choose what we want the context of 'this' to be using call, apply or bind, to explicitly set the value of 'this'
301 | 
302 | These methods can only be used on functions
303 | 
304 | - Call
305 |   - Parameters: thisArg, a, b, c, d, ... (thisArg - value of 'this' we want to be, other - any params we want to pass to the function in which we're changing value of 'this')
306 |   - Invoke the function it is called on immediately
307 | - Apply
308 |   - Parameters: thisArg, [a, b, c, d, ...] (takes two parameters at most, thisArg is the same, the second - array of params we want to pass to the function)
309 |   - Invoke the function it is called on immediately
310 | - Bind
311 |   - The parameters work like call, but bind returns a function with the context of 'this' bound already
312 |   - Parameters: thisArg, a, b, c, d, ...
313 |   - Doesn't invoke function immediately, it returns a function definition
314 |     - If we do not invoke the function, but examine the variable we created, we are returned a 'function definition'
315 |     - ``var first = function () { return 'Hello' }``
316 |     - or ``function firstFunction() { return 'Hello' }``
317 |     - ``first`` - prints out the definition above
318 |     - ``first()`` - 'Hello'
319 |   - Extremely powerful: we can save functions with the different value of 'this' and invoke them at a later point in time
320 |   - Often used in async code, e.g. in setTimeout
321 |   - Building block for advanced functional programming techniques like currying
322 |     - Currying is the process of taking a function with multiple arguments and returning a series of functions that take one argument and eventually resolve to a value. The original function volume takes three arguments, but once curried we can instead pass in each argument to three nested functions
323 |     - In other words: currying is the process of breaking down a function into a series of functions that each take a single argument
324 |     - The idea is as follows: If you don’t provide all parameters for a function, it returns a function whose input are the remaining parameters and whose output is the result of the original function
325 | 
326 | #### Call
327 | 
328 | Fixing up with 'call':
329 | 
330 | ```javascript
331 | var person = {
332 |   firstName: 'Colt',
333 |   sayHi: function () {
334 |     return 'Hi ' + this.firstName;
335 |   },
336 |   determineContext: function () {
337 |     return this === person;
338 |   },
339 |   dog: {
340 |     sayHello: function () {
341 |       return 'Hello ' + this.firstName;
342 |     },
343 |     determineContext: function () {
344 |       return this === person;
345 |     }
346 |   }
347 | }
348 | 
349 | person.sayHi() // 'Hi Colt'
350 | person.determineContext() // true
351 | 
352 | person.dog.sayHello.call(person) // 'Hello Colt'
353 | person.dog.determineContext.call(person) // true
354 | // notice that we do NOT invoke sayHello or determineContext, we just attach call onto it
355 | // so there are no parentheses after say hello and determine context
356 | ```
357 | 
358 | Using 'Call' in the Wild (a common use case, to avoid duplication):
359 | 
360 | ```javascript
361 | var colt = {
362 |   firstName: 'Colt',
363 |   sayHi: function () {
364 |     return 'Hi ' + this.firstName
365 |   }
366 | }
367 | 
368 | var elie = {
369 |   firstName: 'Elie',
370 |   // look at this duplication
371 |   sayHi: function () {
372 |     return 'Hi ' + this.firstName
373 |   }
374 | }
375 | 
376 | colt.sayHi() // Hi Colt
377 | elie.sayHi() // Hi Elie
378 | 
379 | // refactor duplication with 'call', 'borrowing' the sayHi function from colt, setting value of 'this' to be elie
380 | var colt = {
381 |   firstName: 'Colt',
382 |   sayHi: function () {
383 |     return 'Hi ' + this.firstName
384 |   }
385 | }
386 | 
387 | var elie = {
388 |   firstName: 'Elie',
389 | }
390 | 
391 | colt.sayHi() // Hi Colt
392 | colt.sayHi.call(elie) // Hi Elie
393 | 
394 | // we can even refactor the code more (by making a standalone function)
395 | function sayHi() {
396 |   return 'Hi ' + this.firstName
397 | }
398 | 
399 | var colt = {
400 |   firstName: 'Colt'
401 | }
402 | var elie = {
403 |   firstName: 'Elie'
404 | }
405 | 
406 | sayHi.call(colt) // Hi Colt
407 | sayHi.call(elie) // Hi Elie
408 | ```
409 | 
410 | Another use for 'call':
411 | 
412 | ```javascript
413 | // let's imagine we want to select all the 'divs' on a page
414 | var divs = document.getElementsByTagName('div');
415 | 
416 | // How can we find all the divs that have the text 'Hello'? Using a filter would be nice
417 | divs.filter // undefined
418 | 
419 | // Unfortunately, divs is not an array, it's an array-like object, so filter won't work
420 | // We need to convert an array-like object into an array just as we make copies of arrays - using slice (but with a slight modification)
421 | 
422 | // Instead of the target of slice (keyword this) being that array, let's set the target of 'this' to be our divs array-like object
423 | var divsArray = [].slice.call(divs);
424 | // the same thing as Array.prototype.slice.call(divs);
425 | // we are trying to slice something that is not an array
426 | // note that slice will not work on all data types, but it works for array-like objects
427 | 
428 | divsArray.filter(function(val) {
429 |   return val.innerText === 'Hello';
430 | });
431 | ```
432 | 
433 | #### Apply
434 | 
435 | Fixing up with 'Apply' (almost identical to call - except the parameters):
436 | 
437 | ```javascript
438 | var colt = {
439 |   firstName: 'Colt',
440 |   sayHi: function () {
441 |     return 'Hi ' + this.firstName
442 |   },
443 |   addNumbers: function (a, b, c, d) {
444 |     return this.firstName + ' just calculated ' + (a + b + c + d);
445 |   }
446 | }
447 | 
448 | var elie = {
449 |   firstName: 'Elie',
450 | }
451 | 
452 | colt.sayHi() // Hi Colt
453 | colt.sayHi.apply(elie) // Hi Elie
454 | 
455 | // this is the same, but if we start adding arguments:
456 | colt.addNumbers(1, 2, 3, 4) // Colt just calculated 10
457 | colt.addNumbers.call(elie, 1, 2, 3, 4) // Elie just calculated 10
458 | colt.addNumbers.apply(elie, [1, 2, 3, 4]) // Elie just calculated 10; arguments in array
459 | ```
460 | 
461 | When a function does not accept an array, apply will spread out values in an array for us
462 | 
463 | ```javascript
464 | var nums = [5, 7, 1, 4, 2];
465 | 
466 | Math.max(nums); // NaN
467 | // it does not accept an array, it accepts a list of comma-separated values
468 | 
469 | Math.max.apply(this, nums); // 7
470 | // if we use apply, we can pass an array of values and they will be spread out
471 | // here we don't care about explicitly setting the value of the keyword this (it just refers to the global object), we just care about spreading an array of values out
472 | ```
473 | 
474 | Another example:
475 | 
476 | ```javascript
477 | function sumValues(a, b, c) {
478 |   return a + b + c;
479 | }
480 | 
481 | var values = [4, 1, 2];
482 | 
483 | sumValues(values); // '4, 1, 2undefinedundefined'
484 | sumValues.apply(this, [4, 1, 2]); // 7
485 | ```
486 | 
487 | #### Bind
488 | 
489 | Example with 'Bind' (e.g. we don't know the total number of parameters):
490 | 
491 | ```javascript
492 | var colt = {
493 |   firstName: 'Colt',
494 |   sayHi: function () {
495 |     return 'Hi ' + this.firstName
496 |   },
497 |   addNumbers: function (a, b, c, d) {
498 |     return this.firstName + ' just calculated ' + (a+b+c+d);
499 |   }
500 | }
501 | 
502 | var elie = {
503 |   firstName: 'Elie',
504 | }
505 | 
506 | var elieCalc = colt.addNumbers.bind(elie, 1, 2, 3, 4) // function () {}...
507 | elieCalc() // Elie just calculated 10
508 | 
509 | // with bind - we do not need to know all the arguments up front (when we bind it), we only need to know what we want the value of 'this' to be
510 | // this is called partial application
511 | var elieCalc2 = colt.addNumbers.bind(elie, 1, 2) // function () {}...
512 | elieCalc(3, 4) // Elie just calculated 10 (1 and 2 from bind, 3 and 4 from invoking function)
513 | ```
514 | 
515 | 'Bind' in the Wild (very commonly we use 'bind' to set the context of 'this' for a function that will be called at a later point in time, e.g. in async code when we sometimes 'lose' the context of 'this')
516 | 
517 | 
518 | ```javascript
519 | // setTimeout is a method on the window object that's used to execute a function once after a specified time (takes up function and time)
520 | var colt = {
521 |   firstName: 'Colt',
522 |   sayHi: function () {
523 |     setTimeout(function () {
524 |       console.log('hi ' + this.firstName)
525 |     }, 1000);
526 |   }
527 | }
528 | 
529 | colt.sayHi() // Hi undefined (1000 ms later)
530 | 
531 | // since setTimeout is called at the later point in time, 'this' does NOT refer to the parent object, but refers to the global object (setTimeout attached to is a global 'window')
532 | // even though it is defined inside of the 'colt' object when it's declared, the context in which function is executed is actually the global context
533 | // we should explicitly set what we want 'this' to refer to, and we need to use 'bind' since 'call' and 'apply' immediately invoke a function
534 | 
535 | // correcting context of 'this' with 'bind':
536 | var colt = {
537 |   firstName: 'Colt',
538 |   sayHi: function () {
539 |     setTimeout(function () {
540 |       console.log('hi ' + this.firstName)
541 |     }.bind(this), 1000);
542 |     // passing in 'this' as the first parameter to 'bind' since it refers to the 'colt' object
543 |     // we are basically binding the 'correct' value of 'this' to be what we want when the function inside of setTimeout is called
544 |     // instead of 'this' we can pass in the 'colt' variable to the 'bind' method, it's the same, but 'this' is more common and it's not 'hardcoding'
545 |   }
546 | }
547 | ```
548 | 
549 | ### 'New' Keyword
550 | 
551 | We can set the context of 'this' using the 'new' keyword - it does more as well (see OOP section)
552 | 
553 | When we use 'new', a new object is created out of thin air
554 | 
555 | Keyword 'new' is used with the function, and inside of the function definition 'this' refers to the new object that is created
556 | 
557 | When 'new' is used, an implicit return 'this' is added to the function which uses it (see OOP section for details)
558 | 
559 | ```javascript
560 | function Person(firstName, lastName) {
561 |   this.firstName = firstName
562 |   this.lastName = lastName
563 | }
564 | 
565 | var elie = new Person('Elie', 'Schoppik');
566 | elie.firstName // 'Elie'
567 | elie.lastName // 'Schoppik'
568 | ```
569 | 
570 | ---
571 | 
572 | ## OOP in JS
573 | 
574 | ### Intro to OOP
575 | 
576 | OOP is a programming model based around the idea of objects and blueprints which create objects
577 | 
578 | - Blueprints are called 'classes'
579 | - Objects created from classes are called 'instances'
580 | 
581 | In OOP we should try to make classes abstract and modular so that we can reuse classes easlily and share them amongst all parts of an app
582 | 
583 | JS does not have built-in support of clases unlike many other languages, e.g. python, java, but we can mimic the behavior of classes by using what JS has: functions, objects, and 'this' keyword
584 | 
585 | #### Constructor Functions
586 | 
587 | Imagine we want to make a few house objects, they will all have bedrooms, bathrooms, and numSqft (square feet)
588 | 
589 | Instead of making an infinite number of different objects, we can create a function to construct these similar 'house' objects; these functions are called 'Constructor Functions'
590 | 
591 | ```javascript
592 | function House(bedrooms, bathrooms, numSqft) {
593 |   this.bedrooms = bedrooms;
594 |   this.bathrooms = bathrooms;
595 |   this.numSqft = numSqft;
596 | }
597 | 
598 | // name should be capitalized (convention for constructor functions)
599 | // 'this' is used
600 | // we are attaching properties onto the keyword 'this'; we would like 'this' to refer to the object we will create from our construction function
601 | 
602 | var firstHouse = House(2, 2, 1000)
603 | firstHouse() // undefined
604 | 
605 | // we are not returning anything from the function so our House function returns undefined
606 | // we are not explicitly binding 'this' or placing it inside a declared object; this means the value of 'this' will be the global object, which is not what we want
607 | // we should use 'new' keyword
608 | 
609 | var firstHouse = new House(2, 2, 1000);
610 | firstHouse.bedrooms // 2
611 | firstHouse.bathrooms // 2
612 | firstHouse.numSqft // 1000
613 | ```
614 | 
615 | ### The 'New' Keyword
616 | 
617 | The 'New' keyword must be used with constructor functions
618 | 
619 | - 'New' creates an empty object
620 | - Then sets 'this' (in the constructor function) to be that empty object that was just created
621 | - Adds the line 'return this' to the end of the function which follows it so that object that we've created using 'new' could be returned from the function
622 | - Adds a property onto the empty object called '\_\_proto__' (we can access it), which links the 'prototype' property on the constructor function to the empty object we've just created
623 |   - Double underscore is commonly called 'dunder'
624 |   - This property is also known as 'dunder proto'
625 | 
626 | ### Multiple Constructors
627 | 
628 | Let's create two constructor functions, one for a Car, and one for a Motorcycle:
629 | 
630 | ```javascript
631 | function Car(make, model, year) {
632 |   this.make = make;
633 |   this.model = model;
634 |   this.year = year;
635 |   // we can also set properties on the keyword 'this' that are preset values
636 |   this.numWheels = 4;
637 | }
638 | 
639 | function Motorcycle(make, model, year) {
640 |   this.make = make;
641 |   this.model = model;
642 |   this.year = year;
643 |   this.numWheels = 2;
644 | }
645 | ```
646 | 
647 | And then refactor it, 'borrowing' the Car function and invoking it inside the Motorcycle function (we can't just call Car inside of a motorcycle since 'this' would refer to the object that we created from the Car function, i.e. we need to change value of 'this' to be the object created from the Motorcycle function)
648 | 
649 | ```javascript
650 | function Car(make, model, year) {
651 |   this.make = make;
652 |   this.model = model;
653 |   this.year = year;
654 |   this.numWheels = 4;
655 | }
656 | 
657 | // call:
658 | function Motorcycle(make, model, year) {
659 |   Car.call(this, make, model, year);
660 |   // we are changing 'this' (of Car) to be 'this' which refers to the new Motorcycle
661 |   this.numWheels = 2;
662 | }
663 | 
664 | // apply:
665 | function Motorcycle(make, model, year) {
666 |   Car.apply(this, [make, model, year]);
667 |   this.numWheels = 2;
668 | }
669 | 
670 | // even better using apply with 'arguments'
671 | function Motorcycle(make, model, year) {
672 |   Car.apply(this, arguments);
673 |   // arguments is the list of all the arguments that are passed to a function, it's not technically an array but similar to it (array-like object)
674 |   this.numWheels = 2;
675 | }
676 | ```
677 | 
678 | ### Prototypes
679 | 
680 | ![Screenshot](../images/diagramforproto.png)
681 | 
682 | - Circle is a function, square is an object
683 | - Every constructor function has a property on it called 'prototype', which is an object (it can also have methods and properties attached to it)
684 | - The prototype object has a property on it called 'constructor', which points back to the constructor function
685 | - Anytime an object is created using the 'new' keyword, a property called '\_\_proto__' gets created, linking the object and the prototype property of the constructor function
686 |   - If properties or methods are placed on the 'person.prototype', they can be accessible from any object created from that constructor function
687 |   - The way in which these objects (which are created by the constructor function) get accessed to the 'prototype' object is through the 'dunder proto' link
688 | 
689 | ```javascript
690 | // constructor function
691 | function Person(name) {
692 |   this.name - name;
693 | }
694 | 
695 | // object created from the Person constructor
696 | var elie = new Person('Elie');
697 | var colt = new Person('Colt');
698 | 
699 | // .__proto__ points to the prototype property on the Person constructor
700 | elie.__proto__ === Person.prototype; // true
701 | 
702 | // .constructor points back to the function
703 | // it is not something we're using or manipulating frequently, but it is part in a concept of 'inheritance'
704 | Person.prototype.constructor === Person; // true
705 | 
706 | // add a property isInstructor to prototype and set the value to be 'true'
707 | Person.prototype.isInstructor = true;
708 | 
709 | // all of our objects which were created with 'new' have access to it
710 | // since these objects have a link to Person.prototype, they can access anything inside of it
711 | // this is the exact way that JS finds methods and properties on objects, and this is a prototype chain
712 | elie.isInstructor; // true
713 | colt.isInstructor; // true
714 | ```
715 | 
716 | #### Prototype Chain
717 | 
718 | The way that JS finds methods and properties is by looking at the object, and if it can't find the method or property you're looking for, it goes to that object's \_\_proto__
719 | 
720 | This keeps happening until the property or method is found; if it is not found, the expression evaluates to 'undefined'
721 | 
722 | Example for arrays:
723 | 
724 | ```javascript
725 | var arr = [];
726 | // it is a shorthand for:
727 | new Array
728 | // we're using the built-in constructor in JS called 'Array' and making a new object from it
729 | // we also know that we have some methods like .push, but where is it defined and how does JS know where to find it?
730 | arr.push(10);
731 | // it is defined in __proto__
732 | 
733 | console.dir(arr);
734 | // Array[1]
735 | //  0: 10
736 | //  length: 1
737 | //  >__proto__: Array[0]
738 | //    >concat: function concat()
739 | //    ...
740 | //    >forEach: function forEach()
741 | //    ...
742 | //    >push: function push()
743 | //    ...
744 | 
745 | arr.__proto__ === Array.prototype; // true
746 | ```
747 | 
748 | We can see this even further with another example:
749 | 
750 | In JS every object has a method called 'hasOwnProperty' which returns 'true' if an object has a property specified as a parameter of the 'hasOwnProperty' method
751 | 
752 | ```javascript
753 | arr.hasOwnProperty('length'); // true
754 | 
755 | console.dir(arr); // dir(arr)
756 | // Array[1]
757 | //  0: 10
758 | //  length: 1
759 | //  >__proto__: Array[0]
760 | //    >concat: function concat()
761 | //    ...
762 | //    ...
763 | //    >__proto__: Object // the next __proto__ is the Object.prototype
764 | //      ...
765 | //      >length
766 | ```
767 | 
768 | ![Screenshot](../images/protochain.png)
769 | 
770 | ### Adding Methods to Prototype (Refactoring)
771 | 
772 | ```javascript
773 | function Person(name) {
774 |   this.name = name;
775 |   this.sayHi = function() {
776 |     return 'Hi ' + this.name;
777 |   }
778 | }
779 | 
780 | elie = new Person('Elie');
781 | elie.sayHi(); // Hi Elie
782 | 
783 | // this code works, but it is inefficient since every time we make an object using 'new' we have to redefine this function, but it is the same for everyone
784 | 
785 | function Person(name) {
786 |   this.name = name;
787 | }
788 | 
789 | // we put sayHi on the prototype
790 | Person.prototype.sayHi = function() {
791 |   return 'Hi ' + this.name; // refers to the object which is created
792 | }
793 | 
794 | elie = new Person('Elie');
795 | elie.sayHi(); // Hi Elie
796 | ```
797 | 
798 | Example:
799 | 
800 | ```javascript
801 | function Vehicle(make, model, year) {
802 |   this.make = make;
803 |   this.model = model;
804 |   this.year = year;
805 |   this.isRunning = false;
806 | }
807 | 
808 | // We don't want to place properties on the prototype because each object created from the vehicle constructor should have its own isRunning property 
809 | 
810 | // however all of the functions like turn on turn off and hunk should be placed on the prototype, since we don't want to redefine them for every object we create
811 | 
812 | Vehicle.prototype.turnOn = function() {
813 |   this.isRunning = true;
814 | } // not sure if we need ; here
815 | 
816 | Vehicle.prototype.turnOff = function() {
817 |   this.isRunning = false;
818 | }
819 | 
820 | Vehicle.prototype.honk = function() {
821 |   if (this.isRunning) {
822 |     return 'Beep!';
823 |   }
824 | }
825 | ```
826 | 
827 | ### Prototypal Inheritance
828 | 
829 | Inheritance is the passing of methods and properties from one class to another
830 | 
831 | In JS we don't actually pass one constructor to another, we pass the prototype property of one constructor to another constructor
832 | 
833 | The idea here is that since the prototype property is where all of our properties and methods live we need to have another constructor function get all those properties
834 | 
835 | There are two parts of inheritance
836 | - Set the prototype property to be a new object created with another prototype (using Object.create)
837 | - Reset the constructor property
838 | 
839 | ```javascript
840 | function Person(firstName, lastName) {
841 |   this.firstName = firstName;
842 |   this.lastName = lastName;
843 | }
844 | 
845 | Person.prototype.sayHi = function() {
846 |   return 'Hello ' + this.firstName + ' ' + this.lastName;
847 | }
848 | 
849 | function Student(firstName, lastName) {
850 |   return Person.apply(this, arguments);
851 | }
852 | 
853 | Student.prototype.sayHi = function() {
854 |   return 'Hello ' + this.firstName + ' ' + this.lastName;
855 | }
856 | 
857 | // The first idea that might come to mind is let's assign the prototype property of one object to be another's so we can assign student.prototype to be person.prototype
858 | // Now we can create an object from the student constructor and invoke the sayHi method and it works well
859 | Student.prototype = Person.prototype;
860 | 
861 | var elie = new Student('Elie', 'Schoppik');
862 | elie.sayHi(); // 'Hello Elie Schoppik'
863 | 
864 | // Not exactly
865 | 
866 | // Let's add something onto the student that prototype object
867 | Student.prototype.status = function() {
868 |   return 'I am currently a student!';
869 | }
870 | 
871 | // We want a student to inherit from person; so if we did this correctly the inheritance should only affect the student: our person objects should not be able to be modified from the student constructor function
872 | 
873 | // Let's create a new object from person constructor
874 | var elie = new Person('Elie', 'Schoppik');
875 | elie.status(); // I am currently a student!
876 | 
877 | // Person prototype should not have properties from the student prototype
878 | // The problem here is that we can't just assign one object to another - it will just create a reference
879 | 
880 | // Reference example:
881 | var o = {name: 'Elie'};
882 | var o2 = o;
883 | o2.name = 'Tim';
884 | o.name; // 'Tim'
885 | 
886 | // When we assign one object to another we do not create a brand new object we just create a reference, or a link to an existing object
887 | // In our case, if we change student.prototype, it will affect person.prototype
888 | 
889 | // If we want all of the methods and properties from the person.prototype, and want to avoid reference (we want two separate objects), we can use Object.create
890 | ```
891 | 
892 | #### Object.create
893 | 
894 | A function that creates a brand new object and accepts as its first parameter what the prototype object (\_\_proto__) should be for that newly created object
895 | 
896 | ```javascript
897 | function Student(firstName, lastName) {
898 |   return Person.apply(this, arguments);
899 | }
900 | 
901 | Student.prototype = Object.create(Person.Prototype);
902 | 
903 | Student.prototype.status = function() {
904 |   return 'I am currently a student'
905 | }
906 | 
907 | var elie = new Person('Elie, Schoppik');
908 | 
909 | elie.status; // undefined
910 | ```
911 | 
912 | #### Why not 'new'?
913 | 
914 | ```javascript
915 | function Student(firstName, lastName) {
916 |   return Person.apply(this, arguments);
917 | }
918 | 
919 | Student.prototype - new Person;
920 | 
921 | // This will do almost the same thing, but add additional unnecessary properties on the prototype object (since it is creating an object with undefined properties just for the prototype)
922 | 
923 | // So when doing inheritance throught the prototype (prototypal inheritance), use Object.create()
924 | ```
925 | 
926 | #### Resetting the Constructor
927 | 
928 | Every prototype object has a property on it called constructor which points back to the constructor function; if we take a look at the constructor property on student prototype, we'll actually see that it is the person constructor
929 | 
930 | That's because when we did Object.create we overwrote the constructor property; so we need to make sure to set it back to the correct value - we call this resetting the constructor
931 | 
932 | ```javascript
933 | function Student(firstName, lastName) {
934 |   return Person.apply(this, arguments);
935 | }
936 | 
937 | Student.prototype.sayHi = function() {
938 |   return 'Hello ' + this.firstName + ' ' + this.lastName;
939 | }
940 | 
941 | Student.prototype = Object.create(Person.prototype);
942 | 
943 | Student.prototype.constructor; // Person
944 | 
945 | Student.prototype.constructor = Student; // we simply assign Student.prototype.constructor to the the Student function
946 | ```
947 | 
948 | 


--------------------------------------------------------------------------------