A walk in JavaScript

DAY 8

Classes

General definition

Let’s start from the definition:

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.

Source: MDN - Classes

(－‸ლ) ok, so, the name is class but it seems they’re not classes. Let’s continue.

Classes are in fact “special functions”, and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

Source: MDN - Classes

(－‸ლ) (－‸ლ) now I’m confused …so … they’re not classes so technically it’s NOT a class-based language BUT you CAN do OOP … so what in the world are they and what’s the use?

Please don’t give up. Despite the “unhappy” and misleading naming, they are a very useful and powerful abstraction around repetitive and error prone routines to create prototype based inheritance structures.

This time, ECMAScript international isn’t very friendly with this:

So let’s borrow some info from MDN.

Syntax

class declaration statement

The class body of a class declaration is executed in strict mode. The constructor property is optional.

Class declarations are not hoisted (unlike function declarations).

Source: MDN - class declaration statement


class name [extends] {
  // class body
}

class expression

The class expression is one way to define a class in ECMAScript 2015. Similar to function expressions, class expressions can be named or unnamed. If named, the name of the class is local to the class body only. JavaScript classes use prototype-based inheritance.

Source: MDN - class expression

var MyClass = class [className] [extends] {
  // class body
};

Class body and method definitions

The body of a class is the part that is in curly brackets {}. This is where you define class members, such as methods or constructor.

Let’s see more at MDN - Classes

ES6 Classes in depth

So far we’ve had a reasonable amount of information to shallowly understand JavaScript Classes, but I wanna push you a little further.

Again I’ll ask Kyle Simpson’s book to help me. Please go to YDKJS: this & Object Prototypes - Appendix A: ES6 class

At this point we should be wise enough to start with the next step.

OOP vs Functional programming

First of all I’d love to de-mystify something, there’s not such a thing like a better paradigm. Both are powerful and both have their pros/cons depending on where and how they’re used. Like a hammer and a screw-driver they’re just tools, not more nor less. And they’re incredible. Learn them, study them so you can make a better use of your creativity and your resources.

General definitions

Functional Programming

In computer science, functional programming is a programming paradigm—a style of building the structure and elements of computer programs—that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. It is a declarative programming paradigm in that programming is done with expressions or declarations instead of statements. In functional code, the output value of a function depends only on its arguments, so calling a function with the same value for an argument always produces the same result. This is in contrast to imperative programming where, in addition to a function’s arguments, global program state can affect a function’s resulting value. Eliminating side effects, that is, changes in state that do not depend on the function inputs, can make understanding a program easier, which is one of the key motivations for the development of functional programming.

Source: Wikipedia - Functional Programming

Object-oriented programming (OOP)

Object-oriented programming (OOP) is a programming paradigm based on the concept of “objects”, which can contain data, in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods). A feature of objects is an object’s procedures that can access and often modify the data fields of the object with which they are associated (objects have a notion of “this” or “self”). In OOP, computer programs are designed by making them out of objects that interact with one another. OOP languages are diverse, but the most popular ones are class-based, meaning that objects are instances of classes, which also determine their types.

Source: Wikipedia - Object-oriented Programming

Some essential differences

Functional

OOP

Examples

Let’s see this oversimplified example and discuss it.

/**
 * OOP
 */
class Plant {

    /**
     * @param {number} flowers
     */
    constructor (flowers = 0) { this.flowers = flowers; }

    /**
     * @returns {number}
     */
    addFlower () { return ++this.flowers; }

}

let myPlants = [
    new Plant(1),
    new Plant(),
    new Plant(7),
    new Plant(9)
];

for (let plant of myPlants) {
    plant.addFlower();
}


/// FP
let myPlants = [ 1, 0, 7, 9 ];

let plantsWithMoreFlowers = myPlants.map(flower => ++flower);

Exercises

Let’s open our test files:

Now open your terminal.

  1. Make sure you’re at the project location
  2. If you didn’t install all the packages yet the run npm i for a fresh dependency install, or npm ci for an installation based on the lock file.
  3. Type npm run test:watch, this will start running your tests every time you make a change.

Our task is to make ALL our DAY 8 tests pass ;)