What is a Javascript Class?

Ed Huang

May 2, 2019·3 min read

If you’re new to programming, or javascript you’ve probably heard of objects, and classes. Understanding what a class is can be difficult, you’ll hear words like “this”, “instances”, “objects”, “instantiated”, “new” etc… So lets dive in!

First there was an Object.

In Javascript, everything is an Object. Even a function, is considered an Object (but that’s for another day). An object is simply {} two curly braces, and inside there can be bunch of key value pairs:

let myHero = {
  name: "Khadgar",
  age: 30,
  height: 190,
  speed: 20,
  attack: 10,
  hitpoints: 100
};myHero.name; // "Khadgar"
myHero.age; // 30

So what happens, when we want to create another hero.

let mySecondHero = {
  name: "Rhonin",
  age: 33,
  height: 188,
  speed: 25,
  attack: 7,
  hitpoints: 120
};let yourHero = {
  name: "Zaetar",
  age: 55,
  height: 50,
  speed: 5,
  attack: 30,
  hitpoints: 200
};

etc..
As you can see, if we keep doing this. It isn’t very convenient. So in programming we have something called Classes.

And then there was the Class

If you think of Humans, as a Class and every character as an instance we now can do something like this:

function Human(name, age, height, speed, attack, hitpoints) {
  this.name = name;
  this.age = age;
  this.height = height;
  this.speed = speed;
  this.attack = attack;
  this.hitpoints = hitpoints;
}// OR With class syntaxclass Human {
  constructor(name, age, height) {
    this.name = name;
    this.age = age;
    this.height = height;
    this.speed = speed;
    this.attack = attack;
    this.hitpoints = hitpoints;
  }
}let myHero = new Human("Khadgar", 30, 190, 20, 10, 100);
console.log(myHero.name); // "Khadgar" 

And now we have something exactly like before. Where now we have an instance of a Human. A class is a special type of function that has the ability to create instances with its own unique properties. We can create a new Human object, with the new keyword followed by the Class name with values for the new instance we want to generate.

Classes can also have methods (functions) that do things.

Human.prototype.punch = function(enemy) {
  enemy.hitpoints = enemy.hitpoints - this.attack;
}or class Human {
  constructor(name, age, height) {
    // same as above ...
  }
  punch(enemy) {
    enemy.hitpoints = enemy.hitpoints - this.attack;
  }
}// and thenmyHero.punch(yourHero);
// your hero now only has 190 hitpoints. mySecondHero.punch(yourHero);
// your hero now only has 183 hitpoints.

What is “this”, all about?

So in our punch method, we have this.attack earlier we also had this.name, this.age and a few other properties. this refers to the current instance or (context) of what is being called. So for the example above this would refer to myHero . myHero attack value is 10, and then when used inside of the method to calculate how much damage to take off from the enemy.hitpoint . When mySecondHero.punch(yourHero); is called, this now refers to mySecondHero, and all of mySecondHero’s values will be applied to the method that is being called.

We could create another Class called Orcs, with different abilities, and properties, where all races, have basic properties, and different methods. But the idea here is that, Different races “Humans”, “Orcs”, and “Elves” can have many instances of each of their own type.

Hope that helps! comment below if you have any questions, or comments, or corrections.