JavaScript The Bad Parts

Patrick Behr History

• Created in 1995 by Netscape • Originally called Mocha, then LiveScript, then JavaScript • It’s not related to Java • ECMAScript is the “official” name • Many implementations (V8, JavaScript, Chakra, JScript.NET, ActionScript) • 2005 – Jesse James Garrett introduces • 2009 – ECMAScript 5 and Harmony • 2015 – ECMAScript 2015 (the 6th edition) • ECMAScript 2016, ECMAScript 2017 What is JavaScript

• HTML – content and structure • CSS – style and layout • JavaScript – Programming language the runs in the browser • Make your web pages interactive • Dynamically update content • Add or remove elements • Animate images • Modify styles • Validate form data What does JavaScript look like

• Variables • Must start with letter, number, underscore, or dollar sign • Case sensitive: myvariable, myVariable, MYVARIABLE • You must declare a variable before you can reference it • You don’t define a data type What does JavaScript look like What does JavaScript look like

• Primitive Data Types • Boolean • Number • String • Null • Undefined • Objects • Date • Array What does JavaScript look like

• Functions • Can accept input parameters (up to 255) • Can return a value • If no return statement, it will return “undefined” by default • Can have a name, but doesn’t have to • Can be assigned to a variable and passed as a parameter • Must be defined before you can call it What does JavaScript look like

• Function declaration What does JavaScript look like

• Objects • Key / Value pairs • Surrounded by curly • Can contain variables, functions, and objects • Can also be empty What does JavaScript look like How JavaScript does stuff

• Variable type is determined by it’s value • Variables can change type • Use “typeof” to determine variable type How JavaScript does stuff How JavaScript does stuff

• Assignment “=“ How JavaScript does stuff

• Equality “==“ and “===“ How JavaScript does stuff

• Non-Equality “!=“ and “!==“ How JavaScript does stuff

• Remember not to check equality using “=“ How JavaScript does stuff

• Remember not to check equality using “=“

ASSIGNMENT How JavaScript does stuff

• Remember not to check equality using “=“ You want the truthy? You can’t handle the truthy!

• Falsey values • false • null • undefined • 0 (zero) • “ “ (blank) • Truthy • If it’s not falsey, it must be truthy How JavaScript does stuff

• JavaScript is executed line by line • Variables and functions must be defined before used How JavaScript does stuff How JavaScript does stuff

• You can use variables and functions prior to definition How JavaScript does stuff How JavaScript does stuff

• Referred to as Hoisting • “Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope” – w3schools How JavaScript does stuff How JavaScript does stuff How JavaScript does stuff How JavaScript does stuff How JavaScript does stuff

• Declarations aren’t actually moved anywhere • Two phases for each new lexical scope (global, function)

• Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations • Execution 1. Execute line by line How JavaScript does stuff How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations DECLARATION 3. Scan for variable declarations How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations DECLARATION 3. Scan for variable declarations

REGISTERED INTERNALLY

myVar = undefined How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations ASSIGNMENT 3. Scan for variable declarations

myVar = undefined How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations Execution 1. Execute line by line

myVar = undefined How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations Execution 1. Execute line by line

myVar = undefined How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations Execution 1. Execute line by line

myVar = ‘My variable’ How JavaScript does stuff How JavaScript does stuff How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations

REGISTERED INTERNALLY

DECLARATION myVar = function How JavaScript does stuff

Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations

“myVar” already registered

DECLARATION myVar = function How JavaScript does stuff

myVar = function How JavaScript does stuff

myVar = function How JavaScript does stuff

myVar = ‘This is a string’ How JavaScript does stuff

myVar = ‘This is a string’ Uncle Aesop says

• Define variables and functions at the top Review

• Variables • Declaration • Assignment • Equality Review

• Variables Primitive Data Types • Declaration Boolean • Assignment Number • Equality String Null • Data Types Undefined Objects Date Array Review

• Variables • Declaration • Assignment • Equality • Data Types • Functions Review

• Variables • Declaration • Assignment • Equality • Data Types • Functions • Objects Review

• Variables • Declaration • Assignment • Equality • Data Types • Functions • Objects • Hoisting Functions and Callbacks A closer look at functions

• Can have a name, but can also be anonymous (unnamed) • First class objects • Stored in variables, passed into or returned from functions • Often used as a “Callback” • A callback is a function sent as an argument into another function • The callback function is called from the other function Callbacks Callbacks Callbacks Callbacks Callbacks Callbacks Uncle Aesop says

• It’s a good idea to make sure the callback is actually a function before you call it! Uncle Aesop says

• It’s a good idea to make sure the callback is actually a function before you call it! Synchronous and asynchronous functions

