Contents
JavaScript tutorial
A step-by-step JavaScript course from scratch: from your first program to advanced topics.
1.Basics
- Introduction to JavaScriptWhat JavaScript is, where it runs and what a first program looks like.
- VariablesHow to declare variables in JavaScript with let and const, name them and insert them into strings.
- Data typesThe main JavaScript data types — numbers, strings, booleans, null and undefined, and the typeof operator.
- NumbersNumbers in JavaScript — integers and fractions, rounding, the Math object, toFixed and the special values Infinity and NaN.
- StringsStrings in JavaScript — quotes, joining, template literals, length, accessing characters and the first methods.
- OperatorsJavaScript arithmetic operators, the remainder, operator precedence, compound assignment, ++ and --.
- Type conversionHow to turn a string into a number and back in JavaScript — Number, String, Boolean, parseInt and implicit conversion.
- ComparisonComparison operators in JavaScript — greater, less, strict and loose equality, comparing strings and NaN.
2.Control flow
- ConditionsBranching in JavaScript — if, else, else if, truthy and falsy values and the ternary operator.
- Logical operatorsJavaScript logical operators — AND, OR, NOT, their precedence, default values with || and the ?? operator.
- The switch statementHow to choose one of many options with switch in JavaScript — case, break, default and grouping cases.
- LoopsThe while, for and for...of loops in JavaScript — the counter, the step, looping over a string and accumulating a result.
- Loop controlHow to stop a loop early or skip an iteration in JavaScript — break, continue, searching and nested loops.
3.Functions
- FunctionsHow to declare and call functions in JavaScript — declaration, calling, a parameter, return and leaving a function.
- ParametersFunction parameters and arguments in JavaScript — several parameters, order, missing arguments and default values.
- Arrow functionsFunction expressions and arrow functions in JavaScript — the short form, implicit return and a body in curly braces.
- ScopeWhere variables are visible in JavaScript — local and global variables, block scope and shadowing.
- ClosuresWhat a closure is in JavaScript — a function that remembers outer variables, counters and function factories.
- CallbacksCallback functions in JavaScript — how to pass a function into another function and why it is useful.
- RecursionRecursion in JavaScript — a function that calls itself, the base case, factorial and the call stack.
4.Arrays
- ArraysWhat an array is in JavaScript: creating one, indexes, length, changing elements and nested arrays.
- Array methodsHow to add and remove array elements in JavaScript: push, pop, shift, unshift, slice, splice, concat and join.
- Iterating over arraysHow to go through every element of an array in JavaScript: the for loop, for...of, forEach and entries.
- map, filter and reduceThe three main array processing methods in JavaScript: transforming, selecting and reducing to a single value.
- Searching arraysHow to find an element in a JavaScript array: includes, indexOf, find, findIndex, some and every.
- Sorting arraysHow to sort an array in JavaScript: sort, the compare function, sorting numbers, strings and objects, reverse and toSorted.
5.Objects
- ObjectsObjects in JavaScript: properties, dot and bracket access, adding, deleting and nested data.
- Methods and thisObject methods in JavaScript, the this keyword, shorthand properties and methods, and losing this.
- Iterating objects and Object functionsHow to iterate over an object in JavaScript: Object.keys, Object.values, Object.entries, Object.fromEntries, for...in and Object.hasOwn.
- DestructuringArray and object destructuring in JavaScript — unpacking values into variables in one line.
- The spread and rest operatorsThe three dots in JavaScript — spreading arrays and objects, copying, merging and rest parameters.
- Optional chaining and ??Safe access to nested properties in JavaScript: the ?. operator, calling optional methods and defaults with ??.
- JSONThe JSON format in JavaScript: turning objects into a string with JSON.stringify and back with JSON.parse.
- Map and SetThe Map and Set collections in JavaScript: a dictionary with keys of any type and a set of unique values.
6.Text, dates and formatting
- String methodsUseful string methods in JavaScript: finding a position, reading characters, padStart, repeat, split and join, method chains.
- Template literalsTemplate literals in JavaScript: inserting values and expressions, multi-line text, conditions inside a template and tagged templates.
- Regular expressionsRegular expressions in JavaScript for beginners: patterns, flags, character classes, testing, finding and replacing text.
- Dates and timeThe Date object in JavaScript: creating a date, reading the year, month and day, changing a date, the difference between dates and the ISO format.
- Formatting with IntlLocale-aware formatting of numbers, money, dates and plural words in JavaScript: toLocaleString, Intl.NumberFormat, Intl.DateTimeFormat and Intl.PluralRules.
7.Classes
- Classes and objectsClasses in JavaScript: declaring a class, the constructor, fields, methods, this and creating objects with new.
- InheritanceClass inheritance in JavaScript — extends, super, overriding methods and instanceof.
- Private and static membersPrivate fields and methods of JavaScript classes with #, encapsulation, static methods and properties.
- Getters and settersGetters and setters in JavaScript classes: computed properties, validating values on write and read-only properties.
- PrototypesHow inheritance works inside JavaScript: an object's prototype, the prototype chain, class methods in prototype and Object.create.
8.Error handling
- Errors and try...catchError handling in JavaScript: try, catch and finally blocks, the error object, the throw statement and built-in error types.
- Custom error classesYour own errors in JavaScript: extending Error, the name property, extra data, checking with instanceof, rethrowing and cause.
- DebuggingHow to find bugs in JavaScript: reading the error message, console.log and its variants, checking types, developer tools and debugger.
9.Asynchronous code
- The event loopHow JavaScript runs code: synchronous and asynchronous code, the task queue, microtasks and the event loop.
- TimersThe setTimeout and setInterval functions in JavaScript: delayed and repeated calls, arguments, cancelling a timer.
- PromisesPromises in JavaScript: promise states, then, catch, finally, creating a promise with new Promise, and chains.
- Several promises at oncePromise.all, Promise.allSettled, Promise.race and Promise.any in JavaScript: how to wait for several asynchronous actions at the same time.
- async and awaitAsynchronous functions in JavaScript: async, await, error handling with try...catch, sequential and parallel waiting.
- Server requests: fetchThe fetch function in JavaScript: GET and POST requests, the response object, status, response.ok, parsing JSON and handling errors.
10.Modules and packages
11.Working with the page
- Finding elements on the pageWhat the DOM is and how to find page elements in JavaScript: querySelector, querySelectorAll, searching inside an element and checking for null.
- Changing the pageHow to change page elements from JavaScript: textContent, innerHTML, classes with classList, styles, attributes, data attributes and hiding elements.
- Creating and removing elementsHow to create elements in JavaScript with createElement, insert them with append, prepend, before and after, build a list from an array and remove elements.
- EventsEvents in JavaScript: addEventListener, clicks, the event object, text input, key presses and removing a listener.
- Event bubbling and delegationHow events bubble up from an element to its parents, how target differs from currentTarget, and how one handler on a parent serves many elements.
- FormsWorking with forms in JavaScript: the submit event and preventDefault, reading fields, FormData, checkboxes and selects, validating data and showing errors.
- Storing data in the browserlocalStorage and sessionStorage in JavaScript: saving, reading and removing data, storing objects with JSON, and the difference between the two storages.
- Server data on the pageHow to load data and show it on the page: a loading state, rendering a list, handling errors, loading on a button click and requesting with fetch.
12.Advanced topics
- Iterators and generatorsHow for...of works in JavaScript: iterable objects, iterators and the next method, generator functions with yield, and your own iterable object.
- SymbolsThe symbol type in JavaScript: unique values, symbols as object keys, hidden properties, the Symbol.for global registry and built-in symbols.
- this, call, apply and bindHow this is determined in JavaScript, why a method loses its context, and how to set this by hand with call, apply and bind.
- ImmutabilityMutable and immutable data in JavaScript: object references, copying with spread, the toSorted and with methods, Object.freeze and structuredClone.
- Strict modeThe use strict directive in JavaScript: which mistakes strict mode catches, this in functions, forbidden syntax and where strict mode is turned on automatically.
- New language featuresUseful recent additions to JavaScript: numeric separators, the at method, logical assignment, findLast and Object.groupBy.