ES6: ECMAscript Strikes Back

Classes

Classes provide a new syntactical way to create classes and subclasses that is both intuitive and easy to follow. It is important to note that the new class feature offers no new functionality or performance gains (as of yet). Everything you can do with classes you can also do with the current pseudoclassical instantiation pattern and prototype chaining. Classes, however, will make classing and subclassing much easier.

class Car{ 
constructor(make, model, location){
this.make = make;
this.model = model;
this.location = location;
}

driveTo(destination){
this.location = destination;
}
}
class Car{ 
constructor(...){ ... }
get gasLevel(){
return this.gasLevel;
}
set gasLevel(level){
this.gasLevel = level
}
}
var car = new Car(...)
car.gasLevel // 40%
car.gasLevel = 100%
car.gasLevel // 100%
class Motorcycle extends Car { 
constructor(){
super('BMW', "S1000", "San Francisco")
}
}

Symbols and Private Variables

Symbols offer an exciting way to handle data that you don’t necessarily want to share. It creates a seemingly random set of letters and numbers that represent a key. A symbol is naturally innumerable, meaning it won’t show up when you iterate through keys or check for length, and a symbol cannot be changed in memory.

const vinNumber = Symbol(); 
const licensePlate = Symbol();
let mileage = Symbol();
class Car{
constructor(vin, license, mileage){
this[vinNumber] = vin;
this[licensePlate] = license;
this[mileage] = mileage;
}
}
var car = new Car(...)
console.log(car)
// logs Car{ // __$85109827$23$__ : 2304823432 // __$28934823$12$__ : 23DEH239 // __$59202033$62$__ : 40239 //}
get mileage(){ 
return this[mileage]
}
console.log(car.mileage) // 40239
(function(){ 
const vinNumber = Symbol();
const licensePlate = Symbol();
let mileage = Symbol();
class Car{ constructor(vin, license, mileage){
this[vinNumber] = vin;
this[licensePlate] = license;
this[mileage] = mileage;
}
get mileage(){
return this[mileage]
}
})()

Default Parameters

How many times have you had to write a function like this?

function example(a){ 
a = a || 3
}
function example(a = 3){ 
console.log(a);
}
example("ES6") // ES6
example("") // ""
example() // 3
example(undefined) // 3
function example(a = getValue(), b, c=3){ }
function example(a=4, b, c=3, ...rest = 2){} //ERROR

Collections

ES6 is going to offer three new collections that are going to offer significant improvements to the way we do things.

var set = new Set(); 
set.has(1); // false
set.add(1);
set.has(1); //true
set.clear();
set.has(1) //false
set.add(1)
set.add(2)
set.size; //2
set.delete(2)
set.size; //1
set.add(1) 
set.size //1
set.add(1)
set.size //1
set.add(1) 
set.has(1) //true
set.has('1') //false
set.add('1')
set.size; //2
var example = new Set(['a', 'b', 'c', 'd']); 
for(let element of example){
console.log(element); //logs 'a', 'b', 'c', 'd'
}
var map = new Map(); 
map.set("food", "apples")
map.has("food") //true
map.size //1
map.set(1, "Hello");
map.has('1') //false
var user = {name: "Quest Henkart", age: 27}; var userContactInfo = new Map(); 
userContactInfo.set(user, ['qhenkart@gmail.com', 'www.questhenkart.com'])

userContactInfo.get(user) // ['qhenkart@gmail.com', 'www.questhenkart.com']
var user1 = {name: "John"} 
var user2 = {name: "John"}
var userTest = new Map();
userTest.set(user1, "test")
userTest.get(user2) //undefined
userTest.get(user1) //"test"
  1. No primitive Keys
  2. No .Size method
"A weakmap holds only a weak reference to a key, which means the reference inside of the weakmap doesn't prevent garbage collection of that object" --Nicolas Zakas @slicknet
var weakmap = new WeakMap(); 
weakmap.set(user, [...])

--

--

Software Architect

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store