JavaScript is the language of the web. If you want to code for the web, you need to know JavaScript inside and out. This course will help you learn JavaScript,
This course is 7 hours 30 minutes long, and it’s split into 78 lessons in total. You’ll find it’s a great resource that you will come back to often so make sure you bookmark the parts that interest you.
Who is This FREE Course For?
- Complete beginners who want to be web developers
- Experienced developers who want to explore advanced topics
- Programming enthusiasts who enjoy learning something exciting
Follow Along, Learn by Doing
I encourage you to follow along with this course and you'll learn about all the most important features of JavaScript.
To help, the Modern Javascript Fundamentals course GitHub repository contains the source code for each lesson and the completed sample project that was built throughout the course.
1. What You Will Learn in This Free JavaScript Course
Watch video lesson [0:00:00] ↗
Welcome to Modern JavaScript Fundamentals. In this introductory lesson we'll take a look at the scope of the course.
Here is what we'll cover:
- fundamental concepts: variables, assignment, operators
- data types: arrays, objects, maps, sets
- program control: conditionals, loops, iterators
- JavaScript built-ins: types, JSON,
Math, dates and times - functions: scope, closures, prototypes,
this, arrow functions, generators - advanced languauge features: promises, destructuring, regular expressions, classes
- web APIs: the DOM, the Selector API, geolocation, web storage, web workers
Setup
Watch video lesson [0:00:10] ↗
Let’s get our development area set up and ready for coding! In this lesson I’ll show you how.
To set up JavaScript and our working environment, we'll use the following tools:
2. Language Fundamentals
Variables
Watch video lesson [0:07:46] ↗
In this lesson we’ll look at one of the most fundamental units of a JavaScript program—the humble variable. We’ll see the different ways that a variable can be declared and then assigned a value, and some other general bits of information about variables that you should probably be aware of.
Data Types
Watch video lesson [0:14:07] ↗
In this lesson we’ll take a look at the different data types that can be used in JavaScript and what each type can be used for. We’ll cover primitives, composites, and special data types.
Arithmetic, Assignment, and Comparison Operators
Watch video lesson [0:25:21] ↗
Special characters like + and - can be used in different combinations to perform operations on different things. Let’s see how some of the more basic operators, like arithmetic, assignment, and comparison operators behave.
Unary, Logical, Comma, and Spread Operators
Watch video lesson [0:34:56] ↗
In this lesson we’ll continue looking at JavaScript’s many operators. This time we’ll focus on unary operators, logical operators, the comma operator, and the spread operator.
Exponentiation and Logical Assignment Operators
Watch video lesson [0:42:57] ↗
In this lesson we'll look at exponentiation operators and logical assignment operators.
Operator Precedence
Watch video lesson [0:47:32] ↗
Not all operators are created equal! In this lesson we'll see the order in which operators are evaluated when more than one type of operator is used in an expression.
Reserved Words
Watch video lesson [0:51:05] ↗
Some words in JavaScript are special and can't be used as identifiers. Let's just take a moment to review these to make sure we don't cause unexpected errors in our programs.
Numeric separators
Watch video lesson [0:53:50] ↗
Numeric separators make working with large constants a little easier.
Long numbers can be hard to read. Here the numeric separators make it easy to see the number is one billion.
const hardToRead = 1000000000; const easierToRead = 1_000_000_000;
Strict Mode
Watch video lesson [0:55:45] ↗
Strict mode is a useful execution mode for JavaScript that can prevent many errors and should always be used. In this lesson we’ll learn all about it.
For example, the following function, in strict mode, will throw a a compile-time exception about assigning to NaN. The idea is to catch a mistake when you compile the code, instead of waiting for the program to fail when you run it.
function strict() {
'use strict';
NaN = 'oops';
console.log(NaN);
}Nullish Coalescing & Optional Chaining
Watch video lesson [0:59:28] ↗
In this section we'll learn about the nullish coalescing operator: ??. Nullish coalescing makes it easy to retrieve the value of an expression, or some default value if that expression is null.
Here are a couple of examples of nullish coalescing in operation:
const count = null; console.log(count ?? 10); //10 const count = 0; console.log(count ?? 10); //0
Functions
Watch video lesson [1:03:11] ↗
Functions are the cornerstone of JavaScript. In this lesson we'll look at some basic features of functions.
Here is a very basic example of a function that just logs a message to the console:
function logMe(message) {
console.log("The message is: " + message);
}
logMe("a message!");
logme("a different message!");3. Data Structures
Arrays
Watch video lesson [1:13:52] ↗
Arrays are one of the most commonly used structures for storing data, and you will use them all the time. In this lesson we’ll focus on the basics: what arrays are and how they can be created, accessed, and modified.
Here's a simple example of an array of types of fruit. Note that an array can have duplicates.
const fruits = [];
fruits.push('banana', 'apple', 'peach', 'apple');
console.log(fruits.length); // 4Objects
Watch video lesson [1:18:18] ↗
Objects are a fundamental concept in JavaScript, and ultimately, most entities are objects in one way or another. In this lesson we’ll focus on how objects can be created, and the different ways that their properties can be accessed
Sets
Watch video lesson [1:22:46] ↗
Sets are JavaScript objects that store unique values of any type. Set is one of the collection classes recently added to JavaScript.
Unlike arrays, sets cannot have duplicates:
const fruitArray = ['apple','banana','pineapple', 'banana']; const fruitSet = new Set(fruitArray); console.log(fruitArray.length); // 4 console.log(fruitSet.size); //3
Maps
Watch video lesson [1:27:38] ↗
Maps are objects that store key, value pairs. In the case of maps, both the keys and values can be of any type.
Weak Maps and Weak Sets
Watch video lesson [1:31:57] ↗
Following on the previous lesson, let’s take a look at WeakSet s and WeakMap s. A WeakSet contains weakly referenced unique objects, whereas a WeakMap has weakly referenced objects as keys.
4. Controlling Program Execution
Conditionals
Watch video lesson [1:36:22] ↗
What happens when we need to do one thing if a condition is true, or something else if it isn’t? We use an if statement, that’s what, and in this lesson we’ll learn all about if statements and the ternary operator.
Here's an example of using a ternary operator:
let amount = 5 let description = amount <= 3 ? 'few' : 'many'; console.log(description); // "many"
Try Catch
Watch video lesson [1:43:50] ↗
When code throws errors, how do you catch them? In this lesson we'll see how.
Switch Statements
Watch video lesson [1:46:46] ↗
Similar to an if is the switch statement, which allows us to take a different code path based on the value of something. I’ll show you how it works in this lesson.
The For Loop
Watch video lesson [1:51:16] ↗
The most basic way of iterating a data structure is the for loop. Let’s take a look at how it works.
This example builds a string with nine * characters. Of course it would be easy to hard code this, but what if it was ninety characters? Or nine thousand?
let str = '';
let n = 9
for (let i = 0; i < n; i++) {
str = str + "*";
}
console.log(str); // "*********"The `for .. in` Loop
Watch video lesson [1:57:03] ↗
While a classic for loop is used for iterating arrays, a for .. in loop is used to iterate objects.
The `for .. of` Loop
Watch video lesson [2:01:56] ↗
The for .. of loop is a new construct that allows us to iterate over the values in a collection instead of the keys. Let’s take a look at how we can use it to iterate arrays, maps, or other iterable objects.
Iterators
Watch video lesson [2:05:35] ↗
Let’s learn about the iteration protocol and see how to iterate some of the data structures that we looked at earlier.
While Loops
Watch video lesson [2:10:31] ↗
JavaScript also supports two additional types of loops: while and do .. while loops. These loops differ from for loops in that they test a condition evaluating to true or false at each iteration step, rather than iterating a range of numbers or elements in an object. We’ll cover the syntax of both while loop types and look at some considerations of their usage.
5. Using JavaScript
Working With Strings
Watch video lesson [2:14:03] ↗
Strings have lots of different properties and methods we can use in order to transform them or glean useful information from them. Let’s see some of the more common things we can do with strings.
Working With Strings: Padding, Trimming, and Replacing
Watch video lesson [2:23:26] ↗
Often when you are using strings you'll want to do some formatting, like padding the beginning or end, trimming whitespace, or replacing characters. In this lesson you'll see how.
Some examples of padding and trimming functions:
console.log(' test '.trimStart()); // "test "
console.log(' test '.trimEnd()); // " test"
console.log('pad me'.padStart(10)); // " pad me"Template Literals
Watch video lesson [2:27:34] ↗
JavaScript now features native templating in the form of template literals, which are a special type of string that can contain expressions. We can also use a slightly more advanced template called a tagged template. Let’s look at both of these features in this lesson.
Template literals are great for building strings for output.
const username = "Lucas";
console.log(`Hello ${username}!`); // "Hello Lucas!"Working With Numbers
Watch video lesson [2:33:02] ↗
In this lesson we’ll take a look at some of the properties and methods that make up the API of the built-in Number object.
Working With BigInts
Watch video lesson [2:39:31] ↗
Sometimes a plain Number is not big enough to store the result of a calculate. For example, exponentiation can overflow the numeric data type quickly.
Here's an example that shows how powerful and easy to use the BigInt type is.
const num = 2 ** 4; // 16 const reallyBigNum = 2 ** 4 ** 5; //Infinity const bigIntNum = BigInt(2) ** BigInt(3) ** BigInt(4); //2417851639339358349412352n
Working With Arrays
Watch video lesson [2:44:08] ↗
Arrays also have a variety of different properties and methods. Let’s review the most commonly used.
Iterating and Transforming Arrays
Watch video lesson [2:55:10] ↗
Arrays have so many useful methods that I had to break the array lesson into two parts! In this lesson, we continue looking at how we can work with arrays, this time focusing on methods for iterating and transforming them.
Searching and Flattening Arrays
Watch video lesson [3:02:24] ↗
If you want to find out if an array contains a certain element, then you'll want to search with a method like includes().
If you have an array of arrays, you can combine all the elements into a single array with flat().
Working With the Object Type
Watch video lesson [3:05:47] ↗
Object is a special type of object which also has its own properties and methods. In this lesson, we learn about instances of Object and how they can be used.
Object Literal Extensions
Watch video lesson [3:18:57] ↗
Recent versions of JavaScript have introduced some new tools that we can make use of when creating object literals, including shortcuts for defining properties and methods, dynamic keys, and the new assign method.
Working With Object Instances
Watch video lesson [3:25:41] ↗
All object instances inherit properties and methods from the prototype of their constructor. We can find out whether a property is defined on an object directly or inherited from the prototype. To do this, we use the hasOwnProperty method of the Object constructor. We’ll cover this and some other Object constructor methods in this lesson.
Object Methods for Keys and Values
Watch video lesson [3:32:19] ↗
Often we need to access the keys and values of an object as a collection. The Object class provides a number of methods for this, for example keys() and values().
-
How to Iterate Over Object Properties in JavaScript
-
How to Iterate Over Object Keys With JavaScript -
How to Check if an Object Is Empty in JavaScript
Getters and Setters
Watch video lesson [3:36:35] ↗
As well as regular object properties, we can also create properties that have getters and setters, which are special functions that run when the property is set or accessed.
Custom Objects
Watch video lesson [3:40:57] ↗
We’ve seen how to create objects that have properties and methods, but in this lesson we’ll go a little deeper and see how to create custom objects. We’ll also look at how to specify whether properties are enumerable or configurable.
The Math API
Watch video lesson [3:52:11] ↗
In this lesson we’ll take a look at the built-in Math object, which provides properties and methods to perform operations on numbers.
Working With Dates and Times
Watch video lesson [3:57:02] ↗
In this lesson, we’ll look at how to work with dates and times in JavaScript. I’ll show you how to create new instances of the Date class, modify them, and output them to strings.
The Array Constructor
Watch video lesson [4:04:50] ↗
Like the Object class, the Array constructor has a couple of useful methods that we can make use of. In this lesson we’ll take a look at these methods in detail.
6. Functions
The this Object
Watch video lesson [4:09:45] ↗
The this object is often confusing to JavaScript beginners. Depending on the context in which it’s used, this can be bound to different objects. In this lesson, we’ll look at some of the ins and outs.
Working With Functions
Watch video lesson [4:15:00] ↗
Functions are also objects, and as such they have their own properties and methods that we can make use of. Let’s take a look at some of the more common function methods.
Scope
Watch video lesson [4:24:30] ↗
Scope is an important and sometimes elusive concept in JavaScript. We need to understand scope, so in this lesson we’ll dig in and focus entirely on what it is.
The globalThis Property
Watch video lesson [4:31:46] ↗
In JavaScript, the global object has a different name depending on the execution environment. For JavaScript in the browser it's window, on Node.js it's global, and in a WebWorker it's called self. That's where globalThis comes in—to give consistent access to the global object no mater the platform.
Arrow Functions
Watch video lesson [4:34:08] ↗
Arrow functions give us a much more concise syntax for anonymous functions. They come with a few gotchas though. For one, this works a little differently in an arrow function. Let’s take a closer look at how to use arrow functions and how this works with them in this lesson.
Arrow functions are great for writing short, succinct functions that transform their input.
const numbers = [1, 2, 3, 4, 5]; console.log(numbers.map(n => n*n)); // [1, 4, 9, 16, 25]
Generator Functions
Watch video lesson [4:41:02] ↗
Generators are a special type of function that can be paused during execution using a yield expression. Let’s learn how to pass values in to generators, and see what comes out when we use them.
Closures
Watch video lesson [4:48:33] ↗
Closures are seen by some as a complex and difficult concept to learn. We'll blast that myth away in this lesson and learn how easy they are to use.
Prototypes
Watch video lesson [4:53:30] ↗
The prototype is a special object that has a huge significance for JavaScript inheritance. Prototypes are a powerful mechanism, and it is important to understand them well.
Spread Syntax
Watch video lesson [4:59:53] ↗
The spread syntax is a concise way to expand an array or other iterable into an arbitrary number of function arguments or array elements.
A great use of the spread syntax is for common array operations like cloning, concatenation, etc.
const a = [1, 2, 3]; const b = [4, 5, 6]; //create a copy of a const copyA = [...a]; //changes to this copy will not affect a copyA.unshift(0); console.log(a); // [1, 2, 3] //concatenate a and b console.log([...a, ...b]); // [1, 2, 3, 4, 5, 6] //add elements to the beginning and end of a console.log([0, ...a, 0]); // [0, 1, 2, 3, 0]
Default and Rest Parameters
Watch video lesson [5:02:19] ↗
In this lesson, we can take a look at two additional function features, both to do with parameters: default parameters and rest parameters.
7. Miscellaneous
Destructuring Assignments
Watch video lesson [5:07:21] ↗
JavaScript has built-in support for destructuring arrays and objects into individual variables during assignment. This is a real time-saver. In this lesson I’ll show you how to do this, as well as how to destructure parameters in function calls.
Destructuring makes it easy to break an array or object out into individual variables.
const a = [0, 1, 2]; const [x, _, y] = a; console.log(x); // 0 console.log(y); // 2
AJAX
Watch video lesson [5:15:28] ↗
AJAX (Asynchronous JavaScript and XML) is a cornerstone of modern web apps, allowing them to fetch data from the server and display it on the page without needing to refresh or reload the entire page. We’ll explore AJAX in detail in this lesson.
Regular Expressions
Watch video lesson [5:20:50] ↗
Regular expressions are an extremely powerful way to find strings in text based on patterns. They can be extraordinarily complex—almost a programming language unto themselves—but they can also be extremely useful.
More About Regular Expressions
Watch video lesson [5:31:31] ↗
There’s still a lot to learn about regular expressions. In this lesson, we’ll learn some advanced features of regular expressions, including matching and replacing strings.
Even More Regular Expressions
Watch video lesson [5:40:01] ↗
That's not all! Regular expressions are a (simple) programming language in their own right. We'll explore them further in this lesson.
Classes
Watch video lesson [5:42:54] ↗
Classes in JavaScript are a syntactic sugar that makes it easier to use JavaScript’s prototype-based inheritance. In this lesson, we’ll focus on the way to create objects and deal with inheritance.
This simple rectangle class knows how to calculate its own area:
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
area () {
return this.width*this.height;
}
}
const rect = new Rectangle(12, 16);
console.log(rect.area()); // 192Timeouts and Intervals
Watch video lesson [5:49:29] ↗
If you want to run some code after a timed delay, or want to run code at a regular interval, you will need setTimeout() or setInterval().
ES Modules
Watch video lesson [5:53:34] ↗
ECMAScript Modules (ES Modules or ESM for short) are one of the greatest features of JavaScript to emerge in recent years. In this lesson, I’ll show you how to make use of them for more modular, maintainable JavaScript.
8. Working With the DOM
Selecting HTML Elements
Watch video lesson [6:01:54] ↗
In this lesson I’ll show you the different DOM methods we can use to select elements from the page so that we can work with them programmatically.
Here's an example of extracting all h2 elmeents from the page:
Manipulating HTML Elements
Watch video lesson [6:06:51] ↗
In this lesson we’ll take a look at the basic APIs for working with HTML elements and their attributes, working with elements that we have previously selected.
DOM Travesal
Watch video lesson [6:014:19] ↗
In this lesson we’ll see how to traverse from one DOM node to another with code. This will help us map out the structure of the page and understand its contents.
Adding and Removing Elements
Watch video lesson [6:019:36] ↗
As well as manipulating elements, we might want to add new ones or remove existing ones. In this lesson we’ll look at the methods we can use to do this.
Creating Elements and Other Nodes
Watch video lesson [6:024:18] ↗
We can create a number of different things, such as elements, attributes, and comments, using the document interface. We can also create a lightweight version of a document called a documentFragment . This lets us manipulate elements in memory, improving performance. We’ll look at these topics in this lesson.
DOM Events
Watch video lesson [6:028:54] ↗
DOM events are extremely important. They are what allow us to create compelling, interactive web pages. We’ll see how to use DOM events to react to user and browser events in this lesson.
-
What is the DOM API (and How is it Used to Write JavaScript for the Web)?
-
Extend HTML With Custom Tags and the Shadow DOM
9. Web APIs
The Selector API
Watch video lesson [6:038:37] ↗
The selector API allows us to select elements from the page using CSS selectors, much like in popular JavaScript libraries such as jQuery.
Geolocation
Watch video lesson [6:041:10] ↗
Where in the world are you? The Geolocation API can tell you this, even in non-mobile environments like desktop computers. That’s what we’ll focus on in this lesson.
With this code you can retrieve and log the user's position—with their permission, of course!
navigator.geolocation.getCurrentPosition(
location => console.log(location),
err => console.log(err),
{ timeout: 1000}
)Web Storage
Watch video lesson [6:046:24] ↗
There are several different ways in which we can store data between browser sessions, including localStorage , Web SQL, and IndexedDB. In this lesson, we’ll look at how we can use each of these technologies, and when each might be useful.
Web Workers
Watch video lesson [6:051:31] ↗
Web workers provide a way for us to offload complex processing to a worker thread to avoid blocking the main UI thread. In this lesson we’ll see how to use dedicated workers.
10. Asynchronous JavaScript
Promises
Watch video lesson [6:055:03] ↗
In this lesson we'll look at native JavaScript promises, a special type of object that represents an operation that hasn't completed yet, but which is expected at some point.
Promise Chaining
Watch video lesson [7:04:52] ↗
In this lesson we continue looking at promises, this time focusing on handling multiple asynchronous tasks with promise chaining.
Promise Methods: all and any
Watch video lesson [7:10:07] ↗
What if you want to wait on a number of promises? If you want to wait until all the promises have resolved, you can use the Promise.all() method. Or, if you want to just wait until any of them have resolved, use Promise.any().
The async Keyword
Watch video lesson [7:14:01] ↗
The async keyword is a recent addition to the JavaScript language to make concurrent programming with promises even easier to write and read. In this lesson we'll learn about the async keyword, including where we can use it and what happens when we do.
The await Keyword
Watch video lesson [7:17:19] ↗
In this lesson we'll move on to look at the async keyword's companion, the await keyword, which can only be used within async functions.
More About async and await
Watch video lesson [7:21:16] ↗
Let's put async and await through their paces by using multiple awaits in a single async function, and catching errors with try...catch .
Asynchronous Iteration
Watch video lesson [7:25:05] ↗
Another cool thing you can do with async is to code asynchronous iteration with async generators.
Dynamic Imports
Watch video lesson [7:28:49] ↗
Ordinarily, an import statement is static—it's evaluated when the JavaScript file is first loaded, so your code doesn't have any control over whether the import is run, and you can only use static strings for the module name.
Dynamic imports change all that, though. They are evaluated as needed, so you can delay importing a module until you know it's needed, and you can use dynamic module names.
Here's how to load a different module depending on whether the code is running on the client or server.
let myModule;
if (typeof window === "undefined") {
myModule = await import("mymodule-server.js");
} else {
myModule = await import("mymodule-browser.js");
}Conclusion
Watch video lesson [7:30:58] ↗
Congratulations for completing this course! Along the way, you've learned a lot about JavaScript: from the basics of the language to new features that have been added in recent years. Treat this course as firm foundation to continue building your knowledge.
No comments:
Post a Comment