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 Ajax • 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 brackets • 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