The Full JavaScript & ES6 Tutorial - (including ES7 & React)

Discover JavaScript as a lightweight, object-oriented scripting language that runs in the browser, manipulates the DOM, and can extend to server-side use within ES6.

Declare a function with the function keyword, name it, define parameters, and write a body to perform tasks and log results to the console.

Explore JavaScript objects as maps of keys to values by modeling a dog with name, breed, and weight; access properties using dot or bracket notation and add a bark method.

Learn how switch statements in JavaScript replace if-else for matching expressions, use case blocks with the break keyword to stop execution, and include a default case for unmatched inputs.

Explore ES6 features like arrow functions, enhanced collections, and generators, and learn how Babel and Webpack enable a development environment when browser support is incomplete.

Explore why we need transpilers like babble to convert ES6 and other advanced JavaScript into pre ES6 code that browsers can run, and learn how babble enables safer syntax.

Enable streamlined web development by using webpack to bundle modules into a single bundle.js, integrate babel for ES6 compatibility, and leverage the dev server for live code updates.

Configure Webpack to bundle ES6 code into build/bundle.js, serve via Webpack dev server on port 3000, using absolute paths with path.resolve, and prepare Babel transpilation for browser compatibility.

Configure Babel with webpack to transpile es6 to es5 for browser compatibility by using Babel core, Babel loader, and the env preset, and updating webpack config and babelrc.

Explore the essentials of ES6, including let and const for block-scoped variables, and template literals for dynamic strings, with previews of new JavaScript features and practical demonstrations.

Explore destructuring assignment in ES6, extracting values from arrays and objects with concise syntax, including common pitfalls like wrapping the statement in parentheses.

Explore ES6 updates with arrow functions, enhanced array and object helpers, and the new modules syntax using export and import to organize code.

Explore ES6 arrow functions, anonymous function expressions, and the distinction between function declarations and expressions. Learn how to convert named functions into anonymous forms and use setTimeout.

Explore the map and filter methods in ES6 by using a callback and arrow function to double array elements, then filter to reveal high scores.

Discover and use ES6 built-in helper methods for strings, numbers, arrays, and objects, including repeat, starts with, ends with, includes, and finite or safe integers, before exploring ES6 modules.

Explore ES6 string helper methods, including repeat and template strings, for creating large strings. Learn how startsWith, endsWith, and includes help search and validate text.

Master JavaScript modules by exporting and importing data and functions, using named and default exports to manage multiple values across files.

Discover JavaScript classes, constructors, and inheritance by modeling animals with a base animal class and a derived lion class, using extends and a hello method to present name, origin, height.

Explore inheritance in JavaScript by defining a Lion class that extends Animal, using super and this in constructors, and overriding methods; organize with modules and introduce static methods.

Explore static methods in classes, access them without an instance, and use a calculator as a namespace for add and multiply in ES6.

Explore how ES6 introduces the set data structure to store unique values and prevent duplicates, using add, delete, and has.

Create and populate a JavaScript Set with Set constructor and add method, then inspect size, check membership with has, and iterate using values with for...of to reveal unique characters.

Explore the ES6 map data structure with unique key-value pairs, where keys can be primitives, objects, or functions. Compare maps to objects and learn the size property through code examples.

Instantiate an ES6 map with the new keyword and set string, object, and function keys. Iterate with entries, convert arrays to maps, and count letters to illustrate advantages over objects.

Explore JavaScript closures and lexical scoping, revealing how inner functions access variables in parent scopes, retain data after execution, and enable returning functions for ES6 programs.

Explore function factories in JavaScript and ES6, using closures to create reusable functions that remember initial arguments. Learn to build factories with arrow functions and produce suffixing and multiplying behaviors.

Demonstrate how closures emulate private methods in JavaScript, exposing public wallet operations like deposit, withdraw, and check while protecting private balance data via the module pattern.

Learn to define and use ES6 generators with yield and next, building a letter maker and a counter generator that pauses, resumes, and yields values.

Develop control flow with generators by building an evens generator, using next to pass reset state, and reset count to zero when a reset is received in an infinite loop.