Classes vs Prototype vs Functional Approach

class_vs_proto_vs_functional.js

/**
|--------------------------------------------------
| CLASSES
|--------------------------------------------------
*/

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  moveBy(dx, dy) {
    this.x += dx;
    this.y += dy;
  }
}

const point = new Point(0, 0);
point.moveBy(5, 5);
point.moveBy(-2, 2);

console.log('====================================');
console.log([point.x, point.y]);
console.log('====================================');

/**
|--------------------------------------------------
| PROTOTYPE
|--------------------------------------------------
*/

function PointProto(x, y) {
  this.x = x;
  this.y = y;
}

PointProto.prototype.moveByProto = function(dx, dy) {
  this.x += dx;
  this.y += dy;
};

const pointProto = new PointProto(0, 0);
pointProto.moveByProto(5, 5);
pointProto.moveByProto(-2, 2);

console.log('====================================');
console.log([pointProto.x, pointProto.y]);
console.log('====================================');

/**
|--------------------------------------------------
| PURE FUNCTIONS - FUNCTIONAL STYLE
|--------------------------------------------------
*/

const createPoint = (x, y) => Object.freeze([x, y]);

const movePointBy = ([x, y], dx, dy) => {
  return Object.freeze([x + dx, y + dy]);
};

let pointFunc = createPoint(0, 0);

pointFunc = movePointBy(pointFunc, 5, 5);
pointFunc = movePointBy(pointFunc, -2, 2);

console.log('====================================');
console.log(pointFunc);
console.log('====================================');