ES5 to ES2015

book/snippets/0-design-pattern-categorization.es2015.js

@@ -0,0 +1,42 @@
+//*******************************************************//
+// A brief note on classes
+//*******************************************************//
+
+// Section contains description of ES2015, but not use it. 
+// I suggest remove the description and put the new examples.
+
+//********************** Snippet 1 **********************//
+
+// A car "class"
+
+// [ES2015+] Below we used new class declaration, using keyword class
+// [ES2015+] We used new constructor method and method declaration
+// [ES2015+] Classes are syntactic sugar over JavaScript's prototype-based inheritance
+// [ES2015+] We used new template literals for string interpolation
+class Car {
+    constructor(model) {
+        this.model = model;
+        this.color = "silver";
+        this.year = "2012";
+    }
+
+    getInfo() {
+        return `${this.model} ${this.year}`;
+    };
+
+}
+
+//********************** Snippet 2 **********************//
+
+
+// Usage:
+
+// [ES2015+] We used new keyword const for immutable constant declaration
+const myCar = new Car("ford");
+
+myCar.year = "2010";
+
+console.log(myCar.getInfo());
+
+// Here the link on Stoyan Stefanov's post, it's a good post.
+// But more modern data can be obtained here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

book/snippets/0-design-pattern-categorization.es5.js

@@ -0,0 +1,26 @@
+//*******************************************************//
+// A brief note on classes
+//*******************************************************//
+
+//********************** Snippet 1 **********************//
+
+// A car "class"
+function Car( model ) {
+
+  this.model = model;
+  this.color = "silver";
+  this.year = "2012";
+
+  this.getInfo = function () {
+    return this.model + " " + this.year;
+  };
+
+}
+
+//********************** Snippet 2 **********************//
+
+var myCar = new Car("ford");
+
+myCar.year = "2010";
+
+console.log( myCar.getInfo() );

book/snippets/1-the-constructor-pattern.es2015.js

@@ -0,0 +1,193 @@
+//*******************************************************//
+// Object Creation
+//*******************************************************//
+
+//********************** Snippet 1 **********************//
+
+// [ES2015+] We used new keyword const for immutable constant declaration
+// Each of the following options will create a new empty object:
+
+const newObject = {};
+
+// or
+const newObject = Object.create(Object.prototype);
+
+// or
+const newObject = new Object();
+
+
+//********************** Snippet 2 **********************//
+
+// ECMAScript 3 compatible approaches
+
+// 1. Dot syntax
+
+// Set properties
+newObject.someKey = "Hello World";
+
+// Get properties
+// [ES2015+] We used new keyword const for immutable constant declaration
+const value = newObject.someKey;
+
+
+
+// 2. Square bracket syntax
+// This syntax requred if key name contains spaces 
+// This syntax requred if key name stored in variable
+
+// Set properties
+newObject["Some Key"] = "Hello World";
+newObject[VariableName] = "Hello World";
+
+// Get properties
+// [ES2015+] We used new keyword const for immutable constant declaration
+const value = newObject["Some Key"];
+const value = newObject[VariableName];
+
+
+// ECMAScript 5 only compatible approaches
+// For more information see: http://kangax.github.com/es5-compat-table/
+
+// 3. Object.defineProperty
+
+// Set properties
+Object.defineProperty(newObject, "someKey", {
+    value: "for more control of the property's behavior",
+    writable: true,
+    enumerable: true,
+    configurable: true
+});
+
+
+// If the above feels a little difficult to read, a short-hand could
+// be written as follows:
+// [ES2015+] We used new keyword const for immutable constant declaration
+// [ES2015+] We used new arrow function expression syntax
+const defineProp = (obj, key, value) => {
+    const config = {
+        value: value,
+        writable: true,
+        enumerable: true,
+        configurable: true
+    };
+    Object.defineProperty(obj, key, config);
+};
+
+// To use, we then create a new empty "person" object
+// [ES2015+] We used new keyword const for immutable constant declaration
+const person = Object.create(Object.prototype);
+
+// Populate the object with properties
+defineProp(person, "car", "Delorean");
+defineProp(person, "dateOfBirth", "1981");
+defineProp(person, "hasBeard", false);
+
+console.log(person);
+// Outputs: Object {car: "Delorean", dateOfBirth: "1981", hasBeard: false}
+
+
+// 4. Object.defineProperties
+
+// Set properties
+Object.defineProperties(newObject, {
+
+    "someKey": {
+        value: "Hello World",
+        writable: true
+    },
+
+    "anotherKey": {
+        value: "Foo bar",
+        writable: false
+    }
+
+});
+
+// Getting properties for 3. and 4. can be done using any of the
+// options in 1. and 2.
+
+
+//********************** Snippet 3 **********************//
+
+// Usage:
+
+// Create a race car driver that inherits from the person object
+// [ES2015+] We used new keyword const for immutable constant declaration
+const driver = Object.create(person);
+
+// Set some properties for the driver
+defineProp(driver, "topSpeed", "100mph");
+
+// Get an inherited property (1981)
+console.log(driver.dateOfBirth);
+
+// Get the property we set (100mph)
+console.log(driver.topSpeed);
+
+
+//*******************************************************//
+// Basic Constructors
+//*******************************************************//
+
+//********************** Snippet 1 **********************//
+
+// [ES2015+] Below we used new class declaration, using keyword class
+// [ES2015+] We used new constructor method and method declaration
+// [ES2015+] Classes are syntactic sugar over JavaScript's prototype-based inheritance
+// [ES2015+] We used new template literals for string interpolation
+class Car {
+    constructor(model, year, miles) {
+        this.model = model;
+        this.year = year;
+        this.miles = miles;
+    }
+
+    toString() {
+        return `${this.model} has done ${this.miles} miles`;
+    }
+}
+
+// Usage:
+
+// We can create new instances of the car
+// [ES2015+] We used new keyword const for immutable constant declaration
+const civic = new Car("Honda Civic", 2009, 20000);
+const mondeo = new Car("Ford Mondeo", 2010, 5000);
+
+// and then open our browser console to view the
+// output of the toString() method being called on
+// these objects
+console.log(civic.toString());
+console.log(mondeo.toString());
+
+//*******************************************************//
+// Constructors With Prototypes
+//*******************************************************//
+
+//********************** Snippet 1 **********************//
+// [ES2015+] Classes are syntactic sugar over JavaScript's prototype-based inheritance
+// [ES2015+] We used new constructor method and method declaration
+// [ES2015+] All of it new syntax sugar above old function structures
+class Car {
+    constructor(model, year, miles) {
+        this.model = model;
+        this.year = year;
+        this.miles = miles;
+    }
+}
+
+// Note here that we are using Object.prototype.newMethod rather than
+// Object.prototype so as to avoid redefining the prototype object
+// [ES2015+] We still could use Object.prototype for adding new methods, because internally we use the same structure
+// [ES2015+] We used new template literals for string interpolation
+Car.prototype.toString = function () {
+    return `${this.model} has done ${this.miles} miles`;
+};
+
+// Usage:
+// [ES2015+] We used new keyword const for immutable constant declaration
+const civic = new Car("Honda Civic", 2009, 20000);
+const mondeo = new Car("Ford Mondeo", 2010, 5000);
+
+console.log(civic.toString());
+console.log(mondeo.toString());