Placeholder for Guidelines and Best Practices.

ES6 FAQ

1) What is ES6, and where's the best place to learn about it?

ES6 is short for ESMAScript 6. ES6 is a scripting language in it's 6th release, which has been standardized by ESMA International. Javascript is the implementation name for ES6. I will use the words Javascript and ES6 interchangeably.

Beginners Start Here: JS Introduction and here JS Tutorial

For a more in depth learning experience I would suggest taking the following Code Academy course: Code Academy: JS

To learn more about the new features that ES6 has introduced in comparison to ES5 you can look at the following website: ES6 Features

If you are new to Javascript please look at the above materials prior to anything else, otherwise you will have a difficult time understanding the below information.

2) How do I work with classes? Can I make a member variable private or public? What about accessors? How do constructors work?

Classes are new to ES6 and as you will see look very similar to code written in an OOP language. In ES5 this is how you would have had to deal with them:

var Shape = function (id, x, y) {
    this.id = id;
    this.move(x, y);

};
Shape.prototype.move = function (x, y) {
    this.x = x;
    this.y = y;
};

And now with ES6 it is much more intuitive:

class Shape { 
    constructor (id, x, y) {   
        this.id = id   
        this.move(x, y)   
    }   
    move (x, y) {   
        this.x = x   
        this.y = y   
    }   
}  

Here is an example of using a Constructor in Javascript:

class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        toString() {
            return '(' + this.x + ', ' + this.y + ')';
        }
   }

What about using the Constructor?:

> var p = new Point(25, 8);
> p.toString()
Result: '(25, 8)'

How about Getters(Accessors) and Setters?:

class Person {
    constructor(name) {
        this._name = name; //Not that this is not Private in Javascript
    }

    get name() {
        return this._name.toUpperCase();
    }

    set name(newName) {
        this._name = newName;
    }

    makeawesome() {
        console.log(this._name + ' is awesome!');
    }
}
     
let myname = new Person('Alex');
console.log(myname.name);  // Outputs 'ALEX'
myname.makeawesome(); // Outputs 'ALEX is awesome!'  

Classes written in Javascript can ONLY contain methods, they cannot have private variables. In order to make something truely private you will need to place a Class inside a Module and use a Weakmap, more on this later! To read about making variables private within Functions I suggest you start here: Private Variables and then I suggest you go here: Classes and Privacy

Learn more about working with classes, accessors, here: Class Information or here: Class Tutorial

3) Are there any current browsers that don't support ES6? Are there any features that are less well supported that I should be aware of?

There is not a specific browser that has zero support for ES6 and alternatively there isn't a browser that fully supports it 100%. Internet Explorer, specifically IE 11, is a common browser where only 16% of ES6 features are supported, therefore don't use it. If I had to suggest a browser to use it would be the very latest versions of Chrome and Firefox.

Take a look at the following website's Desktop Browser portion to see the matrix of ES6 features compared with several browser: ES6 Browser Compatibility

If necessary we can use Babel, a transpiler, to take code written in ES6 and translate it to ES5, which will allow us to use more browsers. Babel

4) When I've stored data in data structures, I've always just used an object as an associative array. Are there advantages to using ES6 collection classes instead?

ES6 introduces 4 collection classes: Set, Map, Weakset, and Weakmap. This article summarizes the characteristics and advantages of each: Collection Classes in JS

In short the advantages to uses these classes are that Set and Map are iterable and contain methods and in ES6 plain objects are not iterable and cannot have methods. Their weak counterparts only allow objects to be placed within the collections and they are not iterable. In order to get something out of a weak collection you have to ask for it with the associated key. This is where some level of privacy can be achieved!

5) What are modules, and why would I want to use them?

The best way to describe Modules is to think of them as files. Prior to ES6 it wasn't possible to Import and Export values to and from different files easily. In ES6 you can do a Named Export or a Default Export. With Named Exports you define the Name of the Objects that are being Exported and with Default Export you do not have to define the Name. In general the ES6 community recommends using Default Exports, mostly because the syntax is similar.

Here is an example of the Named Export and Import functionality in ES6:

Named Export:

//foobar.js

function foo() { return 'foo'; }
function bar() { return 'bar'; }
export { foo, bar };

2 Ways to Import:

//main.js

import {foo, bar} from 'foobar';
foo();
bar();

import * as lib from 'foobar';
lib.foo();
lib.bar();

Here is an example of Default Export and Importing:

Default Export:

//foobar.js

export default function foo() {
  return 'default foo';
};

export function bar() { return 'bar'; };

2 ways to Import:

//main.js

// These will only get you foo
import mylib from 'foobar';
import {default as mylib} from 'foobar';

// This will get you both foo and bar
import mylib, {bar} from 'foobar';

Take a look at the following article to get a grasp of these concepts and how to use Export and Imports: Module Examples

Comparison between ES5 and ES6: Module Export and Import

6) Should the code I'm writing be exported as a module?

This is best explained with the following quote taken from this book:

"There are a number of reasons why authors divide their books into chapters and sections. These divisions make it easier for a reader to see how the book is built up and to find specific parts that they are interested in. They also help the author by providing a clear focus for every section.

The benefits of organizing a program into several files or modules are similar. Structure helps people who aren’t yet familiar with the code find what they are looking for and makes it easier for the programmer to keep things that are related close together."

7) Can existing libraries (Aurelia, Bootstrap, etc.) be imported as modules? Do they have to be written in ES6?

Yes they can be imported as modules. I am currently not sure if they have to be written in ES6, will need to discuss in class and do some more research.