There are two important Rules, which you need to understand if you're working with ES6 Modules:

Modules are always in Strict Mode (no need to define "use strict") Modules don't have a shared, global Scope. Instead each Module has its own Scope

How it works

Table Of Contents

Exporting and importing Example one

Exporting - external.js


//Method one - Exporting
//Exporting values and functions by adding the export keyword before
//export let keyValue = 1000;
//export let test = () => console.log("test function")

//console.log(keyValue);

//Method two - Exporting
//Alternatively you can export as follows

let keyValue = 1000;
let test = () => console.log("test function")

console.log(keyValue);

export {keyValue, test};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Importing - app.js


'use strict';

// Write ES6 code here...

//Importing Values
import { keyValue, test } from './external.js';


test();

1
2
3
4
5
6
7
8
9
10
11

Exporting and importing Default Values

you can only export one default value
you can use aliases

Exporting - external.js

//ES6 Modules and classes - Additional Syntax

let keyValue = 1000;
let test = () => console.log("test function")

let ab = 'Some Default Value';


export {keyValue, test};

//The 'Default' Keyword
export default ab;

1
2
3
4
5
6
7
8
9
10
11
12
13

Importing - app.js

'use strict';

// Write ES6 code here...

//Importing Default values
//import ab from './external.js'
//Importing Values
///import { keyValue, test } from './external.js';

//Importing as aliases
//import { keyValue as ValueTwo, test } from './external.js';

//Importing default and non default
//import ab, { keyValue, test } from './external.js';

//Importing All
import * as imported from 'external.js';

console.log(imported.ab);
console.log(imported.keyValue);
imported.test();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Modules - Strict Mode and Global Scope

Class Basics

You can think of classes as blueprints in javascript, you can add things such as methods, values, and more

Basic Example


//es6 classes
//Classes are blueprints 
class Person {
  greet(){
    console.log('hello');
  }
}

let person = new Person();

//console.log(person.greet())
person.greet()

1
2
3
4
5
6
7
8
9
10
11
12
13

Class Constructor Example

//es6 classes
//Constructors

//You can give classes properties within constructors
class Person {
  constructor() {
    this.name = "Violet"
  }
  
  greet(){
    console.log('Booshys baby sister is ' + this.name);
  }
}

let person = new Person();

//console.log(person.greet())
person.greet()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Passing values into Class Constructors example


//es6 classes

//Define the name variable as dynamic
class Person {
  constructor(name) {
    this.name = name
  }
  
  greet(){
    console.log('Booshys baby sister is ' + this.name);
  }
}

//Create a new instance of the Person class, and pass in the name value
let person = new Person('Violet');

//console.log(person.greet())
person.greet()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Classes & Prototypes

Example

//es6 Classes and Prototypes

class Person {
  constructor(name) {
    this.name = name
  }
  
  greet(){
    console.log('Booshys baby sister is ' + this.name);
  }
}

let person = new Person('Violet');

//Log the prototype of the class will log [object Object] {...}
console.log(person.__proto__)

//Compairing
console.log(person.__proto__ === Person.prototype)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Inheritance

ES6 allows you to override, extend and manipulate your classes When extending classes you have access to the methods within the super class Extends allows us to use all the features and methods that the parent class creates Example : Extending the Person class

//es6 Classes and Inheritence


class Person {
  constructor(name) {
    this.name = name
  }
  
  greet(){
    console.log('Booshys baby sister is ' + this.name);
  }
}

//Adding, extending and overriding
class Violet extends Person {
  
}


let baby = new Violet('Violet');

//Because the class Violet extends the person class you still have access to the greet method
baby.greet();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Example : Adding to the Babies Class

Note If you want to use a constructor in a class you must also call the constructor in the parent class


//This example will throw an error because we havent called the parent class constructor


class Person {
  constructor(name) {
    this.name = name
  }
  
  greet(){
    console.log('Booshys baby sister is ' + this.name + ' and I am ' + this.age);
  }
}

//Adding, extending and overriding
class Violet extends Person {
  constructor(age) {
    this.age = age;
  }
  
}


let baby = new Violet(27);

//Because the class Violet extends the person class you still have access to the greet method
baby.greet();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Example : Using the super keyword to call the parent class constructor

//es6 Classes and Inheritence


class Person {
  constructor(name) {
    this.name = name
  }
  
  greet(){
    console.log('Booshys baby sister is ' + this.name + ' and I am ' + this.age);
  }
}

//Adding, extending and overriding
class Violet extends Person {
  constructor(age) {
    super('Violet');//Calling the parent constructor
    this.age = age;
  }
  
}


let baby = new Violet(27);

