javascript the tough parts. - amazon s3...dec 02, 2019  · javascript under the hood execution...

37
JavaScript The Tough Parts. scottiBR guilhermescotti Guilherme Scotti

Upload: others

Post on 28-Aug-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

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

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

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

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

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

● 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

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

“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
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

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

“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

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

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

“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

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
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

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

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
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

”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

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
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

”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

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

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
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

“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

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
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

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

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

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
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

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

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

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
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

Thank You 😊Questions?

scottiBR guilhermescotti

Slides e Referênciasbit.ly/scottiSlides

FeedBack bit.ly/scottiFeedbacks