JavaScript Tutorial

Clear, example-based, comprehensive.

Table of contents

Introduction to JavaScript

  1. Preface
    1. Context of this tutorial
    2. Prerequisites
  2. Introduction to JavaScript
    1. What is JavaScript?
      1. Executing a computer program
      2. JavaScript engines
      3. ECMAScript
      4. Strict mode
    2. Client-side JavaScript
      1. Adding JS to a web page
      2. JavaScript libraries and web frameworks
      3. Transpiling and polyfilling
      4. JavaScript build tools
      5. In-browser debugging
  3. JavaScript Syntax
    1. JavaScript grammar
    2. Expressions
    3. Statements
    4. Identifiers
    5. Keywords
    6. Comments
    7. Minification

Variables and operators

  1. Variables and Constants
    1. What are variables and constants?
    2. Declaring variables and constants
    3. Assigning a value to variables and constants
    4. Scope of a variable or constant.
    5. Hoisting declarations
    6. Temporal Dead Zone (TDZ)
  2. Operators
    1. Expressions and operators
    2. Assignment operators
    3. Comparison operators
    4. Arithmetic operators
    5. Logical operators
  3. Bitwise operators
    1. What are Bitwise operators?
    2. Each Bitwise operator explained
    3. Examples
  4. Operator precedence and associativity
    1. Multiple operations in a sequence
    2. Operator precedence
    3. Operator associativity

Values and data types

  1. Data types
    1. What are data types?
    2. Literals
    3. Primitive data types
    4. Undefined vs. null
    5. Object data type
    6. Value data types and reference data types
  2. Numeric and string literals
    1. Number literals
    2. BigInt literals
    3. String literals with quotation marks
    4. Template literals
  3. Unicode and escape sequences
    1. Unicode
    2. Whitespace and line terminators
    3. Escaping single characters
    4. When to use escape sequences?
    5. Surrogate pairs
    6. Assembled characters
  4. Primitive wrapper objects
    1. Are primitives objects?
    2. Autoboxing
    3. Instances of wrapper objects
    4. Wrapper object constructor as a regular function
  5. Type coercion
    1. Data type conversion
    2. Type coercion
    3. Arithmetic/numerical contexts
    4. Comparison operations
    5. Object coercion
  6. Falsy, truthy & nullish
    1. Falsy & truthy
    2. Nullish
  7. Explicit type conversion
    1. Explicit type conversion
    2. Converting to strings
    3. Converting to numbers
    4. Validating numbers
    5. Summarised
  8. Math object and Date object
    1. Math object
    2. Date object

Control flow and loops

  1. Conditional statements
    1. if...else statement
    2. switch statement
    3. The conditional (ternary) operator
  2. Error handling
    1. Error objects
    2. throw
    3. try...catch
      1. Rethrowing
    4. Asynchronous errors
  3. Loops and iteration
    1. for statement
    2. for...in statement
    3. for...of statement
    4. while statement
    5. do...while statement
    6. continue, break and label

Functions

  1. Defining functions
    1. What are functions?
    2. Defining functions
      1. Function declarations
      2. Function expressions
      3. Immediately Invoked Function Expression
      4. Arrow function expressions
  2. Parameters and arguments
    1. Distinction between parameters and arguments
    2. Pass by value
    3. Default parameters
    4. Rest parameters
    5. Spread syntax
    6. Callback functions
  3. Function scope
    1. Lexical scope
    2. First-class functions
    3. Closures
      1. Closure scope chain
      2. Closures and loops
      3. Private data with closures
      4. Performance
  4. The function's this keyword
    1. Introduction to this
    2. Function context
    3. Global context & global object
    4. this as an event handler
    5. call() and apply()
    6. bind()
    7. this in arrow functions

Asynchronous JavaScript

  1. Introduction
    1. Synchronous vs. asynchronous programming
    2. Asynchronous callback
  2. Promises
    1. Promise
    2. then() & event handlers
    3. fetch()
    4. Chained promises
    5. catch() & finally()
    6. Example - Downloading an image
    7. Return inside an asynchronous function
    8. Combining promises
  3. async/await
    1. async & await
  4. Event loop
    1. Tasks
    2. Microtasks

Recursion and animation

  1. Recursion
    1. What is recursion?
    2. Recursion versus iteration
    3. Call stack
    4. Tail recursion
    5. Examples
  2. Animation
    1. Animation in JavaScript
    2. Scheduling calls
    3. requestAnimationFrame
      1. Animation speed
      2. Start and stop
    4. Examples
      1. SVG animation
      2. HTML canvas animation, with timing
      3. WebGL animation

