JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution...
Transcript of JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution...
![Page 1: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/1.jpg)
JavaScript The Tough Parts.
scottiBR guilhermescotti
Guilherme Scotti
![Page 2: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/2.jpg)
JavaScript The Tough Parts.
scottiBR guilhermescotti
Mineiro25 anosEng. Software
Guilherme Scotti
![Page 3: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/3.jpg)
Por que?“True mastery means understanding the core principles and building up from them.”William Sentance
Por que?
![Page 4: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/4.jpg)
bit.ly/scotti-quiz
![Page 5: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/5.jpg)
● JavaScript Under the Hood● Execution Context e Lexical Environment● Hoisting● Lexical Scope● Closure
![Page 6: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/6.jpg)
Interpreted Language
Compiled Language
Hybrid Language
![Page 7: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/7.jpg)
“JavaScript is a lightweight, interpreted language”MDN Web Docs
![Page 8: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/8.jpg)
![Page 9: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/9.jpg)
SpiderMonkey Chakra NitroV8
![Page 10: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/10.jpg)
“Execution Context is defined as the environment in which the JavaScript code is executed.”Rupesh Mishra
“Execution Context is defined as the environment in which the JavaScript code is executed.”Rupesh Mishra
● Compilation or Creation Phase
● Execution Phase
![Page 11: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/11.jpg)
HOISTING
HOISTING
Declarations of variables and functions being “moved to top of your code”
![Page 12: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/12.jpg)
HOISTING
![Page 13: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/13.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 14: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/14.jpg)
Lexical Environment is a data structure that holds identifier-variable mapping on the memory heap.
![Page 15: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/15.jpg)
![Page 16: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/16.jpg)
ES6
LetConst
Arrow Functions
?
![Page 17: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/17.jpg)
Undefined X UndeclaredReference Error
![Page 18: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/18.jpg)
![Page 19: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/19.jpg)
”All declarations in JavaScript function, var, let, const even classes, are hoisted at the compiler phase“Sukhjinder Arora
![Page 20: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/20.jpg)
Temporal Dead Zone(TDZ)
![Page 21: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/21.jpg)
![Page 22: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/22.jpg)
”TDZ it’s a reserved memory space where declarations of ES6 remain until they are initialized“
![Page 23: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/23.jpg)
Porque TDZ existe?
![Page 24: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/24.jpg)
As far as I'm concerned the motivating feature for TDZs is to provide a rational semantics for const.
Allen Wirfs-BrockChief Project Editor ES6
![Page 25: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/25.jpg)
![Page 26: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/26.jpg)
“A language with only let and var would have been simpler then what we ended up with”
Allen Wirfs-BrockProject Editor ES6
![Page 27: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/27.jpg)
Function Declaration === Function Expressions ?
![Page 28: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/28.jpg)
![Page 29: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/29.jpg)
Vantagem do hoisting nas functions?
![Page 30: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/30.jpg)
Mutual recursion a() -> b() -> c() -> a()
![Page 31: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/31.jpg)
Lexical Scope
![Page 32: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/32.jpg)
![Page 33: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/33.jpg)
Closure
![Page 34: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/34.jpg)
A closure is the combination of a function and the lexical scope within which that function was declared. MDN
![Page 35: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/35.jpg)
Closure is when a function is able to remember and access its lexical scope.Kyle Simpson
![Page 36: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/36.jpg)
![Page 37: JavaScript The Tough Parts. - Amazon S3...Dec 02, 2019 · JavaScript Under the Hood Execution Context e Lexical Environment Hoisting Lexical Scope Closure. Interpreted Language Compiled](https://reader035.fdocuments.net/reader035/viewer/2022071104/5fde535548c8937d3c33d605/html5/thumbnails/37.jpg)
Thank You 😊Questions?
scottiBR guilhermescotti
Slides e Referênciasbit.ly/scottiSlides
FeedBack bit.ly/scottiFeedbacks