Classes

MDN Docs Classes have similar syntax to other programming lagueages, but have a difference inheritance concept.

You can organize your functions that perform similar functionality into classes.

Classes are also reusable.

// Create a new instance of Translation with the word "Table"
const firstTranslation = new Translation("Table");
firstTranslation.isEnglishWord(); //true

// Create another instance of Translation with the word "España"
const secondTranslation = new Translation("España");
secondTranslation.isEnglishWord(); //false

These are 2 different instances of the same class "Translation". Every one of these instances acts differently, based on the word you've given it. The first one is an English word so isEnglishWord returns true whereas the other one is a Spanish word so isEnglishWord returns false.

Here's how you'd write the code for this Translation class:

class Translation {
       constructor(word) {
            // Capture constructor param into an instance variable
            // This is explained in the next lesson
            this.word = word;
       }
       
       isEnglishWord() {
            // returns true when word is English, false otherwise
       }

       isSpanishWord() {
            // returns true when word is Spanish, false otherwise
       }
}

To create an instance of a class, you have to use the new keyword before the name of the class like this:

const person1 = new Person("Solo Stroup");
const person2 = new Person("Liz Funkhouser");

person1 and person2 are instances of a class

Every instance is unique. person1 is not equal to person2.
A class is basically a factory that is able to create instances.

Try it

Write the makeSquare function to return a square from the class Rectangle.

class Rectangle{
    /**
     * @param {number} width
     * @param {number} height
     */
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
}

const makeSquare = () => {
    const newRectangle = new Rectangle(4,4);
    return newRectangle;
};

// Sample usage - do not modify
console.log(makeSquare());

newPerson

Complete the function createPerson such that it returns a new instance of the class Person with the correct firstName and lastName instance variables based on the fName and lName parameters that it receives.

//person.js
export default class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

//index.js
import Person from "./person.js";

/**
 * @param {string} fName
 * @param {string} lName
 */
const createPerson = (fName, lName) => {
    const newPerson = new Person (fName, lName);
    return newPerson;

}

// Sample usage - do not modify
console.log(createPerson("Solo", "Stroup"));
console.log(createPerson("Liz", "Funkhouser"));

Define your own class

uses PascalCase or UpperCamelCase
when you create a new instance of a class, the constructor() function will automatically be called.

// class definition
class Person {
    constructor() {
        console.log("I was automatically called");
    }
}

// class usage
const person = new Person; // () are optional when there are no arguments

if the constructor expects some parameters, you can pass them like this:

// class definition
class Person {
    constructor(firstName, lastName) {
        console.log(firstName + " " + lastName);
    }
}

// class usage
const person = new Person("Solo", "Stroup");

Calling the Solo and Stroup above make those available within the constructor function, however, they won't be available in other methods. We use the this.firstName to save those into instance variables.

// class definition
class Person {
    constructor(firstName, lastName) {
        // capture firstName param into this.firstName instance variable
        this.firstName = firstName;
        // capture lastName param into this.lastName instance variable
        this.lastName = lastName;
    }
}

// class usage
const person = new Person("Sam", "Green");

Instance variables

An instance variable is a variable that belongs to a specific instance of a class. They can either be created by capturing a constructor parameter or sometimes not. The this.votingAge = 18 is not included in the constructor parameters

// class definition
class Person {
    constructor(firstName, lastName) {
        // capture firstName param into this.firstName instance variable
        this.firstName = firstName;
        // capture lastName param into this.lastName instance variable
        this.lastName = lastName;
        // set an instance variable (without capturing a constructor param)
        this.votingAge = 18;
    }
}

Another example:

class Course {
    constructor(name, isCompleted){
        this.name = name;
        this.isCompleted = isCompleted;
    }
}

// Sample usage - do not modify
console.log(new Course("Learn JavaScript", false));
console.log(new Course("Learn Programming", true));

Chapter Recap

Classes allow you to better organize your code by grouping your code (variables & functions) into a single class
Classes promote reusability.
A class is a factory that is able to create instances.
Every instance created from a class is unique.
The common convention for the name of the class is UpperCamelCase.
We capture constructor params so that we can access them outside the constructor (in instance methods).
An instance variable is a variable that belongs to a specific instance of a class.