• Synchronous • In-line function call • The main function waits for the called function to complete • Like a phone call • Asynchronous • Similar to a submitted job • The main function is free to continue processing • Like a text message Synchronous and asynchronous functions

Synchronous Synchronous and asynchronous functions Synchronous QINTER QBATCH

Program1

QINTER JOB QUEUE Synchronous and asynchronous functions Synchronous QINTER QBATCH SYNC STARTED

Program1

QINTER JOB QUEUE Synchronous and asynchronous functions Synchronous QINTER QBATCH SYNC STARTED

OtherPgm

Program1

QINTER JOB QUEUE Synchronous and asynchronous functions Synchronous QINTER QBATCH SYNC STARTED OTHER PGM

OtherPgm

Program1

QINTER JOB QUEUE Synchronous and asynchronous functions Synchronous QINTER QBATCH SYNC STARTED OTHER PGM

Program1

QINTER JOB QUEUE Synchronous and asynchronous functions Synchronous QINTER QBATCH SYNC STARTED OTHER PGM SYNC ENDING

Program1

QINTER JOB QUEUE Synchronous and asynchronous functions Synchronous QINTER QBATCH SYNC STARTED OTHER PGM SYNC ENDING

QINTER JOB QUEUE Synchronous and asynchronous functions

Asynchronous Synchronous and asynchronous functions Asynchronous QINTER QBATCH

Program1

QINTER JOB QUEUE Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED

Program1

QINTER JOB QUEUE Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED

Program1 OtherPgm

QINTER JOB QUEUE Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED ASYNC ENDING

Program1 OtherPgm

QINTER JOB QUEUE Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED ASYNC ENDING

OtherPgm

QINTER JOB QUEUE Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED ASYNC ENDING OTHER PGM

OtherPgm

QINTER JOB QUEUE Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED ASYNC ENDING OTHER PGM

QINTER JOB QUEUE Synchronous and asynchronous functions

Callback

Program to “callback” Synchronous and asynchronous functions Callback QINTER QBATCH

Program1

QINTER JOB QUEUE Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED

Program1

QINTER JOB QUEUE Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED

Program1 OtherPgm

QINTER JOB QUEUE Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE

Program1 OtherPgm

QINTER JOB QUEUE Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM

Program1 OtherPgm

QINTER JOB QUEUE Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM

Program1 OtherPgm

QINTER JOB QUEUE Program2 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM

Program1

QINTER JOB QUEUE Program2 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM ASYNC ENDED

Program1

QINTER JOB QUEUE Program2 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM ASYNC ENDED

QINTER JOB QUEUE Program2 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM ASYNC ENDED Program2

QINTER JOB QUEUE Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM ASYNC ENDED PROGRAM2… Program2

QINTER JOB QUEUE Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM ASYNC ENDED PROGRAM2…

QINTER JOB QUEUE Concurrency model and Event Loop

• Each function call form a stack of “frames” • Each frame contains the functions’ arguments and variables • When the function is done, the frame is removed from the stack • WebAPIs • Functionality (APIs) provided by the browser • setTimeout • Animation stuff • Callback Queue Concurrency model and Event Loop

STACK WebAPIs

CALLBACK QUEUE Concurrency model and Event Loop

STACK WebAPIs

main()

CALLBACK QUEUE Concurrency model and Event Loop

STACK WebAPIs

console.log starting main()

CALLBACK QUEUE Concurrency model and Event Loop

STACK WebAPIs

starting main()

CALLBACK QUEUE Concurrency model and Event Loop

STACK WebAPIs

setTimeout starting main()

CALLBACK QUEUE Concurrency model and Event Loop

STACK WebAPIs

timer...

setTimeout starting main()

CALLBACK QUEUE Concurrency model and Event Loop

STACK WebAPIs

timer...

starting main()

CALLBACK QUEUE Concurrency model and Event Loop

STACK WebAPIs

timer...

console.log starting main() ending CALLBACK QUEUE Concurrency model and Event Loop

STACK WebAPIs

timer...

starting main() ending CALLBACK QUEUE Concurrency model and Event Loop

STACK WebAPIs

timer...

starting ending CALLBACK QUEUE Concurrency model and Event Loop

STACK WebAPIs

timer...

starting ending CALLBACK QUEUE callback Concurrency model and Event Loop

STACK WebAPIs

starting ending CALLBACK QUEUE callback Concurrency model and Event Loop

STACK WebAPIs

starting console.log ending set timeout CALLBACK QUEUE Concurrency model and Event Loop

STACK WebAPIs

starting ending set timeout CALLBACK QUEUE

Callback nesting Callback nesting, nesting, nesting, HELL