JavaScript Tutorial

If you find yourself in any of the following situations:

• Unsure about where to start learning JavaScript.
• Tired of simply copying and pasting JavaScript code without really understanding how it works.
• Feel stuck to add richer and more compelling features to your websites and web applications because you don’t know how to get much out of JavaScript.

JavaScriptTutorial.net is a good place to start.

Section 1. Getting started

Install a JavaScript source code editor – learn how to install the Visual Studio Code for editing JavaScript code.

Meet the Console Tab of Web Development Tools – provide you with a basic introduction to the Console window on the web browsers.

JavaScript Hello World – learn how to execute the first JavaScript code that displays the famous "Hello, World!" message.

Section 2. Fundamentals

Syntax – explain the JavaScript syntax, including whitespace, statements, identifiers, keywords, expressions, and comments.

Variables – show you how to declare variables.

Data types – introduce to you the JavaScript data types, including primitive and reference types.

Number – learn how JavaScript uses the Number type to represent the integer and floating-point numbers.

Numeric Separator – show you how to make the numbers more readable by using underscores as numeric separators.

Octal & binary literals – provide support for binary literals and change the way to represent octal literals.

Boolean – introduce you to the Boolean type.

String – learn about string primitive type and some basic string operations.

Object – introduce you to the object type.

Primitive vs. reference values – understand two value types in JavaScript, including primitive and reference values, and the differences between them.

Array – introduce you to the Array type and how to manipulate array elements.

Section 3. Operators

Arithmetic operators – introduce to you the arithmetic operators including addition (+), subtraction (-), multiplication (*), and division (/).

Remainder operator – show you how to use the remainder operator (%) to get the remainder left over when one value is divided by another value.

Assignment operators – guide you on how to use assignment operators (=) to assign a value or an expression to a variable.

Unary operators – learn how to use unary operators.

Comparison operators – show you how to use comparison operators to compare two values.

Logical operators – learn how to use the logical operators: NOT (!), AND (&&), and OR (||).

Logical assignment operators – introduce to you the logical assignment operators, including ||=, &&=, and ??=

Nullish coalescing operator (??) – accept two values and return the second value if the first one is null or undefined.

Exponentiation operator – introduce you to the exponentiation operator (**) that calculates a base to the exponent power, which is similar to Math.pow() method.

Section 4. Control flow Statements

if – show you how to use the if statement to execute a block if a condition is true.

if…else – learn how to execute a block of code based on a specified condition.

…else…if – check multiple conditions and execute a block.

Ternary operators – show you how to make a shortcut for the if statement ( ?:).

switch – show you how to replace multiple if statements when comparing a value with multiple variants by using the switch statement.

while – learn how to perform a pre-test loop that repeatedly executes a block of code as long as a specified condition is true.

do…while – show you how to carry a post-test loop that executes a block of code repeatedly until a specified condition is false.

for loop – learn how to repeatedly execute a block of code based on various options.

break – learn how to prematurely terminate a loop.

continue – show you how to skip the current iteration of a loop and jump to the next one.

Comma operator – guide you on how to use the comma operator in a for loop to update multiple variables at once.

Section 5. Functions

Functions – introduce you to functions in JavaScript.

Functions are first-class citizens – learn how to store functions in the variables, pass functions into other functions as arguments, and return functions as values.

Anonymous Functions – learn about anonymous functions which are the functions without names.

Pass-by-value – understand how pass-by-value works in JavaScript. Recursive function – learn how to define recursive functions.

Default Parameters – show you how to define default parameters for functions.

Section 6. Objects & Prototypes

Object Methods – introduce you to the methods of an object.

Constructor functions – show you how to use constructor functions to define custom types in JavaScript.

Prototype – learn how the prototype works in JavaScript.

Constructor/Prototype pattern – show you how to combine the constructor function and prototype pattern to define custom types.

Prototypal inheritance – understand prototypal inheritance in JavaScript.

What is this in JavaScript – understand the this value and how it works in JavaScript.

globalThis – provide a standard way to access the global object across environments.

Object Properties – dive into the object’s properties and their attributes.

for…in loop – learn how to iterate over properties of an object using the for...in loop.

Enumerable Properties – learn more about the enumerable properties.

Own Properties – understand the own and inherited properties.

Factory functions – learn about the factory functions which are functions that return objects.

