What to use instead of Classes in JavaScript?

Question

Background

I am a developer with a background history of approximately 9 years in both Java and C#.

In those languages, Classes and taxonomic classification and inherent to the object paradigm.

And so, when ECMA6 came out, I was very happy to see classes in the language... and I started using them everywhere.

Problem

Turns out that using classes in JavaScript is a trap.

If you use them, you will go to your grave never knowing how miserable you are.

And you will never really understand JavaScript. You will think you do, but you don't.

Questions

So clearly, after watching this full conference, I realized I don't know JavaScript.

All my life I have been formatted with the OOP with classes paradigm, and now I don't even know where to look for help, or even to get started.

1. In JavaScript style, how would you go about representing the Animal kingdom, with inheritance? I would use a class Animal, and then a Class Dog, and instantiate objects of dogs, for example. This is not the JavaScript way.

An example of non-JavaScvript:

class Animal{
    constructor(aName){
        this.name = aName;
    }
}

class Dog extends Animal{
    constructor(){
        super(aName);
        this.type = "Furry dog";
    }
}

let myDog = new Dog("Boby");

2. What is the JavaScript way of doing this?

At this point, I am looking for guidance. After trying I was unable to find anything helpful, mainly because I believe I am so lost that I am not even searching for the right thing.

Thanks in advance.

Answer 1

As far as I know, JavaScript is a Prototype based language with First-class functions, as you can read here.

Now. Actually this is just a style of OPP which means you will be working and thinking about objects and inheritance. You just have to know that, in JavaScript, there are no classes but we have prototypes instead. But remember. It's all about the functions.

Object constructors

To make your own object definition, you would do as follows:

function Animal() {
    this.name = null;
    this.age = 0;
    this.genus = null;
    this.isWild = true;
};

Animal.prototype.hasName = function() {
    return this.name !== null;
};

Animal.prototype.isItWild = function() {
    return this.isWild;
};

// Here we create an instance of Animal
var someAnimal = new Animal();
// Let's give it a name
someAnimal.name = 'Dobby';
console.log('Hey there. My pet name is %s', someAnimal.name);
console.log('is it wild? %o', someAnimal.isWild);

Now you have your Animal prototype. Let's see how to extend its properties to create the Dog prototype:

function Dog() {
    this.genus = 'Canis';
    this.race = 'unknown';
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
    console.log('rrouff!');
};

Let's create a race of dog now:

function SiberianHusky(name, age) {
    this.name = name;
    this.age = age;
    this.race = 'Siberian Husky';
}

SiberianHusky.prototype = Object.create(Dog.prototype);
SiberianHusky.prototype.constructor = SiberianHusky;

// Let's create our Siberian Husky
var myPet = new SiberianHusky('Bobby', 5);
// Aww. It is barking!
myPet.bark();

The prototype object

You can see in the examples that every definition is using the Object prototype. That is used to define how an object is. You can think of it as the class definition.

How to avoid the over-use of the prototype property

Instead of writing to the prototype every time, you can do the following:

Animal.prototype = {
    name: null,
    age: 0,
    genus: null,
    isWild: true,
    hasName: function() { ... }
    isItWild: function() { ... }
}

To fully understand the concept of prototypes and how they inherit from each other, you can check this.

Last notes

JavaScript is a multi-paradigm language. You can use the Object Oriented Programming Paradigm, the Imperative Programming Paradigm and the Functional Programming Paradigm, wich means that you can program the same application in a lot of different ways.

Some helpful links

https://en.wikipedia.org/wiki/JavaScript

https://en.wikipedia.org/wiki/Prototype-based_programming

Cheers.