Maximiliano Firtman
Independent Consultant
Professional JS: Features You Need to Know
4 hours, 33 minutes CC
Course Description
Modernize your JavaScript skills with features ranging from ES6 to the latest ECMAScript additions. Master modules, arrow functions, destructuring, and async/await for cleaner, more efficient code. Explore language improvements including object and array enhancements, advanced asynchronous programming, and cutting-edge concepts like proxies, proper tail calls, and WeakRefs. Understand the TC39 process for feature adoption and get a glimpse into ECMAScript 2024 and beyond.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: July 30, 2024
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 17 minutes
Maximiliano Firtman introduces the course by explaining that the course will cover the latest version of ECMAScript, and will provide a recap of ECMAScript 6 (ES6). The course will also dive into new features and enhancements in JavaScript, organized by categories such as language enhancement, array and collections, async programming, and advanced techniques.
Maximiliano discusses the concept of JavaScript versions and how they differ from other programming languages. He provides a brief history of JavaScript and its evolution, including the introduction of ECMAScript and the release of different versions over the years.
New Features Process
Section Duration: 29 minutes
Maximiliano explains the relationship between ECMAScript and JavaScript and discusses how different engines, such as browsers and Node, determine which version of ECMAScript to execute. He also provides resources to check ECMAScript compatibility with browsers and Node.
Maximiliano explains the process of proposing and implementing changes to the JavaScript language. He discusses the stages of the Technical Committee process, from the initial proposal (stage 0) to the final approval and inclusion in a new version of ECMAScript (stage 4).
Maximiliano discusses how the language versions are named and how they differ from platform APIs. He also introduces the concepts of polyfills and transpilers, explaining how they can be used to write modern JavaScript code and ensure compatibility with older versions of the language.
Maximiliano answers student questions regarding the relationship between ECMAScript and TypeScript and how quickly TypeScript implements new features introduced by ECMAScript. He also addresses questions of whether TypeScript will become the standard for web development and the decision-making process for choosing the target version of ECMAScript when transpiling code.
ES6 Review
Section Duration: 1 hour, 5 minutes
Maximiliano provides a recap of ES6 features, including the class syntax, block code variable definitions, ES modules, arrow functions, promises, and more. He also discusses how modules work as isolated containers, how to import and export items from modules, and how to enable modules in different platforms such as the browser and Node.js.
Maximiliano creates a simple example where he imports three modules, and each module logs a message to the console. He explains the concept of module execution order and how modules are only executed once, even if they are imported multiple times.
Maximiliano demonstrates how to use variables and scoping in JavaScript using the provided editor. He explains the differences between global scope, function scope, and block scope, and shows how to declare variables using the `var`, `let`, and `const` keywords.
Maximiliano introduces the concept of class syntax in JavaScript. He explains how to define a class, create constructors, use getters and setters, and create subclasses. He also demonstrates how to access properties and methods of a class instance.
Maximiliano demonstrates how template strings can be used for string interpolation, executing functions and complex expressions, and creating multi-line strings. He also mentions that characters like tabs and spaces will be included in the string when using template strings.
Maximiliano discusses the syntax of arrow functions and their advantages, such as implicit return and shorter syntax for single-line functions. He also explains the differences in the behavior of the "arguments" object and the "this" keyword when using arrow functions compared to traditional functions.
Maximiliano explains the concept of object literals in JavaScript and how they differ from JSON. He also discusses the shorthand syntax for defining properties and methods in object literals, as well as the ability to dynamically compute property names using square brackets.
Maximiliano demonstrates using the rest and spread operators in JavaScript. The rest operator is used to collect multiple arguments into an array, while the spread operator is used to spread the contents of an array into another array.
Maximiliano explains how to destructure objects and arrays, and provides examples of using destructuring in function arguments. He also discusses the potential complexity and readability issues that can arise from overusing destructuring.
Maximiliano explains that in JavaScript, function arguments are not mandatory and can be called with any number of arguments. He also demonstrates how to set default values for function parameters, making the code cleaner and more concise.
After ES6
Section Duration: 53 minutes
Maximiliano discusses language enhancements that have been introduced after ES6. He covers topics such as the global `this` object, trailing commas in arrays and objects, optional catch binding, converting a function to a string, and changes in class declarations.
Maximiliano demonstrates how the rest operator can be used to collect the remaining properties of an object, and how the spread operator can be used to combine properties from multiple objects into a new object. He also mentions that these operators can be used to create quick decorators by spreading properties onto an existing object.
Maximiliano introduces the nullish coalescing operator and explains that it is used to check if a value is null or undefined and return a default value if it is.
Maximiliano demonstrates how the optional chaining operator can be used to handle null or undefined values in JavaScript. He also briefly discusses the logical assignment operator and the double asterisk operator for exponentiation.
Maximiliano explains the concept of private class variables and how to define private variables using a hash as part of the identifier. He also mentions that in ES2022+, it is possible to declare public or private fields directly in the class body without using the "this" keyword.
Maximiliano demonstrates how to define static fields and methods. He also introduces the concept of an initialization block, which is a block of code that is executed only once when the class is being parsed.
Maximiliano discusses various tools available in the object class in JavaScript such as object.assign, object.entries, object.values, object.fromEntries, object.hasOwnProperty, and object.is.
Maximiliano demonstrates various string methods in JavaScript, including startsWith, endsWith, includes, repeat, padStart, padEnd, trimStart, trimEnd, match, and matchAll. He also demonstrates how to use destructuring in combination with the matchAll method.
Maximiliano discusses the BigInt object in JavaScript, which allows for the representation of whole numbers larger than the maximum number that JavaScript can handle. He also mentions other methods and constants related to numbers, such as isFinite, isInteger, and MAX_SAFE_INTEGER.
Array & Collection Enhancements
Section Duration: 24 minutes
Maximiliano provides a recap of ES6 collections such as arrays, sets, maps, weak sets, and weak maps. He also discusses the concept of strong references and weak references in JavaScript memory management.
Maximiliano explains how to retrieve keys and values from an array, as well as how to use methods like copyWithin and fill to manipulate array elements. He also briefly mentions typed arrays, iterators, and generators, providing examples and explanations for each concept.
Maximiliano introduces array methods such as includes, flat, finding, at, stable sort, and change by copy. He also answers a student's question regarding whether ECMAScript is moving towards replacing TypeScript.
Asynchronous Programming
Section Duration: 31 minutes
Maximiliano introduces the topic of asynchronous programming and provides an overview of promises. He demonstrates how to create and use promises in JavaScript, including resolving and rejecting promises, and using the `then` and `catch` methods.
Maximiliano discusses how async/await is just a syntax sugar on top of the promises API and does not change how promises work. He also demonstrates how to use async/await to consume promises and make asynchronous code look more synchronous and error handling with try/catch.
Maximiliano discusses the advantages of using promises over callbacks. He also mentions the concept of "promisifying" data, which involves returning a promise instead of a synchronous value, making it easier to switch to asynchronous data sources in the future.
Maximiliano demonstrates how to use an async generator with a for-await-of loop to iterate over asynchronous values. He also discusses the new feature of top-level await, which allows for using await directly in the top-level code of a module.
Advanced Techniques
Section Duration: 48 minutes
Maximiliano introduces the last module of the course, which covers advanced techniques in JavaScript. He discusses proper tail calls, provides an example of a factorial function, and demonstrates the difference between a regular tail call and a proper tail call.
Maximiliano explains that a proxy is a design pattern that allows you to intercept and modify object behavior, and the Reflect API provides methods for working with objects dynamically. He also demonstrates how to create a proxy for an object and set traps for specific actions, such as getting a property value.
Maximiliano discusses symbols, a new type introduced in ECMAScript 6 that are unique and immutable primitive values. Symbols are often used to create unique property keys for objects and can be used as identifiers or keys in various scenarios.
Maximiliano discusses chaining exceptions, where one error is caused by another error. He also explains the hashbang grammar, which is a syntax used in Unix-based systems to specify the interpreter for a script, particularly useful for Node.js scripts.
Maximiliano discusses using WeakRef to allow for better memory management. He also introduces FinalizationRegistry, which allows developers to perform actions when an object is about to be garbage collected.
Maximiliano briefly discusses importing metadata and demonstrates how to create a tag template function that can be used to format strings with interpolated values. He also answers a student's question regarding the advantages of using tag templates over custom functions for string formatting.
Maximiliano covers various enhancements and additions to regular expressions in JavaScript including the .all flag and sticky flag. He also explains lookbehind assertions, name capture groups, and the Unicode property flag.
Wrapping Up
Section Duration: 2 minutes
Maximiliano wraps up the course by providing a recap of the differences between JavaScript and ECMAScript. He also discusses the use of transpilers to use newer ECMAScript versions and covers various language enhancements and features such as strings, objects, classes, collections, async programming, and advanced topics.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops