ES6 of the Week

This Week's Episode:

class syntax

Background

• Unlike many other languages (Java, Ruby, etc), JavaScript does not have class-based concepts built in
• JavaScript uses prototypal inheritance, rather than class-based inheritance
• ES6 introduces the class keyword, similar to other languages to make it more intuitive to "create" classes

Class Syntax

• syntactic sugar for writing constructor functions that helps eliminate some boilerplate
• familiar to developers coming from other languages

• adding new functionality - behind the scenes, the behavior is the same as a constructor function
• replacing prototypal inheritance somehow

What it is:

What it isn't:

Old dog...

'use strict';

function Dog (name, breed) {
    this.name = name;
    this.breed = breed;
}

// instance methods
Dog.prototype.bark = function () {
    console.log('arf!');
};
Dog.prototype.sayName = function () {
    console.log('Hi, my name is ', this.name); 
};

// static methods
Dog.fetchAll = function () {
    return $http.get('/api/dogs')
        .then(res => res.data)
	.catch(console.error);
};

const ben = new Dog('Ben', 'pitbull');
ben.bark(); // arf!

New tricks!

class Dog {
    constructor (name, breed) {
        this.name = name;
	this.breed = breed;
    }
	
    sayName () {
	console.log('Hi, my name is ', this.name);
    }
	
    bark () {
        console.log('arf!');
    }
	
    static fetchAll () {
        return $http.get('/api/dogs')
	    .then(res => res.data)
	    .catch(console.error);
    }
}

const ben = new Dog('Ben', 'pitbull');
ben.bark() // arf!

Inheritance

• Inheritance, as we've seen, is sort of a pain in JavaScript
  • Using ParentClass.call in the constructor, Object.create, re-assigning ChildClass.prototype.constructor...
• Using ES6 class syntax, all of that is gone!

Old pattern

'use strict';

function Animal (name) {
    this.name = name;
}
Animal.prototype.sayName = function () {
    console.log('Hi, my name is ', this.name);
};

function Dog (name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}
Dog.prototype.bark = function () {
    console.log('arf!');
};

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

"Super" inheritance

'use strict';

class Animal {
    constructor (name) {
        this.name = name;
    }
	
    sayName () {
	console.log('Hi, my name is ', this.name);
    }
}

class Dog extends Animal {
    constructor (name, breed) {
        super(name);
	this.breed = breed;
    }
	
    bark () {
	console.log('arf!');
    }
}

Still constructor functions!

'use strict';

class Dog {
    constructor (name, breed) {
        this.name = name;
	this.breed = breed;
    }
}

// totally fine!
Dog.prototype.sayName = function () { /** etc */ }

console.log(typeof Dog) // "function"

Summary

• JavaScript class keyword eliminates the need for some awkward patterns when writing constructors for objects
• It's very important to remember that behind the scenes, JavaScript is still prototypal, and classes are still constructor functions
• • Especially if you end up working with developers coming from a different language - these look like the classes that they're used to, but they're still not classes in the same sense as Java, Ruby, etc.
  • Class-based OO-programming is not the only game in town

Resources

• ES6: http://es6-features.org/
• YDKJS: https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/apA.md
• Mozilla docs:
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes