This site is mobile accessible. Press the "Tap Here" button to use a different font-size.


Smartphone icons created by Freepik - Flaticon

  • 12.1 JS Class Intro

    • ECMAScript 2015, also known as ES6, introduced JavaScript Classes.
    • JavaScript Classes are templates for JavaScript Objects.

    JavaScript Class Syntax

    • Use the keyword class to create a class.
    • Always add a method named constructor():

    Syntax

    class ClassName {
      constructor() { ... }
    }

    Example

    class Car {
      constructor(name, year) {
        this.name = name;
        this.year = year;
      }
    }
    • The example above creates a class named "Car".
    • The class has two initial properties: "name" and "year".
    • A JavaScript class is not an object.
    • It is a template for JavaScript objects.

    Using a Class

    When you have a class, you can use the class to create objects:

    Example 1: JS Classes - Using a Class
    let myCar1 = new Car("Ford", 2014);
    let myCar2 = new Car("Audi", 2019);
    • The example above uses the Car class to create two Car objects.
    • The constructor method is called automatically when a new object is created.

    The Constructor Method

    • The constructor method is a special method:
      • It has to have the exact name "constructor"
      • It is executed automatically when a new object is created
      • It is used to initialize object properties
    • If you do not define a constructor method, JavaScript will add an empty constructor method.

    Class Methods

    • Class methods are created with the same syntax as object methods.
    • Use the keyword class to create a class.
    • Always add a constructor() method.
    • Then add any number of methods.

    Syntax

    class ClassName {
      constructor() { ... }
      method_1() { ... }
      method_2() { ... }
      method_3() { ... }
      }
    }

    Create a Class method named "age", that returns the Car age:

    Example 2: JS Class Methods part 1
    class Car {
      constructor(name, year) {
        this.name = name;
        this.year = year;
      }
      age() {
        let date = new Date();
        return date.getFullYear() - this.year;
      }
    }
    
    let myCar = new Car("Ford", 2014);
    document.getElementById("demo").innerHTML =
    "My car is " + myCar.age() + " years old.";

    You can send parameters to Class methods:

    Example 3: JS Class Methods part 2
    class Car {
      constructor(name, year) {
        this.name = name;
        this.year = year;
      }
      age(x) {
        return x - this.year;
      }
    }
    
    let date = new Date();
    let year = date.getFullYear();
    
    let myCar = new Car("Ford", 2014);
    document.getElementById("demo").innerHTML=
    "My car is " + myCar.age(year) + " years old.";

    Browser Support

    The following table defines the first browser version with full support for Classes in JavaScript:

    Chrome browser Edge Browser Firefox browser Safari browser Opera browser
    Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
    Mar, 2016 Jul, 2015 Mar, 2016 Oct, 2015 Mar, 2016

    "use strict"

    • The syntax in classes must be written in "strict mode".
    • You will get an error if you do not follow the "strict mode" rules.
    Example 4: JS Classes uses "strict mode"

    In "strict mode" you will get an error if you use a variable without declaring it:

    class Car {
      constructor(name, year) {
        this.name = name;
        this.year = year;
      }
      age() {
        // date = new Date();  // This will not work
        let date = new Date(); // This will work
        return date.getFullYear() - this.year;
      }
    }
    Navigate this module

    Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.



    JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon