This JavaScript Tutorial helps you learn the JavaScript programming language from scratch quickly and effectively.
If you…
- Are not sure where to start learning JavaScript.
- Are frustrated with copy-n-paste JavaScript code from others without really understanding it.
- Cannot add richer and more compelling features to your websites and web applications using JavaScript because you don’t know how to get much out of the language.
Section 1. Getting started
- What is JavaScript? – introduce you to JavaScript and its history.
- 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 use the
Numbertype 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
Booleantype. - String – learn about string primitive type and some basic string operations.
- Object – introduce you to the object type.
- Array – introduce you to the
Arraytype 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 isnullorundefined. - Exponentiation operator – introduce you to the exponentiation operator (
**) that calculates a base to the exponent power, which is similar toMath.pow()method.
Section 4. Control flow Statements
- if – show you how use the
ifstatement to execute a block if a condition is true. - if…else – learn how to execute a block of code based on a specified condition.
- if…else…if – check multiple conditions and execute a block.
- Ternary operators – show you how to make a shortcut for the
ifstatement (?:). - switch – show you how to replace multiple
ifstatements when comparing a value with multiple variants by using theswitchstatement. - 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
forloop to update multiple variables at once.
Section 5. Functions
- Functions – introduce you to functions in JavaScript.
- Functions are the 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
thisvalue 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...inloop. - Enumerable Properties – learn more about the enumerable properties.
- Own Properties – understand the own and inherited properties.
- Object.values() – return own enumerable property’s values of an object as an array.
- Object.entries() – return own enumerable string-keyed property
[key, value]pairs of an object. - Object.assign() – copy an object or merge objects.
- Object.is() – check if two values are the same value.
- 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 isnullorundefined. - 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
extendsandsuperkeywords. - new.target – introduce you to the
new.targetmetaproperty. - 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
Functiontype 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 parameter 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 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.
- for…of – learn how to use the
for...ofloop 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.
- Dynamic import – show you how to import a module dynamically via the function-like object
import(). - Top-level await – explain top-level await module and its use cases
Section 13. Error handling
- try…catch – show you how to handle exceptions gracefully.
- try…catch…finally – learn how to catch exceptions and execut 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 14. JavaScript var, let, and const
- let – declare block-scoped variables using the
letkeyword. - let vs. var – understand the differences between
letandvar. - const – define constants using the
constkeyword.
