Day 4 of JavaScript Week delved into classes and JavaScript’s take on object-oriented programming. To be clear, this isn’t the end of JavaScript at Lambda… not by a long shot. Its the end of this week of JavaScript, but next week we begin Applied JavaScript, and later on we work with other JS-based technologies like React, Redux and Node. JavaScript is one of the foundational technologies that the bootcamp is based upon.

So, this session started with a 20-minute video about classes and a 15-minute video centered on converting constructors into classes. The lesson was prefaced with the idea that since the original prototype system in JavaScript is clunky, classes were developed to simplify and abstract the process of achieving inheritance – which is really one of the key reasons that objects and classes exist to begin with.

We were initially shown prototypes so that we could contrast it with classes more directly, in order to better know how both processes worked. We also explored the concept of pseudo-classical inheritance, which (to my understanding) (1) contrasts with prototypical inheritance and (2) uses constructor functions and the “new” keyword to basically “fake” a class and build objects. Prototypical inheritance, on the other hand, directly creates a new object from an existing object, without the use of classes at all.

• TheoryApp: JavaScript Inheritance: Pseudoclassical vs. Prototypal

Classes

I really dislike the phrase “syntactic sugar”. Its been used on every website that I’ve seen which describes what classes are in JavaScript. Kudos to whoever coined the term, but really, I wish people would come up with their own ways to describe how classes are implemented in JavaScript. ES6 has been around since 2015! It irks me the same way that every Western anthropologist who comes across a female figurine from another culture immediately ascribes its function as an idol to a fertility goddess. In 10,000 years, that’s how space-faring humans are going to view Barbie dolls when they return to Earth to see if they can clean up the mess we’re making right now.

Anyway. JavaScript is a functional programming language. It relies heavily on functions and expression evaluations to operate effectively. Its a programming paradigm that contrasts with object-oriented programming, which is more focused on the creation and manipulation of objects and the functions and methods bound to them.

• educba: Functional Programming vs OOP

JavaScript’s classes apparently aren’t true “classes” in the sense that other programming languages use the term. They’re just another way to create objects (hence, that “syntactic sugar” thing). They still have prototypes, properties and methods, and removing a method from a prototype still removes it from all of the instances of that prototype. (Remember, too, that objects are also just variables that can contain many values.)

My understanding is that in other languages, classes are the blueprints and are constructors in and of themselves. They also control inheritance – their properties and methods are passed down to members of their class. JavaScript simulates this by letting the class keyword create an object, which has its own properties and methods, and prototype, and can be extended to child objects, which can have their own methods, distinct from the parent object.

“Class” in JavaScript mainly serves to streamline the object creation process, trading the creation of an object by use of the function keyword with creation of an object using the class keyword, and making other changes to keywords that are used to define methods, properties, binding and inheritance.

• Medium: Javascript : Prototype vs Class

Class declaration and object creation

When a new class is declared, it looks just like any other object at first. The initial difference is that the function keyword is replaced with the class keyword and the property arguments are moved from the object’s name and placed inside of the function, with the constructor keyword. The first letter of the class’ name is also capitalized, to indicate that its a constructor function. Inside of the function, the word “constructor” is explicitly used. Its the key tool used to build every object’s properties. These properties are bound to the “this” keyword when the object is constructed using the “new” keyword.

Object creation: (defines the constructor function and then creates two objects)

function ElectricBass(make, model, numStrings, handedness, color) {
  this.make = make;
  this.model = model;
  this.numStrings = numStrings;
  this.handedness = handedness;
  this.color = color;
}

const firstBass = new ElectricBass("Schecter", "Stiletto Studio 5L", 6, "left", "satin");
const secondBass = new ElectricBass("Sterling", "Stingray SUB", "4", "left", "black");

• w3schools: JavaScript Object Constructors

Class creation: (defines the constructor function and then creates two objects)

class ElectricBass {
  constructor(make, model, numStrings, handedness, color) {
    this.make = make;
    this.model = model;
    this.numStrings = numStrings;
    this.handedness = handedness;
    this.color = color;
  }// constructor
}// ElectricBass

const firstBass = new ElectricBass("Schecter", "Stiletto Studio 5L", 6, "left", "satin");
const secondBass = new ElectricBass("Sterling", "Stingray SUB 4L", "4", "left", "black");

• w3schools: JavaScript Classes

I’ll write a follow-up post to this and contrast inheritance with classes vs inheritance with constructor functions, as that was a key topic of Week 3, Day 4. We’ll also look at converting a constructor function into a class (which can be largely puzzled out by comparing the two ElectricBass examples, above).