A Better Way To Learn JavaScript

Chapter 0: Why this book?

1. The history of this book (and the book series)
2. You can’t make everyone happy
3. This one goes out to the happy ones
4. How is this book organized?
5. The methodology: Bloom’s taxonomy
6. 1. “Map of the JavaScript land”
7. 2. Types of tutorials
8. 3. Focusing on “knowledge transfer”, not “feature-listing”
9. 4. Most of these books are either too theoretical or too practical
10. What We’re Building
11. Accompanying website
12. List of major updates

Chapter 1: Starting slowly

1. 1. Why programming?
2. 2. Why JavaScript?
3. 3. The JS ecosystem
4. 4. How to get started
5. 5. Playing by JS’ rules meaningfully
6. 6. Can your calculator do that?
7. 7. Recap
8. Conclusion

Chapter 2: Evaluation, data types, operators, variables, and conditionals

1. Evaluation in JavaScript
2. Operators in JavaScript
3. Introduction to variables
4. Variables, assignment, and typeof
5. Revisiting data types: strings vs numbers
6. Making JavaScript respond in plain English
7. Build your first simple game in JavaScript
8. A gentle introduction to the object data type in JavaScript
9. Understanding key-value pairs
10. Re-writing your first simple game using objects (and comments!)
11. If statements and blocks of code
12. Conditionally executing multiple lines of code
13. The basics of data type conversion

Chapter 3: Functions, primitives, and objects in JavaScript

1. A Function is A Machine
2. Generalizing Functions in JavaScript
3. Anonymous functions
4. Revisiting the age-checker app
5. Conclusions
6. What’s next?
7. A quick note about var, let and const

Chapter 4: The Quick Prototype App

1. Concepts to understand before building the app
2. Building the Quick Prototyper App
3. Using Github to Share code
4. Updating Our Web Page Dynamically
5. Reinforcing Your Learning Using Devtools Snippets
6. Start Building the Quick Prototyper snippet
7. Checking for Equality and Running Code Conditionally
8. Adding a Second Component to Quick Prototyper
9. Passing Custom Arguments to Function Calls Based on User Input
10. Using else if
11. Working with the button classes in Quick Prototyper
12. Prompting For Multiple Components At a Time
13. Conclusion

Chapter 5: Understanding Events in JavaScript

1. What are Events in JavaScript
2. Inline Event Handlers Using HTML Attributes
3. How JavaScript Deals with Events
4. Stopping Event Propagation
5. Add an Event Handler to the Page Dynamically
6. The Event Object
7. Review: How does browser handle events?
8. Some more practice

Chapter 6: Improving the UX on Quick Prototyper

1. Adding badges to the list of components
2. Adding Buttons To our App
3. Adding the Navbar to our QuickPrototyper
4. List of Updates Made to QuickPrototyperV10

Chapter 7: Introducing jQuery

1. Understanding the basics of jQuery
2. Adding the textToEdit and popUpEditor divs
3. Styling the popUpEditor

Chapter 8: The Anatomy of functions in ES6

1. Comparing ES5 and ES6 functions in JavaScript
2. Function definitions with a single parameter
3. Function definitions with no parameters
4. Converting ES5 to ES6 functions (and vice-versa)

Chapter 9: Learning JavaScript basics by coding tiny apps

1. What’s fiction writing have to do with coding?
2. Version one of our Learning JavaScript Project
3. Version two of our Learning JavaScript Project
4. Why is this important?
5. Learning JS basics by coding tiny apps: Let’s build a choices game
6. Escaping the console and the prompt function
7. Building the “JS Money” game
8. Using a ternary expression in our game
9. Add CSS classes using JavaScript
10. Conclusion

Chapter 10: Data Types and Constructors

1. Objects VS non-objects
2. Finding the type of primitives using the typeof operator
3. The number type
4. The null type
5. The undefined type
6. The boolean type
7. The bigint type
8. The symbol type
9. Understanding primitive data types in JavaScript
10. Primitive types cannot be mutated
11. The object type
12. Wrapper objects on primitives in JavaScript
13. Type constructors in JavaScript: The good, the bad, and the ugly
14. What does the “new” operator do?
15. Some built-in objects don’t need a constructor - because they’re static objects
16. Building objects with user-defined constructor functions
17. Rule of thumb: use literals rather than object function constructors
18. Typecasting with type constructors
19. Forgetting the new keyword pollutes global scope!
20. Comparing primitive values in JavaScript
21. Comparing objects in JavaScript
22. Primitives are passed by value
23. Objects are passed by reference
24. Truthy and falsy values and coercion in JavaScript
25. Conclusion

