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