Modern JavaScript

Classes

Constructors

1. Code:

   class Person {
     first;
     last;
     constructor(first, last) {
       this.first = first;
       this.last = last;
     }
   }
   
   let person = new Person("Ron", "Swanson");
   console.log(person.first + " " + person.last);

2. Result:

   Ron Swanson

Methods

1. Code:

   class Person {
     first;
     last;
     constructor(first, last) {
       this.first = first;
       this.last = last;
     }
     getFullName() {
       return this.first + " " + this.last;
     }
   }
   
   let person = new Person("Ron", "Swanson");
   console.log(person.getFullName());

2. Result:

   Ron Swanson

Class Fields

Class Fields are only a stage-3 proposal so Babel's preset environment will use an additional plugin automatically.

The proposed feature of class fields is commonly used in React projects and is included in Create React App's default configuration.

Class field declarations for JavaScript

This proposed feature is available in Babel without any additional configuration.

This proposed feature is available in TypeScript without any additional configuration.

1. Code:

   class Person {
     first;
     last;
   }
   
   let person = new Person();
   person.first = "Tom";
   person.last = "Haverford";
   
   console.log(person.first + " " + person.last);

2. Result:

   Craig McKeachie

Scope (var, let, const)

var

1. Code

   var numbers = [1, 2, 3, 4];
   
   for (var counter = 0; counter < numbers.length; counter++) {
     console.log(numbers[counter]);
   }
   
   console.log("at end: " + counter);

2. Result

   1
   2
   3
   4
   at end: 4

let

1. Code

   let numbers = [1, 2, 3, 4];
   
   for (let counter = 0; counter < numbers.length; counter++) {
     console.log(numbers[counter]);
   }
   
   console.log("at end: " + counter);

2. Result

   console.log('at end: ' + counter);
                           ^
   
   ReferenceError: counter is not defined

const

1. Code

   const a = 1;
   a = 2;

2. Result

   Error: "a" is read-only

Arrow Functions

1. Function Code

   let numbers = [1, 2, 3, 4];
   //verbose
   numbers.forEach(function (n) {
     console.log(n);
   });

2. Result

   1
   2
   3
   4

3. Arrow Function Code

   let numbers = [1, 2, 3, 4];
   numbers.forEach((n) => console.log(n));

4. Result

   1
   2
   3
   4

Modules

First Module

1. Create file src\my-module.[js|ts]

2. Add the following code to src\my-module.[js|ts]

   export function myFunction() {
     return "myFunction was run.";
   }

3. Code in program.[js|ts]

   • Auto import doesn't work in JavaScript, you need to use TypeScript

   import { myFunction } from "./my-module";
   console.log(myFunction());

4. Result

   myFunction was run.

Another Module

1. Code in my-module.[js|ts]

   //my-module.js
   export function myFunction() {
     return "myFunction was run.";
   }
   
   function myPrivateFunction() {
     return "myPrivateFunction was run.";
   }
   
   let myObject = {
     myName: "I can access myObject's name",
     myMethod: function () {
       return "myMethod on myObject is running.";
     },
   };
   
   export { myObject };
   
   export const myPrimitive = 55;
   
   export class MyClass {
     myClassMethod() {
       return "myClassMethod on myClass is running.";
     }
   }

2. Code in program.[js|ts]

   import { myFunction, myObject, myPrimitive, MyClass } from "./my-module";
   
   console.log(myFunction());
   
   console.log(myObject.myName);
   console.log(myObject.myMethod());
   
   console.log(myPrimitive);
   
   let myClass = new MyClass();
   console.log(myClass.myClassMethod());

3. Result

   myFunction was run.
   I can access myObject's name
   myMethod on myObject is running.
   55
   myClassMethod on myClass is running.

Template Literals

1. Code

   let verb = "ate";
   let noun = "food";
   let sentence = `I ${verb} ${noun}. 
   I enjoyed it.`;
   console.log(sentence);

2. Result

   I ate food.
   I enjoyed it.

Default, Rest, Spread

Default

1. Code

   function add(x, y = 2) {
     return x + y;
   }
   
   console.log(add(1, 1) === 2);
   console.log(add(1) === 3);

2. Result

   true
   true

Rest

1. Code

   function printArguments(a, b, ...theArguments) {
     console.log("a:", a);
     console.log("b:", b);
     for (let argument of theArguments) {
       console.log(argument);
     }
   }
   
   printArguments("a", "b", "c", "d");

2. Result

   a: a
   b: b
   c

Spread

1. Code

   function add(x, y, z) {
     return x + y + z;
   }
   
   // Pass each elem of array as argument
   console.log(add(...[1, 2, 3]));

2. Result

   6

Destructuring

Objects

1. Code

   let person = {
     first: "Thomas",
     last: "Edison",
     age: 5,
     twitter: "@tom",
   };
   
   let { first, last } = person;
   console.log(first);
   console.log(last);

2. Result

   Thomas
   Edison

Assignment is left to right with an object literal.

1. Code

   let person = {
     first: "Thomas",
     last: "Edison",
     age: 5,
     twitter: "@tom",
   };
   
   let { first: firstName, last: lastName } = person;
   console.log(firstName);
   console.log(lastName);

2. Result

   Thomas
   Edison

Arrays

1. Code

   let numbers = [1, 2, 3];
   
   let [a, b, c] = numbers;
   console.log(a);
   console.log(b);
   console.log(c);

2. Result

   1
   2
   3

If you don't need an item just skip that item in the assignment.

1. Code

   let numbers = [1, 2, 3];
   
   let [, b, c] = numbers;
   // console.log(a);
   console.log(b);
   console.log(c);

2. Result

   2
   3

Optional Parameters

1. Code

   function buildName(first: string, last: string, middle?: string) {
     if (middle) {
       return `${first} ${middle} ${last}`;
     } else {
       return `${first} ${last}`;
     }
   }
   
   console.log(buildName("Craig", "McKeachie"));
   console.log(buildName("Craig", "McKeachie", "D."));

2. Result

   Craig McKeachie
   Craig D. McKeachie

Object Initializer

1. Code

   export {}; //this line only necessary when using TypeScript
   const name = "Leslie";
   
   const user = {
     name: name,
   };
   
   console.log("user ", user.name);
   
   const user1 = {
     name,
   };
   
   console.log("user1 ", user.name);

   More Information on why export is necessary when using TypeScript

2. Result

   user  Leslie
   user1  Leslie

Reference

• ES6 Features
• Learn ES2015/6
• How to Learn ES6