Chapter 11: JavaScript and the Browser

1. “The states of matter” of a web page
2. A sneak preview: document.write
3. What is the DOM?
4. Is the DOM a part of JavaScript?
5. Where does JavaScript live?
6. Browser and Web APIs
7. JavaScript Engines and Browser Engines
8. How a JavaScript Engine Works
9. The Memory Heap
10. The Call Stack
11. Stack Overflow
12. Recursion in JavaScript
13. The memory heap and JavaScript variables
14. Variable hoisting VS function hoisting
15. Using the debugger to understand hoisting
16. The global object
17. The call stack, the global object, and the keyword “this”
18. Functions, call stack, and execution contexts
19. Why do we need the scope chain?
20. Sibling functions don’t share a scope chain
21. Back to the this keyword
22. Conclusion

Chapter 12: JavaScript is Synchronous, Browser is Asynchronous

1. JavaScript is Single-Threaded and Synchronous
2. Synchronous JavaScript in an Asynchronous Browser
3. Conclusion

Chapter 13: Basic JavaScript Caveats

1. Higher-order functions
2. Revisiting scope: global, function, and block scope
3. Closures (the products of higher-order functions)
4. Lexical Scope
5. Variables: var VS let and const
6. Operator precedence and associativity
7. Default parameters in functions
8. Using call() and apply()
9. Implicit and explicit context of this
10. Using bind()
11. Working with local storage
12. Method chaining
13. JavaScript loading in an HTML page
14. Nullish coalescing operator
15. Optional chaining operator

Chapter 14: The Anatomy of a JavaScript Function: all the different ways of defining functions in JS

1. 1. Function declarations
2. 1a. Conditionals and function declarations
3. 2. Function expressions
4. 2a. Function expressions as IIFEs
5. 2b. Function expressions as object methods
6. 2c. Function expressions as shorthand methods in ES6 object literals
7. 2d. Function expressions as shorthand methods with the computed properties syntax
8. 2e. Function expressions as callbacks
9. 2f. Function expressions as arrow functions
10. 2f. How does the JavaScript engine load functions into the execution context?
11. 3. Function constructors
12. 4. Generator functions
13. 5. Async / await functions
14. Conclusion

Chapter 15: Understanding arguments and the spread operator

1. How many arguments does a function expect?
2. The arguments variable
3. Can we use the arguments variable with arrow functions?
4. How does the spread operator work in arrow functions?
5. Understanding the arguments local variable in depth

Chapter 16: JavaScript Arrays in Depth

1. Using the delete method on an array member
2. Does a value exist in an array?
3. Use Array.length to find the last member of array
4. Use Array.length to quickly trim an array
5. Manipulating arrays with pop
6. Manipulating arrays with push
7. Manipulating arrays with shift
8. Manipulating arrays with unshift
9. Manipulating arrays with Array.slice and Array.splice
10. Destructuring Arrays
11. Concat two arrays together
12. Convert an array to a string
13. Flipping the order of items in an array
14. Sorting arrays with Array.sort
15. Exercise: Sort a todo list
16. Additional Exercise: Reverse the order of array
17. Looping over arrays
18. 2. Using the “optimized” for loop
19. 3. Looping over a JS array with for-of
20. 4. Don’t loop over a JS array with for-in
21. 5. Looping over a JS array with the while loop
22. 6. Looping over a JS array with the do while loop
23. Functional approach to looping over arrays in JS
24. 7. Looping over arrays in JS with forEach
25. 8. Looping over arrays in JS with Array.prototype.filter
26. Using Array.prototype.filter followed by Array.prototype.forEach
27. 10. Using Array.prototype.map
28. 11. Using Array.prototype.reduce
29. 12. Using Array.prototype.some
30. 13. Array.prototype.every
31. 14. Using Array.prototype.find
32. 15. Using Array.prototype.sort
33. Looping over arrays: Conclusion

Chapter 17: Sets and Maps in JavaScript

