Classes are an object-oriented concept in Programming that you will undoubtedly encounter while writing. JavaScript classes, on the other hand, function slightly differently.

In this tutorial, we'll look at how classes vary in Javascript and go through the process of constructing a simple class step by step.

EcmaScript 2015 (ES6) introduced classes to give a more precise approach to follow object-oriented programming sequences.

JavaScript continues to use a prototype-based inheritance model today. JS is syntactic sugar (This means that classes exist in Javascript as visual assistance.) on top of the prototype-based inheritance model that we use to implement OOP ideas.

As a result, the inclusion of classes in Javascript made it easier for developers to create software based on OOP notions. It also drew similarities with other OOP-based languages like Java and C++.

Syntax of Javascript Class

To create a JS class, use the "class" Keyword. And, always include a constructor() method:

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

Example

class Smartphone {
  constructor(brand, year) {
    this.brand = brand;
    this.year = year;
  }
}

The above example generates a class called "Smartphone." The class's initial attributes are "brand" and "year."

JavaScript Class Methods

You define methods as follows when using the constructor function:

// constructor function
function Person (name) {

   // giving  parameter values to calling object
    this.name = name;

    // defining method
    this.greet = function () {
        return ('Hi' + ' ' + this.name);
    }
}

Methods in the Js class are simple to define. You just state the method's name, accompanied by (). As an example,

class Individual {
    constructor(name) {
    this.name = name;
  }

    // defining method
    greet() {
        console.log(`Hi ${this.name}`);
    }
}

let individual1 = new Individual('Karl');

// accessing property
console.log(individual1.name); // Karl

// accessing method
individual1.greet(); // Hello Karl

Swap out "Individual" for "person" if you can't execute your code.

To access an object's method, type the method's name followed by a colon ().

Getter and Setter Methods

Getter methods in Js retrieve an object's value, whereas setter methods set an object's value.

Getters and setters may be found in JavaScript classes. For getter methods, you use the get keyword, and for setter methods, you use the set keyword. As an example,

Getter Method Example

// Create an object:
const person = {
  firstName: "Karl",
  lastName: "Mace",
  language: "de",
  get lang() {
    return this.language;
  }
};

// Display object data using a getter:
document.getElementById("demo").innerHTML = person.lang;

Setter Method Example

const person = {
  firstName: "Karl",
  lastName: "Mace",
  language: "",
  set lang(lang) {
    this.language = lang;
  }
};

// Set the property of the object using a setter:
person.lang = "de";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

Hoisting

Before using a class, it must be defined. The class, unlike functions as well as other Js declarations, is not hoisted. As an example,

// accessing class
const p = new Person(); // ReferenceError

// defining class
class Person {
  constructor(name) {
    this.name = name;
  }
}

Use strict

Classes always adhere to "use-strict." All code within the class is executed in strict mode by default. As an example,

class Person {
  constructor() {
    b = 0;
    this.name = b;
  }
}

let p = new Person(); // ReferenceError: Can't find variable: b

Uses of Getter and Setter Methods

1. It provides simpler syntax.
2. It provides for the use of the same syntax for both methods and properties.
3. It can ensure higher data quality.
4. It is handy for working behind the scenes.