Learning modern JavaScript

JavaScript has different versions. Some of these are ES3, ES5, ES2015 (also known as ES6), and ES2016. Recent versions are named after the year in which they were introduced. Depending on the environment for which you write code, some features might be or might not be supported. TypeScript can compile new features of JavaScript to an older version of JavaScript. That is not possible with all features, however.

Recent web browsers support ES5 and they are working on ES2015.

We will first take a look at the constructs that can be transpiled to older versions.

let and const

ES2015 has introduced let and const. These keywords are alternatives to var. These prevent issues with scoping, as let and const are block scoped instead of function scoped. You can use such variables only within the block in which they were created. It is not allowed to use such variables outside of that block or before its definition. The following example illustrates some dangerous behavior that could be prevented with let and const:

alert(x.substring(1, 2)); 
var x = "lorem"; 
for (var i = 0; i < 10; i++) { 
  setTimeout(function() { 
    alert(i); 
  }, 10 * i); 
} 

The first two lines give no error, as a variable declared with var can be used before its definition. With let or const, you will get an error, as expected.

The second part shows 10 message boxes saying 10. We would expect 10 messages saying 0, 1, 2, and so on up to 9. But, when the callback is executed and alert is called, i is already 10, so you see 10 messages saying 10.

When you change the var keywords to let, you will get an error in the first line and the messages work as expected. The variable i is bound to the loop body. For each iteration, it will have a different value. The for loop is transpiled as follows:

var _loop_1 = function(i) { 
    setTimeout(function () { 
        alert(i); 
    }, 10 * i); 
}; 
for (var i = 0; i < 10; i++) { 
    _loop_1(i); 
} 

A variable declared with const cannot be reassigned, and a variable with let can be reassigned. If you reassign a const variable, you get a compile error.

Classes

As of ES2015, you can create classes easily. In older versions, you could simulate classes to a certain extent. TypeScript transpiles a class declaration to the old way to simulate a class:

class Person { 
  age: number; 
   
  constructor(public name: string) { 
     
  } 
   
  greet() { 
    console.log("Hello, " + this.name); 
  } 
} 
 
const person = new Person("World"); 
person.age = 35; 
person.greet(); 

This example is transpiled to the following:

var Person = (function () { 
    function Person(name) { 
        this.name = name; 
    } 
    Person.prototype.greet = function () { 
        console.log("Hello, " + this.name); 
    }; 
    return Person; 
}()); 
var person = new Person("World"); 
person.age = 35; 
person.greet(); 

When you prefix an argument of the constructor with public or private, it is added as a property of the class. Other properties must be declared in the body of the class. This is not per the JavaScript specification, but needed with TypeScript for type information.

Arrow functions

ES6 introduced a new way to create functions. Arrow functions are function expressions defined using =>. Such function looks like the following:

(x: number, y: boolean): string => { 
  statements 
} 

The function expression starts with an argument list, followed by an optional return type, the arrow (=>), and then a block with statements. If the function has only one argument without type annotation and no return type annotation, you may omit the parenthesis: x => { ... }. If the body contains only one return statement, without any other statements, you can simplify it to (x: number, y: number) => expression. A function with one argument and only a return statement can be simplified to x => expression.

Besides the short syntax, arrow functions have one other major difference with normal functions. Arrow functions share the value of this and the position where it was defined; this is lexically bound. Previously, you would store the value of this in a variable called _this or self, or you would fix the value using .bind(this). With arrow functions, that is not required any more.

Function arguments

It is possible to add a default value to an argument:

function sum(a = 0, b = 0, c = 0) { 
  return a + b + c; 
} 
sum(10, 5); 

When you call this function with less than three arguments, it will set the other arguments to 0. TypeScript will automatically infer the types of a, b, and c based on their default values, so you do not have to add a type annotation there.

You can also define an optional argument without a default value: function a(x?: number) {}. The argument will then be undefined when it is not provided. This is not standard JavaScript, but only available in TypeScript.

The sum function can be defined even better, with a rest argument. At the end of a function, you can add a rest argument:

function sum(...xs: number[]) { 
  let total = 0; 
  for (let i = 0; i < xs.length; i++) total += xs[i]; 
  return total; 
} 
sum(10, 5, 2, 1); 

Array spread

It is easier to create arrays in ES6. You can create an array literal (with brackets), in which you use another array. In the following example, you can see how you can add an item to a list and how you can concatenate two lists:

const a = [0, 1, 2]; 
const b = [...a, 3]; 
const c = [...a, ...b]; 

A similar feature for object literals will probably be added to JavaScript too.

Destructuring

With destructuring, you can easily create variables for properties of an object or elements of an array:

const a = { x: 1, y: 2, z: 3 }; 
const b = [4, 5, 6]; 
 
const { x, y, z } = a; 
const [u, v, w] = b; 

The preceding is transpiled to the following:

var a = { x: 1, y: 2, z: 3 }; 
var b = [4, 5, 6]; 
 
var x = a.x, y = a.y, z = a.z; 
var u = b[0], v = b[1], w = b[2]; 

You can use destructing in an assignment, variable declaration, or argument of a function header.

Template strings

With template strings, you can easily create a string with expressions in it. If you would write "Hello, " + name + "!", you can now write Hello ${ name }!.

New classes

ES2015 has introduced some new classes, including Map, Set, WeakMap, WeakSet, and Promise. In modern browsers, these classes are already available. For other environments, TypeScript does not automatically add a fallback for these classes. Instead, you should use a polyfill, such as es6-shim. Most browsers already support these classes, so in most cases, you do not need a polyfill. You can find information on browser support at http://caniuse.com.