Class Fields in JavaScript ๐Ÿ”ฅ

Class Fields in JavaScript ๐Ÿ”ฅ

ยท

2 min read

In JavaScript, there are two types of object fields (properties and methods):

1๏ธโƒฃ Public ๐Ÿ‘ญ

Accessible from anywhere. They comprise the external interface. Until now we were only using public properties and methods.

2๏ธโƒฃ Private ๐Ÿ”

Accessible only from inside the class. These are for the internal interface.

Class fields are public by default, but private class members can be created by using a hash # prefix.

Class Field Syntax

  • You can define new private members
  • You will get error if you break the access rule
  • It has public and private static fields, which allow you to declare class member that can be accessed without creating instance of the class

Using variable like _variableName, it means we can use that variable only in the class.

example

class GetDateTime {
    _start = 0

    getDate() {
        if(true) {
            this._start = new Date()
        }
    }
}

But this does not prevent _start variable accessible publicly. Checkout here ๐Ÿ‘‡

let date = new GetDateTime()
console.log(date._start) 
// Thu Jun 24 2021 16:36:06 GMT+0530 (India Standard Time)

To create real private instance you can use # to create private variables.

๐Ÿ“ NOTE: You just need to replace _ with #

class GetDateTime {
    #start = 0

getDate() {
        if(true) {
            this.#start = new Date()
        }
    }
}

let date = new GetDateTime()
console.log(date.#start) 
// Uncaught SyntaxError: Private field '#start' must be declared in an enclosing class

The encapsulation is enforced by language.

It has also support for private methods.

Example:

class GetDateTime {
    #start = 0

  getDate() {
      if(true) {
          return this.#getNow()
      }
  }

  #getNow() {
      this.#start = new Date()
  }
}

let date = new GetDateTime()
console.log(date.getDate()) 
// Thu Jun 24 2021 16:55:32 GMT+0530 (India Standard Time)

The private methods can only be accessible inside of the class.

Private static fields

You can also create private static variable.

The limitation of static variables being called by only static methods still holds.

class GetDateTime {
    static #start = 0

    static getDate() {
          if(true) {
              this.#start = new Date()
            return this.#start
          }
    }
}
console.log(GetDateTime.getDate()) 
// Thu Jun 24 2021 17:53:02 GMT+0530 (India Standard Time)

Reference ๐Ÿง

Private Class Fields

Buy Me A Coffee

๐ŸŒŸ Twitter ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป suprabha.me ๐ŸŒŸ Instagram

Did you find this article valuable?

Support Suprabha Supi by becoming a sponsor. Any amount is appreciated!