0% completed

All LessonsFree Lessons (8)

Function Scope, Block Scope, Constants

Introduction var vs let Constants let, const, and var Exercise on Function Scope, Block Scope, Constants

Arrow Functions

Fat Arrow Syntax Context Binding Exercise on Arrow Functions

Default Arguments

Hacks in ES5 The ES6 way Exercise on Default Arguments

Classes

Prototypal Inheritance Prototypal Inheritance in ES5 Inheritance - The ES6 way Super Shadowing Creating Abstract Classes Getters and Setters Static Methods Exercise on Classes

Destructuring

Object Property - Shorthand Notation Destructuring Examples Deeper Destructuring, destructuring functions, and pitfalls Exercise on Destructuring

Spread Operator and Rest Parameters

Rest Parameters Spread Operator Destructuring with the Spread Operator Exercise on Spread Operator and Rest Parameters

Objects in ES6

Equality Mixins Shorthand for Creating and Destructuring Objects Computed Object Keys Shorthand for Defining Operations in Objects Object Prototype Extensions and Super Calls Exercise on Objects in ES6

Tail Call Optimization and Other Function Features in ES6

Stacks Tail call optimization Name Property new.target Exercise on Tail Call Optimization & other Function Features

Symbols

Global Symbol Registry

Symbols as Semi-Private Property Keys

Creating enum Types

Well-known Symbols

Exercise on Symbols

The for-of loop

Introducing the for-of loop UTF-32 support Destructuring and the DOM in the for-of loop Exercise on the for-of loop

String and Template Literals

Introduction New String Methods Better Unicode Support Template Literals Tagged Templates Exercise on String and Template Literals

Sets, Maps, and their Weak Versions

Data Structures 101 ES6 Sets Iterating Sets ES6 Maps Iterating Maps Weak Sets Weak Maps Exercise on Sets, Maps, and their Weak Versions

Iterators and Generators in Depth

Iterables and Iterators Consuming Iterables Built-in Iterables Iterables with Sets and Maps The Role of the Iterable Interface Generators Generators and Iterators Iterators and Destructuring Combining Generators Passing Parameters to Iterables Practical Applications Exercise on Iterators and Generators

ES6 Promises

Promise States Creating Promises in ES6 Handling the Fulfilled or Rejected States Handling Multiple Promises Exercise on ES6 Promises

Configuring ES6 with Webpack

The Task Step 1: index.html Step 2: Initialize your Application and Configure Webpack Step 3: Account Module Step 4: Create the Entry Point Step 5: Compile and Run the Application

The Reflect API

Reflection Creating Objects Manipulating Prototypes Property Access and Modification Exercise on the Reflect API

Proxies in Practice

Introduction Defining Proxies Revocable Proxies Use Cases Exercise on Proxies

Math and Number Extensions

Math Extensions Number Extensions

ES2016

The Exponential Operator Array `includes`

ES2017

New Object Extensions Object.entries and Object.values Object.getOwnPropertyDescriptors New String Extensions Async-Await

Your Final Exam: ES6 Job Interview Questions

Introduction Writing an Array Extension Binary Gap Exercise in Codility Ten JavaScript Theory Questions JavaScript Theory Quiz Connect-4 Solver Binary Trees, Recursion and Tail Call Optimization in Javascript Painting on an HTML5 Canvas Video Player Event Delegation in a Pomodoro App Pomodoro App Markup and Styling Refactoring Persistence with Local Storage Pomodoro APP to Kanban Board Adding Tasks to Columns Selecting Cards Dragging and Dropping Cards Stopwatch Insert the Timer Module in the Pomodoro App Countdown Timer Integration in the Pomodoro App Memoization SQL and Map-Reduce-Filter

Bonus chapter: Your learning plan

Introduction Sync your Learning Plan with your Career Plan Set your Goals and Milestones The Big Picture Get Feedback and Iterate Present your Deliverables Summary

JavaScript In Practice: ES6 And Beyond/

...

/

Symbol

Symbol

symbol - a new ES6 primitive type and its use cases

We'll cover the following...

ES6 introduces a new primitive type for JavaScript: Symbols. The global Symbol() function creates a JavaScript symbol. Each time the Symbol() function is called, a new unique symbol is returned.

Press + to interact

let symbol1 = Symbol();
let symbol2 = Symbol();
console.log( symbol1 === symbol2 ); 
//> false

Symbols don’t have a literal value. All you should know about the value of a symbol is that each symbol is treated as a unique value. In other words, no two symbols are equal.

A symbol is a new type in JavaScript.

Press + to interact

console.log( typeof symbol1 );
//> "symbol"

Symbols are useful, because they act as unique object keys.

Press + to interact

let myObject = { 
    publicProperty: 'Value of myObject ["publicProperty"]'
};
myObject[ symbol1 ] = 'Value of myObject [symbol1]';
myObject[ symbol2 ] = 'value of myObject [symbol2]';
console.log( myObject );
//> Object
//>    publicProperty: "Value of myObject[ "publicProperty" ]"
//>    Symbol(): "Value of myObject[ symbol1 ]"
//>    Symbol(): "value of myObject[ symbol2 ]"
//>    __proto__: Object
console.log( myObject[ symbol1 ] );
//> Value of myObject[ symbol1 ]

When console logging ...