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 6 th 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 DECLARATION Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations
How JavaScript does stuff DECLARATION Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations REGISTERED INTERNALLY myvar = undefined
How JavaScript does stuff ASSIGNMENT Creation 1. Function parameters 2. Scan for function declarations 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 Declaration Assignment Equality Data Types Primitive Data Types Boolean Number String Null 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 OtherPgm Program1 QBATCH SYNC STARTED OTHER PGM 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 QINTER JOB QUEUE OtherPgm
Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED ASYNC ENDING OTHER PGM QINTER JOB QUEUE OtherPgm
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 Program2 QINTER JOB QUEUE
Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM Program1 Program2 QINTER JOB QUEUE
Synchronous and asynchronous functions Callback QINTER Program1 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 QINTER JOB QUEUE
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 QINTER JOB QUEUE PROGRAM2
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 starting console.log main() CALLBACK QUEUE
Concurrency model and Event Loop STACK WebAPIs starting main() CALLBACK QUEUE
Concurrency model and Event Loop STACK WebAPIs starting settimeout main() CALLBACK QUEUE
Concurrency model and Event Loop STACK WebAPIs timer... starting settimeout main() CALLBACK QUEUE
Concurrency model and Event Loop STACK WebAPIs timer... starting main() CALLBACK QUEUE
Concurrency model and Event Loop STACK WebAPIs timer... starting ending console.log main() CALLBACK QUEUE
Concurrency model and Event Loop STACK WebAPIs timer... starting ending main() 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 CALLBACK QUEUE
Concurrency model and Event Loop STACK WebAPIs starting ending callback CALLBACK QUEUE
Concurrency model and Event Loop STACK WebAPIs starting ending set timeout console.log CALLBACK QUEUE
Concurrency model and Event Loop STACK WebAPIs starting ending set timeout CALLBACK QUEUE
Callback nesting
Callback nesting, nesting, nesting, HELL