javascript the tough parts....2019/10/12 · hoisting quiz ii lexical scope closure interpreted...
TRANSCRIPT
![Page 1: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/1.jpg)
JavaScript The Tough Parts.
scottiBR guilhermescotti
Guilherme Scotti
![Page 2: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/2.jpg)
scottiBR
guilhermescottiEng. de Controle e Automação
Eng. Software
Back End Full Stack Front End
![Page 3: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/3.jpg)
Por que aprender sobre fundamentos da linguagem?
![Page 4: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/4.jpg)
“True mastery means understanding the core principles and building up from them.”William Sentance
![Page 5: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/5.jpg)
bit.ly/scottiQuiz
![Page 6: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/6.jpg)
● Compilador● Execution Context e Lexical Environment● Hoisting● Quiz II● Lexical Scope● Closure
![Page 7: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/7.jpg)
![Page 8: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/8.jpg)
Interpreted Language
Compiled Language
Hybrid Language
![Page 9: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/9.jpg)
![Page 10: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/10.jpg)
![Page 11: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/11.jpg)
“JavaScript is a lightweight, interpreted language”MDN Web Docs
“JavaScript is a interpreter-agnostic language”ECMASCRIPT
![Page 12: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/12.jpg)
SpiderMonkey Chakra NitroV8
![Page 13: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/13.jpg)
“Execution Context is defined as the environment in which the JavaScript code is executed.”Rupesh Mishra
![Page 14: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/14.jpg)
● Compilation or Creation Phase● Execution Phase
![Page 15: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/15.jpg)
HOISTING
![Page 16: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/16.jpg)
Declarations of variables and functions being moved to top of your code
![Page 17: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/17.jpg)
HOISTING
![Page 18: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/18.jpg)
“Hoisting refers to the default behavior of Javascript to process and put all variables and functions declarations into Lexical Environment during compile phase of its execution context”Maya Shavin
![Page 19: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/19.jpg)
Lexical Environment is a data structure that holds identifier-variable mapping on the memory heap.
![Page 20: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/20.jpg)
![Page 21: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/21.jpg)
JavaScript only hoists variable declarations, initializations are not hoisted.
![Page 22: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/22.jpg)
![Page 23: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/23.jpg)
Assignment of value to a variable happens only at the execution phase
![Page 24: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/24.jpg)
Undefined X UndeclaredReference Error
![Page 25: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/25.jpg)
ES6
LetConst
Arrow Functions
?
![Page 26: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/26.jpg)
”All declarations in JavaScript function, var, let, const even classes, are hoisted at the compiler phase“Sukhjinder Arora
![Page 27: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/27.jpg)
![Page 28: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/28.jpg)
Temporal Dead Zone(TDZ)
![Page 29: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/29.jpg)
![Page 30: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/30.jpg)
NOTE 13.2.1 let and const declarations define variables that are scoped to the running execution context Lexical Environment. The variables are created when their containing Lexical Environment is instantiated but may not be accessed in any way until the variable’s Lexical Binding is evaluated. A variable defined by a Lexical Binding with an Initializer is assigned the value of its Initializer Assignment Expression when the Lexical Binding is evaluated, not when the variable is created. If a Lexical Binding in a let declaration does not have an Initializer the variable is assigned the value undefined when the Lexical Binding is evaluated.
![Page 31: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/31.jpg)
”TDZ it’s a reserved memory space where declarations of ES6 remain until they are initialized“
![Page 32: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/32.jpg)
![Page 33: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/33.jpg)
Porque TDZ existe?
![Page 34: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/34.jpg)
const undefined?
![Page 35: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/35.jpg)
As far as I'm concerned the motivating feature for TDZs is to provide a rational semantics for const.
Allen Wirfs-BrockProject Editor ES6
![Page 36: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/36.jpg)
![Page 37: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/37.jpg)
A language with only let and var would have been simpler then what we ended up with
Allen Wirfs-BrockProject Editor ES6
![Page 38: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/38.jpg)
![Page 39: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/39.jpg)
Function Declaration === Function Expressions ?
![Page 40: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/40.jpg)
![Page 41: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/41.jpg)
Vantagem do hoisting nas functions?
![Page 42: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/42.jpg)
Mutual recursion a() -> b() -> c() -> a()
![Page 43: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/43.jpg)
Clean Code
![Page 44: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/44.jpg)
Lexical Scope
![Page 45: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/45.jpg)
bit.ly/scottiQuiz
![Page 46: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/46.jpg)
![Page 47: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/47.jpg)
result = 1Global Environment
result = 2a()
result = 3b()
Execution Environment
![Page 48: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/48.jpg)
result = 1
Global Environment
result = 2a()
result = 1b()
Execution Environment
function a()function b()
Outher Environment Reference
![Page 49: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/49.jpg)
Outer Environment
![Page 50: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/50.jpg)
Lexical Scope always reference over a variable, not a value
![Page 51: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/51.jpg)
speaker =Scotti
Global Environment
speaker = Guilherme
callSpeaker()
Call Stack
function callSpeaker()
speaker =Guilherme
![Page 52: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/52.jpg)
ClosureWhat is
![Page 53: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/53.jpg)
A closure is the combination of a function and the lexical scope within which that function was declared. MDN
![Page 54: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/54.jpg)
![Page 55: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/55.jpg)
Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.Kyle Simpson
![Page 56: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/56.jpg)
![Page 57: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/57.jpg)
![Page 58: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/58.jpg)
Global Environment
celebrityName(first)
intro = “This is” first = last = undefined “Michael”
lastName(last)
intro = “Hello ”celebrityName()mjName()
intro = “This is” first =lastName() “Michael”
last = Jackson
![Page 59: JavaScript The Tough Parts....2019/10/12 · Hoisting Quiz II Lexical Scope Closure Interpreted Language Compiled Language Hybrid Language “JavaScript is a lightweight, interpreted](https://reader030.vdocuments.net/reader030/viewer/2022041019/5ece5b4e73171a196779bba6/html5/thumbnails/59.jpg)
Thank You 😊Questions?
scottiBR guilhermescotti
Slides e Referênciasbit.ly/scottiSlides
FeedBack bit.ly/scottiFeedbacks