Learn how we can use the new #
syntax to create private properties or methods in Javascript.
Today while reading some Javascript code I found the following line:
this.#authFormToken = 'someValue'
And there I went to investigate 🔎. Why that #
sign? Little did I know, this was a new JS feature added to the set of ECMAScript 2022.
Declaring private properties in Javascript classes
In order to make a property private in a Javascript class we need to prefix it with the #
sign:
class Person {
name
#age
constructor(name = 'somebody', age = 0) {
this.name = name
this.#age = age
}
}
We used default values for the parameters of the constructor.
If we try to read or write the name
public property all will work as supposed:
// 👍 read or write a public property
let p = new Person()
p.name = 'Daniel'
console.log(p.name)
But, if we try to read or write the private #age
property:
// ⛔️ read or write a public property
let p = new Person()
p.#age = -1
console.log(p.#age)
We will get the below error:
Error: Private field '#age' must be declared in an enclosing class
Reading and writing private properties in Javascript classes
If we want to read or write the values of private properties, outside of the class, we can use plain old setters and getters:
class Person {
#age
constructor(age = 0) {
this.#age = age
}
set age(a) {
this.#age = a
}
get age() {
return this.#age
}
}
let p = new Person()
p.age = 10
console.log(p.age)
Declaring private methods in Javascript classes
Using the new#
syntax we can also easily define private methods in our Javascript classes:
class Person {
#privateMethod() {
console.log('this is a private message')
}
publicMethod() {
console.log('this is a public message')
}
}
With the above declaration, we can call the publicMethod()
:
// 👍 call a public method from outside the object
let p = new Person()
p.publicMethod()
However, if we call the #privateMethod()
we will get an error:
// ⛔️ this will result in:
// Error: Private field '#privateMethod' must be declared in an enclosing class
let p = new Person()
p.#privateMethod()
As with the private properties, the private methods can be called just from the internal methods of that class.
Notes on the # syntax and private properties and methods
A few closing notes regarding the private methods and properties in Javascript:
- the private properties and methods must be declared up-front in the field declaration
- you can use the
in
operator to check for the existence of a private property - private properties or methods cannot be created ad-hoc through assignments
- before the
#
syntax the private properties were emulable with ES6 modules
You may also want to take a look at how to work with Javascript proxies, private fields and the Reflect API.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.