javascript the hard parts · callbacks & higher order functions. 11 ... ‘parameters’...
TRANSCRIPT
![Page 1: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/1.jpg)
JavaScript principles, Callbacks & Higher Order functions, Closure,
Classes/Prototypes & Asynchronicity
JavaScript the Hard Parts
![Page 2: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/2.jpg)
2
Academic Work:
Oxford University,
Harvard University
Previously
Cocreator & Engineer: Icecomm
Software Engineer: Gem
Will Sentance
Currently
CEO, Cofounder: Codesmith
Speaker: Frontend Masters, BBC
![Page 3: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/3.jpg)
3
GraduatesPer year from Codesmith LA and
Codesmith NY
Hired within 180 daysExcludes ineligible to work in the US, health
issues or no response to 6 contacts (full report
at codesmith.io for details)
Median starting salary$112k in NY, $106k in LA(Third-party audited for CIRR; Jan-June 2018 reporting period)
Github starsProjects by Codesmith students have
achieved global acclaim
92%
200+
50,000+
$110k
What is Codesmith?
12 week full-time software engineering immersive
program in Los Angeles & New York
Our mission is to create the next generation of leaders
in technology who care about impact and substance
![Page 4: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/4.jpg)
4
JavaScript and programming
experience
Non-technical
communication
Engineering
approach
Technical
communication
Analytical problem
solving
What to focus on in the
workshop
![Page 5: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/5.jpg)
5
1. Principles of JavaScript
2. Callbacks & Higher order functions
3. Closure (scope and execution context)
4. Asynchronous JavaScript & the event loop
5. Classes & Prototypes (OOP)
Contents
![Page 6: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/6.jpg)
6
When JavaScript code runs, it:
JavaScript principles
const num = 3;
function multiplyBy2 (inputNumber){
const result = inputNumber*2;
return result;
}
const output = multiplyBy2(num);
const newOutput = multiplyBy2(10);
Goes through the code line-by-line and runs/ ’executes’ each line - known as the thread of execution
Saves ‘data’ like strings and arrays so we can use that data later - in its memory
We can even save code (‘functions’)
![Page 7: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/7.jpg)
7
Functions
Created to run the code of a function - has 2 parts (we’ve already seen them!)
- Thread of execution- Memory
Execution context
Code we save (‘define’) functions & can use (call/invoke/execute/run) later with the function’s name & ( )
const num = 3;
function multiplyBy2 (inputNumber){
const result = inputNumber*2;
return result;
}
const output = multiplyBy2(num);
const newOutput = multiplyBy2(10);
(We’ll see another way of defining functions later)
![Page 8: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/8.jpg)
8
- JavaScript keeps track of what function is currently running (where’s the thread of execution)
- Run a function - add to call stack
- Finish running the function - JS removes it from call stack
- Whatever is top of the call stack - that’s the function we’re currently running
Call stackconst num = 3;
function multiplyBy2 (inputNumber){
const result = inputNumber*2;
return result;
}
const output = multiplyBy2(num);
const newOutput = multiplyBy2(10);
![Page 9: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/9.jpg)
9
1. Principles of JavaScript
2. Callbacks & Higher order functions
3. Closure (scope and execution context)
4. Asynchronous JavaScript & the event loop
5. Classes & Prototypes (OOP)
Contents
![Page 10: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/10.jpg)
10
- One of the most misunderstood concepts in JavaScript
- Enables powerful pro-level functions like map, filter, reduce (a core aspect of functional programming)
- Makes our code more declarative and readable
- Forms the backbone of the Codesmith technical interview (and professional mid/senior level engineering interviews)
Callbacks & Higher Order Functions
![Page 11: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/11.jpg)
11
Let’s see why…
Create a function 10 squared
- Takes no input
- Returns 10*10
What is the syntax (the exact code we type)?
Why do we even have functions?
![Page 12: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/12.jpg)
12
tenSquared
function tenSquared() {
return 10*10;
}
tenSquared() // 100
What about a 9 squared function?
![Page 13: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/13.jpg)
13
nineSquared
function nineSquared() {
return 9*9;
}
nineSquared() // 100
And an a 8 squared function? 125 squared?
What principle are we breaking?
![Page 14: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/14.jpg)
14
nineSquared
function nineSquared() {
return 9*9;
}
nineSquared() // 100
And an a 8 squared function? 125 squared?
What principle are we breaking? DRY (Don’t Repeat Yourself)
![Page 15: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/15.jpg)
15
We can generalize the function to make it reusable
function squareNum(num){
return num*num;
}
squareNum(10); // 100
squareNum(9); // 81
squareNum(8); // 64
![Page 16: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/16.jpg)
16
‘Parameters’ (placeholders) mean we don’t need to decide what data to run our
functionality on until we run the function
- Then provide an actual value (‘argument’) when we run the function
Higher order functions follow this same principle.
- We may not want to decide exactly what some of our functionality is until we
run our function
Generalizing functions
![Page 17: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/17.jpg)
17
The most effective way to
grow as a software engineer Stackoverflower
Uses code snippets to fix
bug without knowing how
they work
- Tackle blocks with a partner
- Stay focused on the problem
- Refine technical communication
- Collaborate to solve problem
Researcher
Avoids blocks by reading
everything they can find
on their block/bugPair programming Pair programming
![Page 18: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/18.jpg)
18
- I know what a variable is
- I've created a function before
- I've added a CSS style before
- I have implemented a sort algorithm (bubble, merge etc)
- I can add a method to an object’s prototype
- I understand the event loop in JavaScript
- I understand 'callback functions'
- I can implement filter
- I can handle collisions in a hash table
Pairing up
For each topic you know give yourself a point to get a total out of
csbin.io/callbacks
![Page 19: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/19.jpg)
19
Now suppose we have a function copyArrayAndMultiplyBy2
function copyArrayAndMultiplyBy2(array) {
const output = [];
for (let i = 0; i < array.length; i++) {
output.push(array[i] * 2);
}
return output;
}
const myArray = [1,2,3];
const result = copyArrayAndMultiplyBy2(myArray);
![Page 20: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/20.jpg)
20
What if want to copy array and divide by 2?
function copyArrayAndDivideBy2(array) {
const output = [];
for (let i = 0; i < array.length; i++) {
output.push(array[i] / 2);
}
return output;
}
const myArray = [1,2,3];
const result = copyArrayAndDivideBy2(myArray);
![Page 21: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/21.jpg)
21
Or add 3?
function copyArrayAndAdd3(array) {
const output = [];
for (let i = 0; i < array.length; i++) {
output.push(array[i] + 3);
}
return output;
}
const myArray = [1,2,3];
const result = copyArrayAndAdd3(myArray);
What principle are we breaking?
![Page 22: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/22.jpg)
22
Or add 3?
function copyArrayAndAdd3(array) {
const output = [];
for (let i = 0; i < array.length; i++) {
output.push(array[i] + 3);
}
return output;
}
const myArray = [1,2,3];
const result = copyArrayAndAdd3(myArray);
What principle are we breaking?
DRY - Don’t Repeat Yourself
![Page 23: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/23.jpg)
23
We could generalize our function - So we pass in our specific instruction only when we run copyArrayAndManipulate !
function copyArrayAndManipulate(array, instructions) {
const output = [];
for (let i = 0; i < array.length; i++) {
output.push(instructions(array[i]));
}
return output;
}
function multiplyBy2(input) { return input * 2; }
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);
![Page 24: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/24.jpg)
24
Functions in javascript = first class objects
They can co-exist with and can be treated like any other javascript object
1. Assigned to variables and properties of other objects
2. Passed as arguments into functions
3. Returned as values from functions
How was this possible?
![Page 25: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/25.jpg)
25
Which is our Higher Order Function?
function copyArrayAndManipulate(array, instructions) {
const output = [];
for (let i = 0; i < array.length; i++) {
output.push(instructions(array[i]));
}
return output;
}
function multiplyBy2(input) {return input * 2;}
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);
Which is our Callback Function
The outer function that
takes in a function is our
higher-order function
The function we insert is
our callback function
![Page 26: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/26.jpg)
26
Takes in a function or passes out a function
Just a term to describe these functions - any function that does it we call that - but
there's nothing different about them inherently
Higher-order functions
![Page 27: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/27.jpg)
27
Declarative readable code: Map, filter, reduce - the most readable way to write
code to work with data
Codesmith & pro interview prep: One of the most popular topics to test in
interview both for Codesmith and mid/senior level job interviews
Asynchronous JavaScript: Callbacks are a core aspect of async JavaScript, and are
under-the-hood of promises, async/await
Callbacks and Higher Order Functions simplify our code and keep it DRY
![Page 28: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/28.jpg)
28
Introducing arrow functions - a shorthand way to save functions
const multiplyBy2 = (input) => input*2
const multiplyBy2 = input => input*2
const multiplyBy2 = (input) => { return input*2 }
function multiplyBy2(input) { return input * 2; }
const output = multiplyBy2(3) //6
![Page 29: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/29.jpg)
29
Updating our callback function as an arrow function
function copyArrayAndManipulate(array, instructions) {
const output = [];
for (let i = 0; i < array.length; i++) {
output.push(instructions(array[i]));
}
return output;
}
const multiplyBy2 = input => input*2
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);
![Page 30: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/30.jpg)
30
We can even pass in multiplyBy2 directly without a name
function copyArrayAndManipulate(array, instructions) {
const output = [];
for (let i = 0; i < array.length; i++) {
output.push(instructions(array[i]));
}
return output;
}
const multiplyBy2 = input => input*2
const result = copyArrayAndManipulate([1, 2, 3], input => input*2);
But it’s still just the code of a function being passed into copyArrayAndManipulate
![Page 31: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/31.jpg)
31
- Improve immediate legibility of the code
- But at least for our purposes here they are ‘syntactic sugar’ - we’ll see their
full effects later
- Understanding how they’re working under-the-hood is vital to avoid
confusion
Anonymous and arrow functions
![Page 32: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/32.jpg)
32
1. Principles of JavaScript
2. Callbacks & Higher order functions
3. Closure (scope and execution context)
4. Asynchronous JavaScript & the event loop
5. Classes & Prototypes (OOP)
Contents
![Page 33: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/33.jpg)
33
Closure
- Closure is the most esoteric of JavaScript concepts
- Enables powerful pro-level functions like ‘once’ and ‘memoize’
- Many JavaScript design patterns including the module pattern use closure
- Build iterators, handle partial application and maintain state in an asynchronous world
![Page 34: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/34.jpg)
34
function multiplyBy2 (inputNumber){
const result = inputNumber*2;
return result;
}
const output = multiplyBy2(7);
const newOutput = multiplyBy2(10);
Functions get a new memory every run/invocation
![Page 35: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/35.jpg)
35
Functions with memories
- When our functions get called, we create a live store of data (local memory/variable environment/state) for that function’s execution context.
- When the function finishes executing, its local memory is deleted (except the returned value)
- But what if our functions could hold on to live data between executions?
- This would let our function definitions have an associated cache/persistent memory
- But it all starts with us returning a function from another function
![Page 36: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/36.jpg)
36
function createFunction() {
function multiplyBy2 (num){
return num*2;
}
return multiplyBy2;
}
const generatedFunc = createFunction();
const result = generatedFunc(3); // 6
Functions can be returned from other functions in JavaScript
![Page 37: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/37.jpg)
37
csbin.io/closures
Pair programming
challenges
![Page 38: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/38.jpg)
38
function outer (){
let counter = 0;
function incrementCounter (){
counter ++;
}
incrementCounter();
}
outer();
Calling a function in the same function call as it was defined
Where you define your functions determines what data it has access to when you call it
![Page 39: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/39.jpg)
39
function outer (){
let counter = 0;
function incrementCounter (){ counter ++; }
return incrementCounter;
}
const myNewFunction = outer();
myNewFunction();
myNewFunction();
Calling a function outside of the function call in which it was defined
![Page 40: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/40.jpg)
40
When a function is defined, it gets a bond to the surrounding Local Memory
(“Variable Environment”) in which it has been defined
The bond
![Page 41: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/41.jpg)
41
- We return incrementCounter’s code (function definition) out of outer into
global and give it a new name - myNewFunction
- We maintain the bond to outer’s live local memory - it gets ‘returned out’
attached on the back of incrementCounter’s function definition.
- So outer’s local memory is now stored attached to myNewFunction - even
though outer’s execution context is long gone
- When we run myNewFunction in global, it will first look in its own local
memory first (as we’d expect), but then in myNewFunction’s ‘backpack’
The ‘backpack’
![Page 42: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/42.jpg)
42
What can we call this ‘backpack’?
- Closed over ‘Variable Environment’ (C.O.V.E.)
- Persistent Lexical Scope Referenced Data (P.L.S.R.D.)
- ‘Backpack’
- ‘Closure’
The ‘backpack’ (or ‘closure’) of live data is attached incrementCounter (then to
myNewFunction) through a hidden property known as [[scope]] which persists
when the inner function is returned out
![Page 43: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/43.jpg)
43
function outer (){
let counter = 0;
function incrementCounter (){
counter ++;
}
return incrementCounter;
}
Let’s run outer again
const myNewFunction = outer();
myNewFunction();
myNewFunction();
const anotherFunction = outer();
anotherFunction();
anotherFunction();
![Page 44: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/44.jpg)
44
If we run 'outer' again and store the returned 'incrementCounter' function
definition in 'anotherFunction', this new incrementCounter function was created in
a new execution context and therefore has a brand new independent backpack
Individual backpacks
![Page 45: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/45.jpg)
45
Helper functions: Everyday professional helper functions like ‘once’ and ‘memoize’
Iterators and generators: Which use lexical scoping and closure to achieve the
most contemporary patterns for handling data in JavaScript
Module pattern: Preserve state for the life of an application without polluting the
global namespace
Asynchronous JavaScript: Callbacks and Promises rely on closure to persist state
in an asynchronous environment
Closure gives our functions persistent memories and entirely new toolkit for writing professional code
![Page 46: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/46.jpg)
46
1. Principles of JavaScript
2. Callbacks & Higher order functions
3. Closure (scope and execution context)
4. Asynchronous JavaScript & the event loop
5. Classes & Prototypes (OOP)
Contents
![Page 47: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/47.jpg)
47
- Promises - the most signficant ES6 feature
- Asynchronicity - the feature that makes dynamic web applications possible
- The event loop - JavaScript’s triage
- Microtask queue, Callback queue and Web Browser features (APIs)
Promises, Async & the Event Loop
![Page 48: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/48.jpg)
48
A reminder of how JavaScript executes code
const num = 3;
function multiplyBy2 (inputNumber){
const result = inputNumber*2;
return result;
}
const output = multiplyBy2(num);
const newOutput = multiplyBy2(10);
![Page 49: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/49.jpg)
49
JavaScript is:
- Single threaded (one command runs at a time)- Synchronously executed (each line is run in order the code appears)
So what if we have a task:
- Accessing Twitter’s server to get new tweets that takes a long time- Code we want to run using those tweets
Challenge: We want to wait for the tweets to be stored in tweets so that they’re there to run displayTweets on - but no code can run in the meantime
Asynchronicity is the backbone of modern web development in JavaScript yet...
![Page 50: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/50.jpg)
50
Slow function blocks further code running
const tweets = getTweets("http://twitter.com/will/1")
// ⛔350ms wait while a request is sent to Twitter HQ
displayTweets(tweets)
// more code to run
console.log("I want to runnnn!")
![Page 51: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/51.jpg)
51
What if we try to delay a function directly using setTimeout?
function printHello(){
console.log("Hello");
}
setTimeout(printHello,1000);
console.log("Me first!");
setTimeout is a built in function - its first argument is the function to delay followed by ms to delay by
In what order will our console logs appear?
![Page 52: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/52.jpg)
52
So what about a delay of 0ms
function printHello(){
console.log("Hello");
}
setTimeout(printHello,0);
console.log("Me first!");
Now, in what order will our console logs occur?
![Page 53: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/53.jpg)
53
Our core JavaScript engine has 3 main parts:
- Thread of execution- Memory/variable environment- Call stack
We need to add some new components:
- Web Browser APIs/Node background APIs- Promises- Event loop, Callback/Task queue and micro task queue
JavaScript is not enough - We need new pieces (some of which aren’t JavaScript at all)
![Page 54: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/54.jpg)
54
ES5 solution: Introducing ‘callback functions’, and Web Browser APIs
function printHello(){ console.log("Hello"); }
setTimeout(printHello,1000);
console.log("Me first!");
![Page 55: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/55.jpg)
55
We’re interacting with a world outside of JavaScript now - so we need rules
function printHello(){ console.log("Hello"); }
function blockFor1Sec(){ //blocks in the JavaScript thread for
1 sec }
setTimeout(printHello,0);
blockFor1Sec()
console.log("Me first!");
![Page 56: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/56.jpg)
56
Problems
- Our response data is only available in the callback function - Callback hell
- Maybe it feels a little odd to think of passing a function into another function only for it to run much later
Benefits
- Super explicit once you understand how it works under-the-hood
ES5 Web Browser APIs with callback functions
![Page 57: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/57.jpg)
57
csbin.io/async
Pair programming
challenges
![Page 58: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/58.jpg)
58
Using two-pronged ‘facade’ functions that both:
- Initiate background web browser work and
- Return a placeholder object (promise) immediately in JavaScript
ES6+ Solution (Promises)
![Page 59: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/59.jpg)
59
ES6+ Promises
function display(data){
console.log(data)
}
const futureData = fetch('https://twitter.com/will/tweets/1')
futureData.then(display);
console.log("Me first!");
![Page 60: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/60.jpg)
60
Special objects built into JavaScript that get returned immediately when we make
a call to a web browser API/feature (e.g. fetch) that’s set up to return promises
(not all are)
Promises act as a placeholder for the data we expect to get back from the web
browser feature’s background work
ES6+ Solution (Promises)
![Page 61: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/61.jpg)
61
Any code we want to run on the returned data must also be saved on the promise
object
Added using .then method to the hidden property ‘onFulfilment’
Promise objects will automatically trigger the attached function to run (with its
input being the returned data
then method and functionality to call on completion
![Page 62: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/62.jpg)
62
But we need to know how our promise-deferred functionality gets back into JavaScript to be run
function display(data){console.log(data)}
function printHello(){console.log("Hello");}
function blockFor300ms(){/* blocks js thread for 300ms }
setTimeout(printHello, 0);
const futureData = fetch('https://twitter.com/will/tweets/1')
futureData.then(display)
blockFor300ms()
console.log("Me first!");
![Page 63: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/63.jpg)
63
Problems
- 99% of developers have no idea how they’re working under the hood
- Debugging becomes super-hard as a result
- Developers fail technical interviews
Benefits
- Cleaner readable style with pseudo-synchronous style code
- Nice error handling process
Promises
![Page 64: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/64.jpg)
64
We have rules for the execution of our asynchronously delayed code
Hold promise-deferred functions in a microtask queue and callback function in a
task queue (Callback queue) when the Web Browser Feature (API) finishes
Add the function to the Call stack (i.e. run the function) when:
- Call stack is empty & all global code run (Have the Event Loop check this
condition)
Prioritize functions in the microtask queue over the Callback queue
![Page 65: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/65.jpg)
65
Non-blocking applications: This means we don’t have to wait in the single thread
and don’t block further code from running
However long it takes: We cannot predict when our Browser feature’s work will
finish so we let JS handle automatically running the function on its completion
Web applications: Asynchronous JavaScript is the backbone of the modern web -
letting us build fast ‘non-blocking’ applications
Promises, Web APIs, the Callback & Microtask Queues and Event loop enable:
![Page 66: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/66.jpg)
66
1. Principles of JavaScript
2. Callbacks & Higher order functions
3. Closure (scope and execution context)
4. Asynchronous JavaScript & the event loop
5. Classes & Prototypes (OOP)
Contents
![Page 67: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/67.jpg)
67
- An enormously popular paradigm for structuring our complex code
- Prototype chain - the feature behind-the-scenes that enables emulation of OOP but is a compelling tool in itself
- Understanding the difference between __proto__ and prototype
- The new and class keywords as tools to automate our object & method creation
Classes, Prototypes - Object Oriented JavaScript
![Page 68: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/68.jpg)
68
1. Save data (e.g. in a quiz game the scores of user1 and user2)2. Run code (functions) using that data (e.g. increase user 2’s score)
Easy! So why is development hard?
In a quiz game I need to save lots of users, but also admins, quiz questions, quiz outcomes, league tables - all have data and associated functionality
In 100,000 lines of code
- Where is the functionality when I need it? - How do I make sure the functionality is only used on the right data!
Core of development (and running code)
![Page 69: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/69.jpg)
69
1. Easy to reason about
But also
2. Easy to add features to (new functionality)
3. Nevertheless efficient and performant
The Object-oriented paradigm aims is to let us achieve these three goals
That is, I want my code to be:
![Page 70: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/70.jpg)
70
So if I’m storing each user in my app with their respective data (let’s simplify)
user2: - name: ‘Stephanie’- score: 5
And the functionality I need to have for each user (again simplifying!)
- increment functionality (there’d be a ton of functions in practice)
How could I store my data and functionality together in one place?
user1: - name: ‘Tim’- score: 3
![Page 71: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/71.jpg)
71
Objects - store functions with their associated data!
const user1 = {
name: "Will",
score: 3,
increment: function() { user1.score++; }
};
user1.increment(); //user1.score -> 4
This is the principle of encapsulation - and it’s going to transform how we can ‘reason about’ our code
Let's keep creating our objects. What alternative techniques do we have for creating objects?
![Page 72: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/72.jpg)
72
Creating user2 user dot notation
const user2 = {}; //create an empty object
//assign properties to that object
user2.name = "Tim";
user2.score = 6;
user2.increment = function() {
user2.score++;
};
Declare an empty object and add properties with dot notation
![Page 73: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/73.jpg)
73
Creating user3 using Object.create
const user3 = Object.create(null);
user3.name = "Eva";
user3.score = 9;
user3.increment = function() {
user3.score++;
};
Object.create is going to give us fine-grained control over our object later on
Our code is getting repetitive, we're breaking our DRY principle. And suppose we have millions of users! What could we do?
![Page 74: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/74.jpg)
74
Solution 1. Generate objects using a function
function userCreator(name, score) { const newUser = {}; newUser.name = name; newUser.score = score; newUser.increment = function() { newUser.score++; }; return newUser;};
const user1 = userCreator("Will", 3);const user2 = userCreator("Tim", 5);user1.increment()
![Page 75: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/75.jpg)
75
Problems: Each time we create a new user we make space in our computer's
memory for all our data and functions. But our functions are just copies
Is there a better way?
Benefits: It's simple and easy to reason about!
Solution 1. Generate objects using a function
![Page 76: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/76.jpg)
76
Store the increment function in just one object and have the interpreter, if it
doesn't find the function on user1, look up to that object to check if it's there
Link user1 and functionStore so the interpreter, on not finding .increment, makes
sure to check up in functionStore where it would find it
Make the link with Object.create() technique
Solution 2: Using the prototype chain
![Page 77: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/77.jpg)
77
Solution 2: Using the prototype chainfunction userCreator (name, score) {
const newUser = Object.create(userFunctionStore);
newUser.name = name;
newUser.score = score;
return newUser;
};
const userFunctionStore = {
increment: function(){this.score++;},
login: function(){console.log("Logged in");}
};
const user1 = userCreator("Will", 3);
const user2 = userCreator("Tim", 5);
user1.increment();
![Page 78: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/78.jpg)
78
What if we want to confirm our user1 has the property score
function userCreator (name, score) { const newUser = Object.create(userFunctionStore); newUser.name = name; newUser.score = score; return newUser;};
const userFunctionStore = { increment: function(){this.score++;}, login: function(){console.log("Logged in");}};
const user1 = userCreator("Will", 3);const user2 = userCreator("Tim", 5);user1.hasOwnProperty('score') We can use the hasOwnProperty method -
but where is it?
![Page 79: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/79.jpg)
79
We can use the hasOwnProperty method - but where is it? Is it on user1?
All objects have a __proto__ property by default which defaults to linking to a big
object - Object.prototype full of (somewhat) useful functions
We get access to it via userFunctionStore’s __proto__ property - the chain
What if we want to confirm our user1 has the property score
![Page 80: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/80.jpg)
80
Declaring & calling a new function inside our ‘method’ incrementfunction userCreator(name, score) { const newUser = Object.create(userFunctionStore); newUser.name = name; newUser.score = score; return newUser;};
const userFunctionStore = { increment: function() { this.score++; }};
const user1 = userCreator("Will", 3);const user2 = userCreator("Tim", 5);user1.increment(); Let’s start by simplifying (just increment
method - written over 3 lines now)
![Page 81: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/81.jpg)
81
Create and invoke a new function (add1) inside incrementfunction userCreator(name, score) { const newUser = Object.create(userFunctionStore); newUser.name = name; newUser.score = score; return newUser;};
const userFunctionStore = { increment: function() { function add1(){ this.score++; } add1() }};
const user1 = userCreator("Will", 3);const user2 = userCreator("Tim", 5);user1.increment(); What does this get auto-assigned to?
![Page 82: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/82.jpg)
82
Arrow functions override the normal this rulesfunction userCreator(name, score) { const newUser = Object.create(userFunctionStore); newUser.name = name; newUser.score = score; return newUser;};
const userFunctionStore = { increment: function() { const add1 = () => { this.score++; } add1() }};
const user1 = userCreator("Will", 3);const user2 = userCreator("Tim", 5);user1.increment();
Now our inner function gets its this set by where it was saved - it’s a ‘lexically scoped this
![Page 83: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/83.jpg)
83
Problems: No problems! It's beautiful. Maybe a little long-winded
Write this every single time - but it's 6 words!
Benefits: Super sophisticated but not standard
Solution 2: Using the prototype chain
const newUser = Object.create(userFunctionStore);
...
return newUser;
![Page 84: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/84.jpg)
84
csbin.io/oop
Pair programming
challenges
![Page 85: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/85.jpg)
85
Solution 3 - Introducing the keyword that automates the hard work: new
When we call the function that returns an object with new in front we automate 2 things
1. Create a new user object2. Return the new user object
But now we need to adjust how we write the body of userCreator - how can we:
- Refer to the auto-created object?- Know where to put our single copies of functions?
![Page 86: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/86.jpg)
86
The new keyword automates a lot of our manual work
function userCreator(name, score) {
const newUser = Object.create(functionStore);
newUser this.name = name;
newUser this.score = score;
return newUser;
};
functionStore userCreator.prototype // {};
functionStore userCreator.prototype.increment = function(){
this.score++;
}
const user1 = new userCreator("Will", 3);
Automates the hard work
![Page 87: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/87.jpg)
87
Interlude - functions are both objects and functions 🤨
function multiplyBy2(num){
return num*2
}
multiplyBy2.stored = 5
multiplyBy2(3) // 6
multiplyBy2.stored // 5
multiplyBy2.prototype // {}
We could use the fact that all functions have a default property `prototype` on their object version, (itself an object) - to replace our `functionStore` object
![Page 88: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/88.jpg)
88
The new keyword automates a lot of our manual work
function userCreator(name, score){
this.name = name;
this.score = score;
}
userCreator.prototype.increment = function(){ this.score++; };
userCreator.prototype.login = function(){ console.log("login"); };
const user1 = new userCreator(“Eva”, 9)
user1.increment()
![Page 89: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/89.jpg)
89
Benefits:
Faster to write. Often used in practice in professional code
Problems:
95% of developers have no idea how it works and therefore fail interviews
We have to upper case first letter of the function so we know it requires ‘new’ to
work!
Solution 3 - Introducing the keyword that automates the hard work: new
![Page 90: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/90.jpg)
90
We’re writing our shared methods separately from our object ‘constructor’ itself
(off in the userCreator.prototype object)
Other languages let us do this all in one place. ES2015 lets us do so too
Solution 4: The class ‘syntactic sugar’
![Page 91: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/91.jpg)
91
Solution 4: The class ‘syntactic sugar’
class UserCreator {
constructor (name, score){
this.name = name;
this.score = score;
}
increment (){ this.score++; }
login (){ console.log("login"); }
}
const user1 = new UserCreator("Eva", 9);
user1.increment();
![Page 92: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/92.jpg)
92
Solution 4: The class ‘syntactic sugar’
class UserCreator {
constructor (name, score){
this.name = name;
this.score = score;
}
increment (){ this.score++; }
login (){ console.log("login"); }
}
const user1 = new UserCreator("Eva", 9);
user1.increment();
userCreator.prototype.increment = function(){ this.score++; };
userCreator.prototype.login = function(){ console.log("login"); };
function userCreator(name, score){ this.name = name; this.score = score;}
![Page 93: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/93.jpg)
93
Benefits:
Emerging as a new standard
Feels more like style of other languages (e.g. Python)
Problems:
99% of developers have no idea how it works and therefore fail interviews
But you will not be one of them!
Solution 4: The class ‘syntactic sugar’
![Page 94: JavaScript the Hard Parts · Callbacks & Higher Order Functions. 11 ... ‘Parameters’ (placeholders) mean we don’t need to decide what data to run our functionality on until](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece40bed9590e4d3f3275f5/html5/thumbnails/94.jpg)
94
1. Principles of JavaScript
2. Callbacks & Higher order functions
3. Closure (scope and execution context)
4. Asynchronous JavaScript & the event loop
5. Classes & Prototypes (OOP)
Fin