2019-03-13 MAR

JS Classes (post-ES6)

• Terminology:
  • Data -> Attributes
    • (In JS, Objects have properties, Classes have attributes)
  • Functions-> Methods
  • After instantiation, called an "instance"
• Official Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
  1. To define a class:
     • class myClass { constructor(name1) {this.name = name1} } // one way
       • ... known as a class declaration
     • let myClassName = class myClass2 { constructor(name1) {this.name = name1} } // another way
       • ... known as a class expression
  2. To instantiate a class:
     • let myClassInstance = new myClassName(attribute1Value,attribute2Value, attribute3Value, etc.)
• "Getter" and "Setter" Functions -
  • Syntax example: https://stackoverflow.com/a/54136720
  • They allow you to...
    • build useful shortcuts for accessing and mutating data
    • bind special functions to an object that look like normal attributes, but actually execute hidden functions instead
      • Example: https://stackoverflow.com/a/41518168
    • obscure values that you don’t want the user to directly access
  • Why use "get"/"set" keywords instead of normal functions?
    • https://stackoverflow.com/questions/42342623/why-use-getters-and-setters-in-javascript
  • "get" and "set" were originally introduced in ES5, and used with Objects:
    • https://www.w3schools.com/JS/js_object_accessors.asp
    • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

Post-Break

• Discussion: Where can you use Classes in your own work?
• To create a class pre-ES6 , had to define them as functions & use "this.prototype" to define methods
  • Nice summary of pre-ES6 vs. modern Class Syntax: https://coryrylan.com/blog/javascript-es6-class-syntax
  • [For the purists] "Classes (still) don't really exist in Javascript" :
    • From MDN: "JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript."
    • JS Objects vs Classes vs Functions: https://stackoverflow.com/questions/17525450/object-vs-class-vs-function
• Private vs Public class attributes - currently experimental in Javascript
• Other topics
  • Data Structures Concepts:
    • Stacks, Queues, and Linked Lists: https://www.cs.purdue.edu/homes/ayg/CS251/slides/chap3.pdf
  • News:
    • Node.js foundation merging with Javascript foundation: https://medium.com/@nodejs/introducing-the-openjs-foundation-the-next-phase-of-javascript-ecosystem-growth-d4911b42664f

Subclasses and Inheritance

class Dog extends Animal {

constructor(name) {

super(name) // Gets 'name' attribute from the parent class. Allows you to reference this.name

}

speak() {

    console.log(this.name + ' barks.');

  }

} 

let d = new Dog('Mitzie');

d.speak(); // Mitzie barks.

• Species - return parent objects from your derived class methods; used with Set and Map
  • Further explanation: https://stackoverflow.com/a/33977439

Exercise - using CodePen, create your own class & subclass, instantiate the subclass:

Tony: https://codepen.io/anon/pen/PLEpQr

Bill: https://codepen.io/bill-redman/pen/jJYBGb

Joe: https://codepen.io/jbalsamo99/pen/vPpxqw

David: https://codepen.io/anon/pen/WmdpKr