The Modern JavaScript Tutorial

This course documents my work for the open source course 'The Modern JavaScript Tutorial' created by Ilya Kantor.

• The demo badge is a html page that I created to test out my scripts, feel free to try it out.
• The scripts folder contains the JavaScript code that I wrote throughout the course.
• The tasks folder contains my written assignments. For example, 'Guess the output' questions.
• If later tasks shows my competency in earlier tasks, I generally left out earlier tasks from this repo to keep things simple. There's no point showing what I can do twice.
• Minimum estimated effort required: 174 hours
  • A unit is what I call part of a chapter (1.1... 1.3).
  • There are 174 units (based on getting a count of the element list-sub__title).
  • The assumption is it takes me at least one hour per unit.

Contents

• Part 1: The JavaScript language
• Part 2: Browser: Document, Events, Interfaces
• Part 3: Additional articles
• My Lessons Learned
• Learning Log

Part 1: The JavaScript language

Here we learn JavaScript, starting from scratch and go on to advanced concepts like OOP. We concentrate on the language itself here, with the minimum of environment-specific notes.

An introduction

• An Introduction to JavaScript
• Manuals and specifications
• Code editors
• Developer console

JavaScript Fundamentals

• Hello, world!
• Code structure
• The modern mode, "use strict"
• Variables
• Data types
• Interaction: alert, prompt, confirm
• Type Conversions
• Basic operators, maths
• Comparisons
• Conditional branching: if, '?'
• Logical operators
• Nullish coalescing operator '??'
• Loops: while and for
• The "switch" statement
• Functions
• Function expressions
• Arrow functions, the basics
• JavaScript specials

Code quality

• Debugging in the browser
• Coding Style
• Comments
• Ninja code <-- funniest "lesson" so far.
• Automated testing with Mocha
• Polyfills and transpilers

Objects: the basics

• Objects
• Object references and copying
• Garbage collection
• Object methods, "this"
• Constructor, operator "new"
• Optional chaining '?.'
• Symbol type
• Object to primitive conversion - (SKIPPED) Too much detail I don't need to know right now. I can come back to this if I run into problems with using objects.

Data types

• Methods of primitives
• Numbers
• Strings
• Arrays
• Array methods
• Iterables
• Map and Set
• WeakMap and WeakSet
• Object.keys, values, entries
• Destructuring assignment
• Date and time
• JSON methods, toJSON

Advanced working with functions

• Recursion and stack
• Rest parameters and spread syntax
• Variable scope, closure
• The old "var"
• Global object
• Function object, NFE
• The "new Function" syntax
• Scheduling: setTimeout and setInterval
• Decorators and forwarding, call/apply
• Function binding
• Arrow functions revisited

Object properties configuration

• Property flags and descriptors
• Property getters and setters

Prototypes, inheritance

• Prototypal inheritance
• F.prototype
• Native prototypes
• Prototype methods, objects without __proto__

Classes

• Class basic syntax
• Class inheritance
• Static properties and methods
• Private and protected properties and methods
• Extending built-in classes
• Class checking: "instanceof"
• Mixins

Error handling

• Error handling, "try...catch"
• Custom errors, extending Error

Promises, async/await

• Introduction: callbacks
• Promise
• Promises chaining
• Error handling with promises
• Promise API
• Promisification
• Microtasks
• Async/await

Generators, advanced iteration

• Generators
• Async iteration and generators

Modules

• Modules, introduction
• Export and Import
• Dynamic imports

Miscellaneous

• Proxy and Reflect
• Eval: run a code string
• Currying
• Reference Type
• BigInt
• Unicode, String internals

Part 2: Browser: Document, Events, Interfaces

Learning how to manage the browser page: add elements, manipulate their size and position, dynamically create interfaces and interact with the visitor.

TBC.

Part 3: Additional articles

List of extra topics that assume you've covered the first two parts of tutorial. There is no clear hierarchy here, you can read articles in the order you want.

TBC. I consider this part optional as I'm building foundational JS knowledge.

My Lessons Learned

1. Learned to omit generated TOC headings from Markdown: https://markdown-all-in-one.github.io/docs/guide/table-of-contents.html#hiding-headings-from-toc
2. Multi-cursor (CMD + Option + Up/Down): https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor
3. A parameter is the term used 'declare time'. An argument is the term used 'call time' (the value passed).
4. Beginner style guide cheatsheet: https://javascript.info/coding-style
5. Learn the ways of the ninja so you don't have to be one.
6. Quote from comments lesson: "An important sign of a good developer is comments: their presence and even their absence."

Learning Log

• (24/01/2023) I have completed 22 units over 4 days since I started. This is me fully focusing 7 hours a day on it, so that is about 7 (hours) x 4 (days) = 28 hours. I can roughly estimate 1 hour per unit as my average pace. There are 64 units left for me to do on Part 1, that means it will take me about 64 hours (64 / 7 = ~9 days).