This course has been updated! We now recommend you take the JavaScript: The Hard Parts, v2 course.
Table of Contents
JavaScript: The Hard Parts
Principles of JavaScript
Global Execution Context
Showing sample code, Will initiates a discussion about what happens when JavaScript executes or runs code.
Local Execution Context
Not the same as defining a function, Will examines the process of invoking a function, which includes creating a local execution context.
Call Stack
Will introduces the concept of the call stack, which keeps track of its place in a script that calls multiple functions.
Q&A: Global Memory and Call Stack
To clarify concepts discussed about JavaScript principles, Will answers questions from students.
Principles Review
Before moving on to the next unit, Will reviews Principles of JavaScript and takes questions from students.
Functional Programming
Pure Functions
Will discusses a characteristic of functional programming called pure functions.
High Order Functions
With a brief exercise, Will reviews high order functions by examining the programming concept of Don't Repeat Yourself (DRY), which is a principle of software development aimed at reducing code repetition by making the code more re-usable.
Callbacks and Higher Order Functions
Setting Up Pair Programming
Asking students to self-evaluate their programming skills, Will introduces pair programming in the course.
Introducing Pair Programming
Will introduces the concept of pair programming, which is an agile software development technique in which two programmers work together at one workstation
Callbacks and Higher-Order Functions Exercises
In this exercise, students work in pair programming to better understand Callbacks and Higher-Order Functions.
Paramaterizing Functions
Will walks through generalizing functions by parameterizing functions to apply the data when calling the function.
Q&A: Const and Let
Will takes questions from students about Const and Let declarations.
Generalizing Functions
While deconstructing a function, Will introduces the concept of passing a specific instruction to a function while also reinforcing JavaScript principles.
Reviewing Generalizing Function
Will shows how to a function can carry multiple arguments.
Deconstructing Generalize Function
Reinforcing the material, Will walks through a generalized function with assistance from students.
Q&A: Passing Functions
After taking questions from students, Will has the students work through example code in pair programming.
First-Class Objects
Will explains the concept of functions in JavaScript as being first-class objects that can co-exist and be treated like a JavaScript object.
Callback vs Higher-order Functions
After explaining the differences between callback function and a higher-order function, Will reviews their benefits: simplify the code, keep code DRY, and allow the running of asynchronous code.
Closure
Introducing Closure
Will reviews closures. Closures give access to an outer function’s scope from an inner function.
Deconstructing Example
Will walks through a closure code example with the students.
Q&A and Pair Programming
After taking questions from students, Will prompts the students to work in pair programming to work on closure examples.
Closure Exercise, Part 1
Will walks through an example of calling a function in the same scope as it was defined.
Closure Exercise, Part 2
Continuing to build upon the closure example, Will walks through a code example showing how to run a function outside of where it was defined by returning the function and assigning it a new variable.
Closure Exercise, Part 3
Will demonstrates that calling a function outside of where it was created also brings surrounding data of where it was defined as well.
Q&A: Lexical Scope
Will takes questions from students about closure including defining lexical scope, which is the available data when the function was defined.
Q&A: Garbage Collection
Will takes more questions from students how to do garbage collection for lexical scoped variables.
Closure Exercise, Part 4
Expanding on the closure example, Will demonstrates results of a function in a new execution context that takes place alongside the previous closure function.
Q&A: Shared References
Will takes questions from students. Then Will prompts the students to continue with pair programming exercises.
Power of Closure
After reviewing the lessons so far in the course, Will illustrates that closure can be used to store data and used to implement module patterns in JavaScript.
Asynchronous JavaScript
Introducing Asynchronous JavaScript
Since JavaScript is single threaded and synchronous execution model, Will starts to examine how JavaScript can solve the problem of waiting or delaying before executing portions of code. Will introduces new concepts to aid in building asynchronous JavaScript: Web Browser APIs/Node background threads, Callback/Message/Task queue, and Event loop.
Browser API
Will introduces the how browser features, such as a timer, interfaces with JavaScript by walking through a code example.
Browser API Q&A
Will takes questions from students about Web Browser API. Then Will prompts the students to continue with pair programming exercises.
Resetting Pair Programming
With new criteria, Will works with students to set them up into pairs to work on exercises. - bit.ly/asyncjshp
Browser API Q&A, Part 2
Will takes a question from a student about running console.log() within setTimeout.
Callback Queue
Expanding on async example, Will introduces the concept of the callback queue as a way of predictably how out external interactions work with the JavaScript execution model.
Callback Queue & Event Loop
Will reviews the Callback Queue and Event Loop that concern the execution of asynchronously delayed code.
Asynchronous Q&A and Pair Programming
Will takes questions from students before setting them off on pair programming challenges.
Introducing More Browser APIs
After reviewing additional browser APIs that do not stop JavaScript from executing such as Ajax, user interactions, reading and writing to a file system or database, Will takes questions from students.
XMLHttpRequest
Will walks through an asynchronous code example featuring Web browser API XMLHttpRequest.
XMLHttpRequest Q&A
In taking questions from students, Will leads into a demonstration "callback hell" and how promises alleviate that problem.
XMLHttpRequest Correction
Will corrects his mentioning of XMLHttpRequest.
Object-Oriented JavaScript
Introducing Object-Oriented JavaScript
After reviewing material so far covered in the course, Will introduces Object-Oriented Programming (OOP) in JavaScript.
OOP Exercise, Part 1
Will works through the OPP code example to show encapsulation, which is the binding together data and functions that manipulate that data.
OOP Exercise, Part 2
To declare an object Will uses dot notation, which is a syntax for accessing properties. Then Will reviews Object.create, which is a method for creating a new object.
OOP Exercise, Part 3
To modularize OOP code example using DRY methods, Will walks through a function to generate objects.
OOP Exercise Q&A and Pair Programming
After working through generating OOP code example, Will works with students to determine potential problems. Then Will initiates another round of pair programming challenges. - csbin.io/oop
__proto__
Will introduces the concept of __proto__, which allows for the creation of objects with shared functionality.
OOP Exercise, Part 4
Will demonstrates the prototype chain bond between objects.
__proto__ Q&A and Pair Programming, Part 2
After taking questions from students about prototypical nature in objects, Will starts another round of pair programming challenges.
new operator
Will introduces the new operator, which creates an instance of a user-defined object type.
new operator Q&A
Will takes questions from students to clarify and explore more about new operator.
Object.prototype
To automate and standardize OOP, Will introduces coding with the Object.prototype.
OOP Exercise, Part 5
Will walks through streamlining OOP code example by implementing Object.prototype property, shared methods separately from the object constructor.
Object.prototype Q&A
Will takes a question from a student about the difference between __proto and prototype.
Class Syntactic Sugar
Will shows writing OOP with JavaScript classes that were introduced in ECMAScript 2015. These new classes provide "Syntactic Sugar," providing a much more straightforward and more explicit syntax to create objects and deal with inheritance.
OOP Exercise, Part 6
With help from the students, Will demonstrates OOP approach using syntactic sugar approach and discusses the benefits.
Class Syntactic Sugar Q&A
After taking questions from students, Will starts another round of pair programming.