Object Destructuring – learn how to assign properties of an object to variables.

Optional chaining operator (?.) – simplify the way to access a property located deep within a chain of connected objects without having to check if each reference in the chain is null or undefined.

Object literal syntax extensions – provide a new way to define object literal.

Section 7. Classes

Class – introduce you to the ES6 class syntax and how to declare a class.

Getters and Setters – define the getters and setters for a class using the get and set keywords.

Class Expression – learn an alternative way to define a new class using a class expression.

Computed property – explain the computed property and its practical application.

Inheritance – show you how to extend a class using the extends and super keywords.

new.target – introduce you to the new.target metaproperty.

Static methods – guide you on how to define methods associated with a class, not instances of that class.

Static Properties – show you how to define static properties shared by all instances of a class.

Private Fields – learn how to define private fields in a class.

Private Methods – show you how to define private methods in a class.

Section 8. Advanced Functions

Function type – introduce you to the Function type and its properties and methods.

call()– understand the call() method and learn how to use it effectively.

apply() – learn how to use the apply() method effectively.

bind() – understand the bind() method and how to apply it effectively.

Closure – understand the closures in JavaScript.

Immediately Invoked Function Expression (IIFE) – learn about immediately invoked function expressions (IIFE).

Returning multiple values – guide you on how to return multiple values from a function.

Arrow functions – introduce you to the arrow functions ( =>)

Arrow functions: when you should not use – learn when not to use the arrow functions.

Rest parameter – introduce you to the rest parameters and how to use them effectively.

Callback functions – introduce you to the callback functions and learn how to use the callbacks to handle asynchronous operations.

Section 9. Promises & Async/Await

Promises – learn about Javascript Promises, what they are, and how to use them effectively.

Promise chaining – show you how to execute multiple asynchronous operations in sequence.

Promise composition: Promise.all() & Promise.race() – learn how to compose a new promise out of several promises.

Promise.any() – learn how to use the JavaScript Promise.any() method to return the first Promise that fulfills.

Promise.allSettled() – accept a list of promises and returns a new promise that resolves to an array of values, which were settled (either resolved or rejected) by the input promises.

Promise.prototype.finally() – execute a piece of code when the promise is settled, regardless of its outcome.

Promise error handling – guide you on how to handle errors in promises.

async / await – write asynchronous code in a clearer syntax.

Section 10. Iterators & Generators

Iterators – introduce you to the iteration and iterator protocols.

Generators – develop functions that can pause midway and then continue from where they paused.

yield – dive into how to use the yield keyword in generators.

for…of – learn how to use the for...of loop to iterate over elements of an iterable object.

Asynchronous iterators – learn how to use async iterators to access asynchronous data sources sequentially.

Async generators – show you how to create an async generator.

Section 11. Modules

Modules – learn how to write modular JavaScript code.

Export – explain in detail how to export variables, functions, and classes from a module.

Import – guide you on how to import default exports and named exports from another module.

Dynamic import – show you how to import a module dynamically via the function-like object import().

Top-level await – explain the top-level await module and its use cases.

Section 12. Symbol

Symbol – introduce you to a new primitive type called symbol in ES6

Section 13. Collections

Map – introduce you to the Map type that holds a collection of key-value pairs.

Set – learn how to use the Set type that holds a collection of unique values.

Section 14. Error handling

try…catch – show you how to handle exceptions gracefully.

try…catch…finally – learn how to catch exceptions and execute a block whether the exceptions occur or not.

throw – show you how to throw an exception.

Optional catch binding – omit the exception variable in the catch block.

Section 15. JavaScript var, let, and const

let – declare block-scoped variables using the let keyword.

let vs. var – understand the differences between let and var.

const – define constants using the const keyword.

Section 16. Proxy & Reflection

Proxy – learn how to use the proxy object that wraps another object (target) and intercepts the fundamental operations of the target object.

Reflection – show you how to use ES6 Reflection API to manipulate variables, properties, and methods of objects at runtime.

Section 17. JavaScript Runtime

Execution Contexts – understand execution contexts including global and function execution contexts.

Call Stack – understand the call stack.

Event Loop – show you how JavaScript handles asynchronous operations using the event loop.

Hoisting – learn how hoisting works in JavaScript.

Variable scopes – introduce you to the variable scopes.