##### ###### ##### ### # # ### # # ###### ## ## ## ## ## ## ## # # # # # ## ##### #### ##### # # # # # # # #### ## # ## ## ## ## # # # # # ## ## # ###### ## ### # ### # ######
##### ###### ##### ### # # ### # # ###### ## ## ## ## ## ## ## # # # # # ## ##### #### ##### # # # # # # # #### ## # ## ## ## ## # # # # # ## ## # ###### ## ### # ### # ######
##### ###### ##### ### # # ### # # ###### ## ## ## ## ## ## ## # # # # # ## ##### #### ##### # # # # # # # #### ## # ## ## ## ## # # # # # ## ## # ###### ## ### # ### # ######
Explore individual topics with detailed lessons and practice problems.
Set up your environment and write your first JavaScript
What you'll learn
Execution environments
Two environments compared
Your first playground
Printing output
Test your understanding
Adding JS to HTML
Separating code from HTML
When scripts execute
Test your understanding
Your code editor
Auto-refresh your page
JavaScript outside browsers
Test your understanding
Code structure basics
ASI edge cases
Exact spelling matters
Documenting your code
Longer explanations
Test your understanding
Catching silent errors
Error examples
Test your understanding
Readable formatting
Variable and function names
Test your understanding
Understanding what went wrong
Undefined variables
Invalid code structure
Wrong type operations
Test your understanding
Finding problems
Logging context
Beyond console.log
Test your understanding
Complete starter template
Starting script.js
Your first task
Expanding your skills
Documenting code
Test your understanding
Building something real
Extending the project
Working solution
What you practiced
Test your understanding
What to avoid
Good habits to build
Preparing for variables
Summary of key concepts
Store and manage data with JavaScript's type system
What you'll learn
Storing values
Declaring variables
Constant values
When to use each
Test your understanding
Legacy declarations
Scope problems
Test your understanding
Basic value types
All numbers are the same
Floating point only
Test your understanding
Invalid number results
The right way
Beyond maximum
Test your understanding
Text values
Backtick strings
Strings don't change
Test your understanding
True and false
What counts as true
What counts as false
Test your understanding
Two kinds of nothing
Common situations
Test your understanding
Checking types
Known issues
Test your understanding
Beyond number limits
Unique identifiers
Automatic conversions
Manual conversions
Test your understanding
Loose equality
Strict equality
Real-world bugs
Test your understanding
Variables start undefined
A common mistake
Exploring types
Testing conversions
Comparing == and ===
Test your understanding
Combining concepts
Checking input types
Mistakes to avoid
Preparing for operators
Summary of key concepts
Combine values with arithmetic, comparison, and logical operators
What you'll learn
Basic math
Modulo math
Powers
Test your understanding
Joining text
Comparing values
== vs ===
Test your understanding
Both must be true
Either can be true
Inverting boolean
Test your understanding
Stopping early
Common pattern
Test your understanding
The ?? operator
vs ||
Test your understanding
The ?. operator
Safe method calls
Test your understanding
Storing values
Adding/subtracting one
++x vs x++
Test your understanding
Order of operations
Explicit ordering
Test your understanding
Inline conditions
When to use it
Working with bits
Test your understanding
Complex expressions
Using arithmetic
Combining conditions
Using ?. and ??
Test your understanding
Real-world operators
Conditional calculations
What to avoid
Preparing for control flow
Summary of key concepts
Make decisions with conditions and branching
What you'll learn
Conditional execution
What counts as true
Test your understanding
Alternative path
Multiple conditions
Why order matters
Test your understanding
Conditions inside conditions
Avoiding deep nesting
Early exit pattern
Test your understanding
Multiple cases
Exiting switch
Intentional grouping
Test your understanding
Catch-all option
When to use each
Inline conditions
Keep it simple
Test your understanding
Complex logic
Grouping conditions
Test your understanding
Using if-else chains
Using switch
Combining conditions
Test your understanding
Complete example
What to avoid
Preparing for loops
Summary of key concepts
Repeat code with while, for, and iteration patterns
What you'll learn
Repeat while true
The danger zone
Test your understanding
Run at least once
When to use each
Counting iterations
Step by step
Test your understanding
Counting down
Iterating values
Iterating keys
Test your understanding
Exit early
Skip iteration
Test your understanding
Loops inside loops
Labeled statements
Test your understanding
Accumulating values
Finding items
Collecting matches
Test your understanding
Basic loop practice
Accumulator pattern
Classic problem
Search pattern
Test your understanding
Interactive loop
What to avoid
Preparing for functions
Summary of key concepts
Create reusable code blocks with parameters and return values
What you'll learn
Reusable code blocks
The function keyword
Executing the code
Test your understanding
Inputs to functions
More inputs
The terminology
Test your understanding
Fallback values
Several optional params
Outputs from functions
Early exit
Test your understanding
Implicit undefined
Functions as values
Key differences
Test your understanding
Shorter syntax
Even shorter forms
Test your understanding
Available everywhere
Inside the function
Inside braces
Test your understanding
Passing functions as arguments
Inline functions
Practical example
Test your understanding
Predictable functions
What to avoid
Creating functions
Different syntaxes
Passing functions
Test your understanding
Building operations
Reusable checks
What to avoid
Preparing for strings and numbers
Summary of key concepts
Work with text and numeric data using built-in methods
What you'll learn
Counting characters
Getting single characters
Alternative access
Test your understanding
Finding characters
Checking for substrings
Checking boundaries
Test your understanding
Extracting substrings
Another way to extract
Test your understanding
Changing case
Removing whitespace
Breaking into arrays
Combining arrays
Test your understanding
Substituting text
Replacing all matches
Duplicating strings
Test your understanding
Aligning text
Converting to numbers
Number() vs parseInt
Test your understanding
Formatting decimals
Mathematical operations
floor, ceil, round
Test your understanding
Finding extremes
Generating random numbers
Test your understanding
Checking for integers
Validating numbers
Working with text
Displaying values
Common patterns
Test your understanding
Text analysis
Locale formatting
What to avoid
Preparing for arrays
Summary of key concepts
Store and manipulate collections of values
What you'll learn
Array literals
Index notation
Changing values
Counting elements
Test your understanding
End of array operations
Start of array operations
Test your understanding
Insert and remove anywhere
Copy part of an array
Test your understanding
Combining arrays
Expanding arrays
Finding elements
Finding by condition
Finding position by condition
Test your understanding
Iterating elements
Transforming elements
Selecting elements
Test your understanding
Accumulating values
Beyond summing
Test your understanding
Testing conditions
Ordering elements
Complex sorting
Test your understanding
Reversing order
Checking for arrays
Extracting values
Test your understanding
Flattening nested arrays
Working with arrays
map, filter, reduce
Combining operations
Test your understanding
Array-based app
What to avoid
Preparing for objects
Summary of key concepts
Store data as key-value pairs
What you'll learn
Object literals
Accessing properties
Dynamic access
Test your understanding
Changing objects
Removing keys
Cleaner syntax
Dynamic keys
Test your understanding
Functions as properties
Referencing the object
Test your understanding
Getting property names
Getting property values
Getting key-value pairs
Test your understanding
in and hasOwnProperty
Iterating properties
Copying and merging
Modern merging
Test your understanding
Extracting properties
Fallback values
Deep extraction
Test your understanding
How objects are stored
Copying nested objects
Test your understanding
Safe property access
Creating and accessing
keys, values, entries
Combining data
Test your understanding
Complete example
What to avoid
Preparing for combined data
Summary of key concepts
Combine arrays and objects to model real data
Why arrays and objects work together
Store multiple similar items
Build collections from scratch
Chain notation for deep access
Store lists inside objects
Test nested data access
Loop through object collections
Search collections for matches
Extract matching objects
Test understanding of search methods
Transform each object
Reshape objects with map
Order objects by property
Alphabetical object sorting
Test object sorting knowledge
Aggregate data from objects
Organize objects by category
Objects containing objects
Access complex structures
Test nested navigation
Safe nested access with ?.
Safe access through deep nesting
Safe method calls
Test safe access knowledge
Default values with ??
Copy and merge objects
Combine multiple objects
Clone object arrays
Test spread knowledge
Extract from complex data
Extract object properties as parameters
Handle missing properties
Test destructuring knowledge
Update without mutation
Spread at each level
Map for immutable array updates
Test immutable patterns
Parse and stringify data
Copy nested structures
Real-world data structure
Handling real API data
Test combined knowledge
Review of arrays and objects combined
Handle errors gracefully with try/catch
Why errors happen and how to handle them
Syntax, runtime, and logic errors
Understanding error properties
Built-in error classes
Test error type knowledge
Wrap risky code in try blocks
Handle errors when they occur
Test try/catch understanding
Code that always runs
Cleanup without handling
Test finally understanding
Create your own errors with throw
Use specific error types
Catch, log, and rethrow
Test throw knowledge
Create domain-specific errors
Include extra context in errors
Handle errors differently by type
Test custom error knowledge
Best practices for error handling
Prevent errors before they happen
Avoid errors with ?.
Provide fallbacks with ??
Test defensive coding knowledge
Write helpful error messages
Record errors for debugging
Show appropriate messages to users
Test error message knowledge
Catch uncaught errors
Catch async errors globally
Isolate failures
Test error isolation knowledge
Verify error paths work
Read error stack traces
Avoid these anti-patterns
Review of error handling
Handle async operations with promises and async/await
Why asynchronous code matters
Understanding the difference
How JavaScript handles async
Test event loop understanding
Schedule code to run later
Defer to next event loop tick
Pass functions to handle results
Node.js callback convention
Test callback knowledge
The problem with nested callbacks
A better way to handle async
Make your own promises
Pending, fulfilled, rejected
Test promise understanding
Handle fulfilled promises
Chain async operations
Handle rejected promises
Test chaining knowledge
Run cleanup code always
Create already-settled promises
Run promises in parallel
Get the first settled promise
Wait for all regardless of outcome
Test Promise static methods
Write async code that looks sync
Pause for promise resolution
Compare the two styles
Test async/await knowledge
Use try/catch for async errors
Await multiple promises together
Avoid these mistakes
Use await at module level
Test async pattern knowledge
Make HTTP requests
Configure HTTP requests
Check response status
Test fetch knowledge
Process async data streams
Control async operation frequency
Review of asynchronous JavaScript
Organize code into reusable modules
Why organize code into modules
The script tag problem
The modern module system
Export multiple values by name
Import specific exports by name
Test named export knowledge
Use different names locally
Export with different names
Export one main value
Import without curly braces
Test export type knowledge
Use both export types together
Import everything as an object
Export from another module
Test re-export knowledge
Load modules at runtime
Import based on conditions
Variables are private by default
Test scope understanding
Using ES modules in HTML
.js vs .mjs
Node.js's original module system
Differences between module systems
Test module system knowledge
When modules import each other
Organize modules effectively
Create clean public APIs
Common module organization patterns
Test module organization knowledge
Control module resolution in browsers
Combine modules for production
Review of modules
Object-oriented programming with classes
Object-oriented programming concepts
What classes represent
Class declaration syntax
Initialize new instances
Test constructor knowledge
Functions that belong to instances
Reference the current instance
Declare properties directly
Test class field knowledge
Hide internal data with #
Internal helper methods
Test private field knowledge
Computed properties with get
Validate when setting properties
Methods on the class itself
Shared data on the class
Test static knowledge
Create subclasses
Call parent class methods
Extend parent behavior
Test inheritance knowledge
Check instance types
Replace inherited methods
Same interface, different behavior
Test polymorphism knowledge
Alternative to class hierarchies
Share behavior across classes
Define interfaces for subclasses
Test composition knowledge
Alternative to classes
Classes vs other patterns
Patterns you'll encounter
Review of classes and OOP
Manipulate web pages with the Document Object Model
What the DOM is and why it matters
Entry point to the DOM
Parent, child, and sibling relationships
Find elements with getElementById
Test ID selection knowledge
Find elements with getElementsByClassName
Find elements by tag name
Select with CSS selectors
Select all matching elements
Test selector knowledge
textContent and innerHTML
Modify text and HTML
Get and set element attributes
Test content modification knowledge
Manage CSS classes
Modify styles directly
Read actual applied styles
Test style manipulation knowledge
Build new DOM nodes
Add elements to the page
Control where elements appear
Test element creation knowledge
Delete elements from the page
Duplicate existing elements
Move between elements
Test traversal knowledge
Batch DOM updates
Reusable HTML templates
Store custom data on elements
Test data attribute knowledge
Write efficient DOM code
Know when the DOM is ready
Review of DOM manipulation
Respond to user interactions
How browsers communicate actions
Attach handlers with addEventListener
Events you'll use frequently
Test event fundamentals
Access event details
Know what was interacted with
Stop built-in actions
Test event object knowledge
Handle mouse clicks
Track mouse movement and state
Respond to key presses
Test keyboard event knowledge
Handle form interactions
Track element focus
Events propagate up the DOM
Prevent event bubbling
Test bubbling knowledge
Handle events on the way down
Handle events on parent elements
Find the right target in delegation
Test delegation knowledge
Clean up handlers
Auto-remove after first fire
Improve scroll performance
Test listener option knowledge
Create your own events
Trigger events programmatically
Limit handler frequency
Limit handler rate
Test debounce/throttle knowledge
Handle mobile interactions
Review of events
Use built-in browser capabilities
What browsers provide beyond JavaScript
Persist data in the browser
Serialize complex data
Data that expires with the tab
Test storage knowledge
Manage browser history
Respond to navigation
Work with the current URL
Test navigation knowledge
Parse and build URLs
Copy and paste programmatically
Get the user's location
Test API knowledge
Send desktop notifications
Browser and device information
Track network status
Test navigator knowledge
Detect element visibility
Configure intersection detection
Watch element size changes
Test observer knowledge
Smooth animations
Measure performance
Run code in background threads
Draw graphics with code
Test advanced API knowledge
Making HTTP requests
Build form data for upload
Enable drag and drop
Review of browser APIs
Add static typing to JavaScript
JavaScript with types
Benefits of static typing
Declare variable types
Let TypeScript figure it out
Test type annotation knowledge
Type function inputs
Type function outputs
Parameters that can be omitted
Test function typing knowledge
Define object shapes
Properties that may be missing
Another way to define object types
Test object type knowledge
Accept multiple types
Specific allowed values
Refine types with conditions
Test union type knowledge
Type arrays and their elements
Fixed-length typed arrays
Types that take parameters
Test array and generic knowledge
Limit what types are allowed
Escape hatch from typing
Safer alternative to any
Tell TypeScript you know better
Test type safety knowledge
Install and configure
Configure the compiler
TypeScript in React, Vue, Node
Review of TypeScript basics
Write tests to verify your code works
Why testing matters
Unit, integration, and end-to-end
Tools for writing tests
Writing a basic test
Test basic testing knowledge
Ways to check values
When to use each
Verify code throws correctly
Test matcher knowledge
Group related tests
Prepare for tests
Test organization knowledge
Handle promises in tests
Verify async errors
Create fake functions for testing
Control what mocks return
Test mocking knowledge
Replace entire modules
Watch real function calls
Test UI code
Test DOM testing knowledge
Measure how much code is tested
Write tests first
Focus your testing efforts
Design code that's easy to test
Test best practices knowledge
Execute and watch tests
Review of testing
Find and fix bugs efficiently
The art of finding bugs
Beyond console.log
Make logs easier to read
Test console knowledge
Understand what errors tell you
Recognize frequent errors
Your debugging toolkit
Test DevTools knowledge
Pause code execution
Breakpoints in code
Execute line by line
Test breakpoint knowledge
Pause only when conditions are met
Monitor values as you step
See how you got here
Test debugging technique knowledge
Debug HTTP requests
Handle async complexity
Find slow code
Find memory leaks
Test advanced debugging knowledge
Systematic bug hunting
Narrow down the cause
Explain your code out loud
Debug minified code
Review of debugging
Structure code for maintainability
Why organization matters
Standard project layouts
Group related files together
Group by file purpose
Test structure knowledge
Project configuration hub
Runtime vs development needs
Automate common tasks
Test package.json knowledge
Catch problems automatically
Consistent code style
Keep the repo clean
Test tooling knowledge
Configure for different environments
Common config file patterns
Transform and bundle code
Test configuration knowledge
Code that others can read
Consistent, meaningful names
When and how to comment
Test clean code knowledge
Learn from feedback
Use Git effectively
Review of project organization
Continue your JavaScript learning
Your JavaScript foundation
React, Vue, Angular
The most popular choice
Test framework knowledge
JavaScript on the server
Build APIs quickly
Test backend knowledge
Store and retrieve data
Standard web communication
Test API knowledge
Beyond the basics
Beyond unit tests
Test advanced knowledge
Handle complex app state
Modern development setup
Automate deployment
Test tooling knowledge
Protect your applications
Make apps fast
Build for everyone
Test best practices knowledge
Showcase your work
Learn from real projects
Stay current
Your JavaScript learning continues
