Classes - ES5 vs ES6

README.md

JavaScript Classes - ES5 vs ES6

An example that shows the difference between creating a JavaScript class and subclass in ES5 and ES6.

Reference

es5.js

/**
 * Shape class.
 *
 * @constructor
 * @param {String} id - The id.
 * @param {Number} x  - The x coordinate.
 * @param {Number} y  - The y coordinate.
 */
function Shape(id, x, y) {
  this.id = id;
  this.setLocation(x, y);
}

/**
 * Set shape location.
 *
 * @param {Number} - The x coordinate.
 * @param {Number} - The y coordinate.
 */
Shape.prototype.setLocation = function(x, y) {
  this.x = x;
  this.y = y;
};

/**
 * Get shape location.
 *
 * @return {Object}
 */
Shape.prototype.getLocation = function() {
  return {
    x: this.x,
    y: this.y
  };
};

/**
 * Get shape description.
 *
 * @return {String}
 */
Shape.prototype.toString = function() {
  return 'Shape("' + this.id + '")';
};

/**
 * Circle class.
 *
 * @constructor
 * @param {String} id     - The id.
 * @param {Number} x      - The x coordinate.
 * @param {Number} y      - The y coordinate.
 * @param {Number} radius - The radius.
 */
function Circle(id, x, y, radius) {
  Shape.call(this, id, x, y);
  this.radius = radius;
}
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

/**
 * Get circle description.
 *
 * @return {String}
 */
Circle.prototype.toString = function() {
  return 'Circle > ' + Shape.prototype.toString.call(this);
};

// test the classes
var myCircle = new Circle('mycircleid', 100, 200, 50); // create new instance
console.log(myCircle.toString()); // Circle > Shape("mycircleid")
console.log(myCircle.getLocation()); // { x: 100, y: 200 }

es6.js

/**
 * Shape class.
 *
 * @constructor
 * @param {String} id - The id.
 * @param {Number} x  - The x coordinate.
 * @param {Number} y  - The y coordinate.
 */
class Shape {
  constructor(id, x, y) {
    // constructor syntactic sugar
    this.id = id;
    this.setLocation(x, y);
  }

  /**
   * Set shape location.
   *
   * @param {Number} - The x coordinate.
   * @param {Number} - The y coordinate.
   */
  setLocation(x, y) {
    // prototype function
    this.x = x;
    this.y = y;
  }

  /**
   * Get shape location.
   *
   * @return {Object}
   */
  getLocation() {
    return {
      x: this.x,
      y: this.y
    };
  }

  /**
   * Get shape description.
   *
   * @return {String}
   */
  toString() {
    return `Shape("${this.id}")`;
  }
}

/**
 * Circle class.
 *
 * @constructor
 * @param {String} id     - The id.
 * @param {Number} x      - The x coordinate.
 * @param {Number} y      - The y coordinate.
 * @param {Number} radius - The radius.
 */
class Circle extends Shape {
  constructor(id, x, y, radius) {
    super(id, x, y); // call Shape's constructor via super
    this.radius = radius;
  }

  /**
   * Get circle description.
   *
   * @return {String}
   */
  toString() {
    // override Shape's toString
    return `Circle > ${super.toString()}`; // call `super` instead of `this` to access parent
  }
}

// test the classes
var myCircle = new Circle('mycircleid', 100, 200, 50); // create new instance
console.log(myCircle.toString()); // Circle > Shape("mycircleid")
console.log(myCircle.getLocation()); // { x: 100, y: 200 }

class Shape(id, x, y) {
^

SyntaxError: Unexpected token (
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Function.Module.runMain (module.js:605:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3

When running the es6 version...

- class Shape(id, x, y) {
+ class Shape {

is it correct?

@patw0929 yes

In ES6 version there are two syntax issues:

(1) class Shape(id, x, y) { should be class Shape { at this line as pointed out by @SakoMe.
(2) function Circle extends Shape { should be class Circle extends Shape { at this line.

Please visit my javascript (es5) class manager:
https://gist.github.com/samir64/a1ab7678bd9bda66dbc157d99fc59482