1. A Set is a Collection of Unique Members
2. Convert a set to an array
3. Convert an array to a set
4. Remove duplicates from an array using a set
5. Just for fun (re-duplicate an array)
6. Does a value exist in a set?
7. Sets don’t consider objects the same even if they hold the same values
8. Check the length of a set
9. Using two sets to find the items that exist in both
10. Deleting set members
11. Comparing sets and weak sets
12. Practical Uses of Weak Sets in JavaScript
13. Looping over sets and weak sets
14. Working with maps in JavaScript
15. A map is like a “countable” object (i.e. a dictionary)
16. Using the map data structure in JS
17. Populating a map data structure in JS
18. Retrieving all the key-value pairs from a map
19. Passing more than one key-value pairs to a new map
20. What is the size of a specific map?
21. Adding key-value pairs to existing maps
22. Does a key exist in a map?
23. Returning a value from a map key in JS
24. Deleting key-value pairs from maps in JS
25. Clearing a map of all key-value pairs
26. Convert a map to an array
27. Convert a map to an object
28. Comparing maps and objects
29. Weak maps in JS
30. Weak maps and weak sets help with memory use
31. Looping over maps
32. Looping over a map with a forEach

Chapter 18: JavaScript Objects in Depth

1. What are objects in JS?
2. Object literals and object accessors
3. Nesting objects in other objects in JavaScript
4. Working with object properties
5. Running CRUD operations on object properties in JavaScript using brackets notation
6. The difference between the dot notation and the brackets notation for object access
7. Using ternary expressions to determine the value of a property
8. Evaluating expressions inside objects using the brackets notation
9. Listing out object properties
10. JavaScript objects are “pass-by-reference”
11. Passing objects to functions
12. Accessing object properties from object methods
13. Using Object.create method
14. Built-in objects in JavaScript
15. The String object
16. The RegExp object
17. Using RegExp in JavaScript
18. Date object
19. JSON (JavaScript Object Notation)
20. Math object
21. Working with property descriptors
22. Working with the writable property descriptor
23. Working with the enumerable property descriptor
24. Working with the configurable property descriptor
25. Working with getters and setters
26. Destructuring objects in JavaScript

Chapter 19: Working with Objects, Arrays, and JSON

1. Working With JSON Received From The Web

Chapter 20: Functional programming in JavaScript

1. What is it?
2. FP vs OOP
3. Declarative and Imperative Paradigms
4. Side Effects and Pure Functions

Chapter 21: Object-Oriented Programming in JavaScript

1. What is OOP?
2. Polymorphism
3. Encapsulation
4. Inheritance
5. Classes
6. Objects Store Both Functions And Data
7. Building multiple objects
8. Linking Objects with Object.create
9. My name is Proto, Dunder Proto
10. In JavaScript, functions are objects
11. The Proper Way to Use prototype Is With A Constructor Function
12. Getting an Object’s Prototype
13. Why JavaScript is not class-based “under the hood”
14. Constructor functions and object-oriented JavaScript
15. Arrow functions fix the this reference in inner functions
16. Extending Array.prototype with defineProperty
17. Using classes in JavaScript
18. Why use classes over prototypes?
19. Object is a global constructor function
20. Three ways to check for prototype
21. Practice makes perfect: the prototype chain
22. The instanceof operator and object-oriented JavaScript
23. Function, Object and instanceof
24. The Constructor Property
25. Chaining constructors for an object with call
26. Practice makes perfect: let’s build a prototype chain!
27. Using Object.create to add prototypes for objects
28. Static Methods
29. Public and Private Methods
30. Inheritance using extends and super
31. Monkey-patching
32. By-passing inheritance using mixins
33. Shallow copy and deep copy
34. Addendum: A non-trivial OOP example using classes in JavaScript
35. Another example

Chapter 22: Errors, debugging, and strict mode

