QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home ECMAScript 6 Complete Tutorial

ECMAScript 6 Complete Tutorial

ecmascript 6

JavaScript is a superset of ECMAScript scripting language. ECMAScript forms the language base for JavaScript, JScript and ActionScript. In this tutorial series we will look at ECMAScript 6, a new version of ECMAScript providing a new set features and fixes to JavaScript.

ECMAScript6 is also called as “ES6″, “Harmony” and “ES.next”.

Categorizing ES6 Features

All the new features of ES6 can be categorized in 7 categories. Here is the list of categories:

  1. Variables and Parameters
  2. Classes
  3. Proxies
  4. Build-in Objects and Prototype based features
  5. Promises
  6. Reflect API
  7. Modules
  8. Iterators and Generators

ECMAScript 6 Compatibility

Kangax has created a ES6 compatibility table which lists the ES6 features and browsers which support or don’t support them.

You can also use caniuse.com to find the support of various ES6 features on various different browsers.

Running ECMAScript 6 in an Incompatible Browser

If you are writing ES6 for your website on development phase then you can embed the Traceur compiler in your webpages which will compile the ES6 to simple browser supportable JavaScript code on the fly in the browser.

Here is how to embed Traceur in your website

<!doctype html>
<html>
    <head>...</head>
    <body>
        ...

        <!-- Load Traceur Compiler -->
        <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
        <!-- Bootstrap.js finds script tags with type module and compiler them using the interfaces provided by traceur.js -->
        <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
        <script type="module">
            //Place ES6 code here
        </script>
    </body>
</html>

On production site compiling ES6 to browser supportable JS on every page load can be a resource & time consuming task and can effect the site performance. Its recommend that you use Traceur’s node compiler to compile once for all time and embed the compiled JS in your pages.

If you don’t like this compile idea then you can use ES6 polyfills. Polyfill is not available for every ES6 feature.

This series just provides an overview of some important and most used ES6 features. If you want to learn ES6 in depth they you can get my book Learning ECMAScript 6 which is published by Packt.

Here is the series:

  • JavaScript "let" Keyword

    "let" keyword was introduced in ES6. It lets you define block scope(bracket scope) variables in JavaScript. Initially JavaScript only supported functi ...Continue Reading

  • JavaScript "const" Keyword

    "const" keyword was introduced in ES6. It lets you define read only variables using JavaScript. Variables created using "const" are block scoped(or br ...Continue Reading

  • JavaScript Function Return Multiple Values

    There were many different ways purposed by JavaScript developers for returning multiple values in an function. But ECMAScript 6 has come up with an ea ...Continue Reading

  • Default Function Arguments Values in JavaScript

    ES6 provides a new syntax that can be used to define default values to function parameters: function myFunction(x = 1, y = 2, z = 3) { con ...Continue Reading

  • JavaScript "..." Operator

    ES6 introduced "..." operator which is also called as spread operator. When "..." operator is applied on an array it expands the array into multiple v ...Continue Reading

  • Python like Multiline Strings In JavaScript

    One of the most loved python language features is multiline strings. In JavaScript there is actually no support for multiline strings. But by doing so ...Continue Reading

  • JavaScript "class" Keyword

    ECMAScript 6 introduced "class" keyword to define classes in JavaScript. Earlier to ES6, we had to use constructor function. Here is an example cod ...Continue Reading

  • JavaScript Arrow "=>" Function

    ECMAScript 6 provides a new way to create functions which just contain one line of statement. This new type of function is called lambda or arrow func ...Continue Reading

  • JavaScript "for of" Loop Tutorial

    for of loop was introduced in ES6 which allows you to easily iterate over elements of an collection.for of iterates over the values of elements of a c ...Continue Reading

  • JavaScript "yield" Keyword and "function*()" Syntax

    ECMAScript 6 specification introduced a new JavaScript feature called as JavaScript Generators. JavaScript's yield keyword and function*() syntax toge ...Continue Reading

  • JavaScript "0o" Literal

    "0o" is a new way of creating a number using octal value in ES6. Earlier to ES6, JS developers had to use "0" in front of numbers to specify its a oct ...Continue Reading

  • JavaScript "0b" Literal

    "0b" lets you create a number using binary of the number directly. Developers usually provide number in decimal representation and it was converted to ...Continue Reading

  • JavaScript "Set" Object

    JavaScript "Set" object is a collection of unique keys. Keys are object references or primitive types. Arrays can store duplicate values but Sets ...Continue Reading

  • Difference between Set and WeakSet in JavaScript

    JavaScript Set and WeakSet objects allows you to store collection of unique keys. But there are some key differences between them. Here are the differ ...Continue Reading

  • JavaScript "Map" Object

    JavaScript “Map” object is a collection of unique keys and corresponding values. Keys and Values can be object references or primitive types. 2 ...Continue Reading

  • Difference between "Map" and "WeakMap" in JavaScript

    JavaScript "Map" and "WeakMap" objects allows you to store collection of unique keys and their corresponding values. But there are some key difference ...Continue Reading

  • Creating JavaScript Modules

    In nutshell JavaScript modules are just a way of packaging related JavaScript code in its own scope which can be consumed by other JavaScript programs ...Continue Reading

  • ES6 Reflect API Tutorial

    Object reflection is an language ability to able to inspect and manipulate object properties at runtime. JavaScript already had been supporting APIs f ...Continue Reading

Feb 13, 2015Narayan Prusty
Intel XDK Complete TutorialPremium WordPress Plugins
Comments: 5
  1. szobek
    3 years ago

    Very great tutorial

    ReplyCancel
  2. Kannan D
    4 years ago

    good one . Thanks

    ReplyCancel
  3. Dudi
    4 years ago

    Very nice tutorial!

    ReplyCancel
  4. jsGeek
    5 years ago

    Nice Post!!!

    ReplyCancel
  5. laksjd
    5 years ago

    HI dude

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 years ago 6 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Categorizing ES6 Features
  • ECMAScript 6 Compatibility
  • Running ECMAScript 6 in an Incompatible Browser
Related Articles
  • HTML Script Tag Tutorial with Examples
  • ES6 Reflect API Tutorial
  • Python like Multiline Strings In JavaScript
  • JavaScript Function Return Multiple Values
  • JavaScript “yield” Keyword and “function*()” Syntax
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license