Objects

  1. Introduction
  2. Properties
    1. What are properties?
    2. Property identifiers
    3. Creating properties
    4. Accessing properties
    5. Optional chaining (?.)
    6. Property attributes and Object.defineProperty()
    7. Enumerability of properties
    8. Accessor functions
    9. Deleting properties
  3. Creating objects
    1. Creating a new object
    2. Object literals
      1. Property shorthand
      2. Method shorthand
      3. Computed property names
    3. Constructor functions
      1. The Object() constructor
    4. The Object.create method
  4. Prototypes and inheritance
    1. The object's prototype
    2. The prototype chain
      1. this and the prototype chain
      2. Shadowing properties
    3. Setting the prototype
      1. Four options
      2. Using Object.create()
      3. Using constructors
      4. The constructor property
  5. Cloning and merging objects
    1. Copying variables
    2. Object.assign() and for...in
    3. Spread syntax
    4. Object destructuring and rest properties
    5. Deep cloning
  6. Symbol data type
    1. What are symbols?
      1. Symbol type conversions
    2. Symbol property keys
      1. Enumerability of symbol properties
    3. Global symbols
      1. Global symbol registry
    4. Well-known symbols
  7. Object to primitive conversion
    1. Conversion procedure
    2. Symbol.toPrimitive
  8. Object destructuring
    1. Destructuring assignment
    2. Binding and assignment pattern
    3. Destructuring and the prototype chain
    4. Default value
    5. Rest property
    6. Object vs array destructuring
    7. Assigning to new variable names
    8. Nested object and array destructuring
    9. Assigning to an element or property
    10. Destructured function parameter
    11. for...of iteration and destructuring

Iterators and generators

  1. Iterators and generators
    1. Introduction
    2. Iterators and Iterables
    3. Built-in iterables
      1. Array-likes
    4. Generators
      1. Generators and Symbol.iterator
      2. Passing arguments into generators
      3. yield*
    5. Async iterators and generators

Indexed collections

  1. Arrays
    1. Predefined objects
    2. Creating an array
    3. Accessing elements
    4. Finding and checking elements in an array
    5. Sparse arrays
    6. Adding elements
    7. Deleting elements
    8. Multi-dimensional arrays
    9. Iterating over arrays
    10. Copying and merging arrays
      1. Spread syntax
      2. Array destructuring and rest elements
      3. Deep cloning
  2. Array destructuring
    1. Destructuring assignment
    2. Examples

Keyed collections

  1. Maps
    1. Collection of unique key-value pairs
    2. Constructor
    3. Accessing and iterating over key-value pairs
    4. Deleting key-value pairs
    5. Cloning and merging maps
    6. Converting to and from maps
    7. Destructuring a map
    8. Objects vs. maps
  2. Sets
    1. Collection of unique values
    2. Constructor
    3. Accessing and iterating over values
    4. Deleting set elements
    5. Cloning and merging sets
    6. Converting to and from sets
    7. Mathematical set operations
    8. Arrays vs. sets
  3. Memory management
    1. Allocate and deallocate memory
    2. Garbage collection
    3. Mark-and-sweep garbage collector
    4. Objects aiding memory management
  4. WeakMaps and WeakSets
    1. Garbage collection
    2. Weak referenced keys
    3. WeakMap and WeakSet are not iterable
    4. Examples

Classes

  1. Introduction to classes
    1. Object-oriented programming
    2. Classes vs. constructor functions
    3. Class body
    4. Constructor method
    5. Public instance methods
    6. Public instance fields
    7. Accessors
  2. Encapsulation
    1. What is encapsulation?
    2. Private fields and methods
    3. An example
    4. Abstraction vs. encapsulation
  3. Static class members
    1. Instance vs. static
    2. this and static members
    3. Simulating private constructors
    4. Static initialization blocks
  4. Extends and inheritance
    1. Subclasses
    2. The extends keyword
    3. The prototype chain
      1. Is instance of?
    4. The super keyword
      1. Invoking a superclass's constructor
      2. this vs. super
    5. Shadowing and overriding properties
    6. Extending built-in classes
    7. Multilevel and Multiple inheritance
  5. Avoiding inheritance
    1. Consider avoiding inheritance
    2. Liskov Substitution Principle
    3. Composition
    4. Mixins

Metaprogramming

  1. Metaprogramming
    1. What is metaprogramming?
    2. Metaprogramming in JavaScript
    3. Reflect
    4. Proxy
    5. Revocable proxies

Modules

  1. −