1. Throwing errors in JavaScript
2. The try...catch...finally statement
3. Throwing the error
4. Catching the error
5. As soon as an error is thrown, the try block is DONE
6. The finally statement
7. Catching all types of errors
8. Custom error messages
9. Stack Trace
10. Using console.trace()
11. Traces and function names
12. Debugging with console.trace()
13. Stack tracing Error constructors
14. Strict mode
15. 1. All variables must be declared
16. 2. Non-writable global variables cannot be used as a variable names
17. 3. Duplicate parameters are not allowed
18. 4. Functions must be declared in the global scope or directly inside a function
19. 5. The with statement is forbidden
20. 6. Decimals with leading zeros are not allowed
21. 7. Not allowed to set or delete immutable properties
22. BROWSER SNIFFING
23. FEATURE SNIFFING
24. DEBUGGING JAVASCRIPT
25. Debugging with console and alert
26. The quickest way to run the built-in devtools debugger
27. Pausing on exceptions
28. What is a breakpoint?
29. Local scope, global scope, and closures in the debugger
30. Using the debugger keyword to programmatically set a breakpoint
31. Editing breakpoints (watching expressions)
32. Working with different types of breakpoints
33. Step over, step into, step out, and step
34. Debugging with the Step into next function call button
35. The Deactivate / Activate breakpoints button
36. Inspecting the call stack
37. Debugging with Chrome devtools Performance panel
38. Blackboxing scripts
39. JavaScript sourcemaps
40. AVOIDING THE NEED TO DEBUG
41. LINTERS AND CODE EDITORS
42. Installing ESLint with npm

Chapter 23: Modular JavaScript

1. What problems does modular JavaScript code solve
2. How to install Node and npm on our machine?
3. Adding a new project with npm
4. Adding actual code to our npm project
5. Collaborating in a team using npm
6. Using npm scripts and task runners
7. Modular JavaScript
8. We can’t use require in the browser
9. What is a module bundler?
10. Working with ES6 modules (ESM syntax)
11. Working with ES6 modules in the browser
12. Running an Express server
13. How does webpack work?
14. Adding webpack to our JavaScript programs
15. Understanding the structure of the node_modules folder
16. Working with npm scripts
17. Running files with Node.js using npm scripts
18. Running webpack on our project’s files
19. Running webpack on vanilla JavaScript modules
20. Compiling JavaScript modules to a custom output with webpack
21. Specifying custom entry file in the webpack configuration
22. Building HTML files with webpack
23. The module object
24. Exporting various values with module.exports
25. How to set up webpack with html files
26. Conclusion

Chapter 24: JavaScript Object Notation (JSON)

1. What is JSON
2. Why is JSON so popular?
3. What does valid JSON look like
4. Using JSON tools for increased productivity
5. Looping over JSON objects
6. Making AJAX requests to get JSON data from the web
7. An alternative solution to printing JSON data to screen
8. Transforming objects to arrays to deal with JSON data, explanation
9. Making AJAX requests to get JSON data from our own computer
10. Printing data to screen using nested for loops
11. Running JSON.parse on undefined vs running it on null
12. Conclusion

Chapter 25: Asynchronous JavaScript

1. What are blocking operations?
2. The XMLHttpRequest constructor
3. The anatomy of an XHR request
4. What are callbacks?
5. Let’s build callbacks from ground up
6. Functions are first-class citizens
7. Passing strings to functions
8. Passing function invocations to functions
9. Higher-order functions take or return other functions
10. Passing named function declarations to other functions
11. Passing anonymous functions to higher order functions
12. Understanding callbacks in general
13. Callbacks are everywhere
14. Running a callback function when a button is clicked
15. Using callbacks to run XHR requests
16. Asynchronous XHR inside a callback function
17. The biggest difference between regular functions and asynchronous (callback) functions
18. The problem with callbacks
19. Callbacks and the inversion of control
20. Callback hell aka The Pyramid of Doom
21. A more realistic example of callback hell
22. Intermission: where we’re at
23. Dealing with errors in callbacks
24. Dealing with errors in callbacks without using a third-party library like jQuery
25. Dealing with callback hell
26. Promises
27. Working with promises using the fetch() method
28. Understanding promises
29. What is the contents of [[]]?
30. Dealing with rejected promises using the catch() method
31. Error handling in promises with catch() and finally()
32. Dealing with rejected promises by passing the second argument to the then() method
33. How do the functions deferred by a promise get back onto the call stack?
34. A few important conclusions regarding promises
35. Working with Promise.all
36. Iterators and Generators
37. Iterators perform work on streams of data
38. The iteration protocol
39. Generators
40. An instance of GeneratorFunction is an iterable object!
41. Returning values dynamically with yield
42. Combining generators with promises
43. Async/Await
44. Observables
45. Revisiting the iterator patern
46. The observer pattern
47. Observables in vanilla JS
48. Revising observables
49. Subscribing to an observable data stream with RxJS

Chapter 26: Conclusion: The JavaScript Learning Fractal