//Because the class Babies extends the person class you still have access to the greet method
baby.greet();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Example : Extending classes and using methods of the parent class

//es6 Classes and Inheritence


class Person {
  constructor(name) {
    this.name = name
  }
  
  greet(){
    console.log('Booshys baby sister is ' + this.name + ' and I am ' + this.age);
  }
}

//Adding, extending and overriding
class Violet extends Person {
  constructor(age) {
    super('Violet');//Calling the parent constructor
    this.age = age;
  }
  
  //Adding Additional Methods
  greetTwice() {
    this.greet();
    this.greet();
    
  }
  
  //Alternatively you can use the super keyword
  //greetTwice() {
  //  super.greet();
  //  super.greet();
    
  //}
  
}


let baby = new Violet(27);

//Because the class Babies extends the person class you still have access to the greet method
baby.greetTwice();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

Inheritance & Prototypes

//es6 Classes, inheritence and Prototypes


class Person {
  constructor(name) {
    this.name = name
  }
  
  greet(){
    console.log('Booshys baby sister is ' + this.name + ' and I am ' + this.age);
  }
}

//Extends allows us to use all the features and methods that the parent class creates
class Violet extends Person {
  constructor(age) {
    super('Violet');//Calling the parent constructor
    this.age = age;
  }
  
  

  greetTwice() {
    super.greet();
    super.greet();
    
  }
  
}


let baby = new Violet(27);

//Logging the prototype of the Violet class
console.log(baby.__proto__ === Person.prototype);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Static Methods

Using the static keyword allows us to use methods without creating instances of a class


//es6 Static Methods

//Create a Helper Class
class Helper {
  static logTwice(message) {
    console.log(message);
    console.log(message);
  }
}

Helper.logTwice('Logged');

1
2
3
4
5
6
7
8
9
10
11
12
13

Classes & Modules

Getters & Setters

Getters

Getters are usefull for controlling what we actually return from a class, for instance returning the value in uppercase

To use getters, and setters you use the get and set reserved keywords, and also add the _ symobol;

Creating a basic getter Example


//es6 Getters and Setters

//Getters are usefull for controlling what we actually return from a class, for instance returning the value in uppercase

class Person{
  
  constructor(name) {
    this._name = name;
  }
  
  //Defining a Getter
  get name() {
    return this._name;
  }
  
  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Creating a basic setter Example


//es6 Getters and Setters

//Getters are usefull for controlling what we actually return from a class, for instance returning the value in uppercase

class Person{
  
  constructor(name) {
    this._name = name;
  }
  
  get name() {
    return this._name;
  }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Example : returning the uppercase, and using setters to check if the value exists and setting it if true


//es6 Getters and Setters

//Getters are usefull for controlling what we actually return from a class, for instance returning the value in uppercase

class Person{
  
  constructor(name) {
    this._name = name;
  }
  
  get name() {
    return this._name.toUpperCase();
  }

  set name(value) {
     if(value.length > 2) {
       this._name = value;
     }
     console.log('Names value didnt meet the requirements');
  }
  
  
}


//Using our class
let person = new Person('Annabelle');


console.log(person)

//Setting the value for name with the required name paramater length

person.name = 'Violet'

//Setting the value for name without the required name paramater length
//person.name = 'A'


console.log(person)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

Example : Using the getter

class Person{
  
  constructor(name) {
    this._name = name;
  }
  
  get name() {
    return this._name.toUpperCase();
  }

  set name(value) {
     if(value.length > 2) {
       this._name = value;
     }
     console.log('Names value didnt meet the requirements');
  }
  
  
}


//Using our class
let person = new Person('Annabelle');

//Setting the value for name with the required name paramater length

person.name = 'Violet'


//Using the getter to access the name value

console.log(person.name)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Extending Built-in Objects

//Extending Built-in Objects - Subclassing

//In ES6 we can overide, and extend the built in javascript objects such as arrays etc.

//Extending the built in Javascript Array Object
class ConvertableArray extends Array {
  convert() {
    let returnArray = [];
    this.forEach(value => returnArray.push('Converted!' + value));
    return returnArray;
  }
}

let numberArray = new ConvertableArray();
numberArray.push(1);
numberArray.push(2);
numberArray.push(3);

console.log(numberArray.convert());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

[List of extandable built in objects] - "https://kangax.github.io/compat-table/es6/"

Wrap up

Resources

← Class Basics Importing and Exporting →

Table Of Contents

Modules - Strict Mode and Global Scope

Class Basics

Classes & Prototypes

Inheritance

Inheritance & Prototypes

Static Methods

Classes & Modules

Getters & Setters

Extending Built-in Objects

Wrap up

Resources