Private fields & methods
Learn JavaScript private fields, private methods, private static members, brand checks, and when to choose class privacy instead of closures or WeakMaps.
- 01Keep class data privateUse
#fields, methods, and getters that only code inside the class can use. - 02Check who made an objectUse
#x in objto ask whether your class made an object, without reading its private data. - 03Pick a way to hide dataCompare private fields with closures and WeakMaps, and pick the one that fits.
Real privacy for class objects
Most JavaScript objects are open. Say an object has a property named balance. Any other code can read it, change it, or delete it. Other code can also overwrite it by mistake.
Some programmers name it _balance instead. The underscore is only a habit. It is a polite sign that says "please don't touch". Nothing stops other code from touching it.
A private member is different. Its name starts with #, like #balance or #validate(). Only code written inside the class can use that name. "Inside the class" means between the class's curly braces { }. This lesson calls that part the class body.
The # is part of the name itself. It is not a normal property name written as text. Code outside the class can't even write account.#balance. JavaScript refuses to run a program that contains it.
Picture a bank folder with a small safe inside it. The bank staff know the secret number that opens the safe. Anyone else can hold the folder, pass it on, or ask the staff to do something with it. But they can't open the safe themselves.
- In real life: The safe inside the bank folder
- In JavaScript: The private field
#balanceon the object - In real life: Bank staff who know the safe's secret number
- In JavaScript: Methods written inside the class
- In real life: A sticky note that says "do not touch"
- In JavaScript: A normal property named
_balance - In real life: Checking that a folder came from this bank
- In JavaScript: A check like
#balance in obj(you'll see it later)
A private member is a field, method, getter, setter, or static member whose name starts with #. Only code inside the class body that creates it can use it.
Here is what each of those words means:
- A field is a value that each object keeps, like
#balance = 0. - A method is a function on the object, like
#validate(). - A getter is a method you read like a property, without
(). You write it withget. - A setter is a method that runs when you assign a value. You write it with
set. - A static member belongs to the class itself, not to each object.
This lesson uses the class syntax from Class basics. You have hidden data in other ways before, in Closures, Closure patterns, and WeakMap & WeakSet. Near the end, you'll compare those ways with private fields.
#private fields & methods
INTERACTIVEYou create a private field in the class body, for example #balance = 0;. Each new object then gets its own private #balance. Methods in the same class read and change it with this.#balance. Private methods and private getters follow the same rule.
The name is fixed when you write the class. You can't build it from text with square brackets. So this["#balance"] never means the private field. It means a normal property whose name happens to start with #.
class BankAccount { #balance = 100; deposit(amount) { this.#validate(amount); this.#balance += amount; return this.balanceLabel; } withdraw(amount) { this.#validate(amount); this.#balance -= amount; return this.balanceLabel; } get balanceLabel() { return "₹" + this.#balance; } #validate(amount) { if (amount < 0) throw new RangeError("No negative amounts"); }} const account = new BankAccount();// account.#balance is a SyntaxError outside the class.account["#balance"] = 999; // a normal public propertyThe private balance is inside the object. Only the class's methods can change it. Code outside can only add a separate public property named "#balance".
The balance starts at ₹100. Only the class's own methods can change the private field.
Try the buttons:
- Deposit and Withdraw call public methods. They change the real private balance.
- Try account.#balance shows the error you get when code outside the class writes that. It is a
SyntaxError: JavaScript refuses to run the program at all. - Add fake ["#balance"] adds a normal public property. Its name is the text
"#balance". The real private balance does not change.
Guess the printed balance first. Then step through how public methods change the private field.
script
class BankAccount { #balance = 0; constructor(opening) { this.#validate(opening); this.#balance = opening; } get balanceLabel() { return "₹" + this.#balance; } deposit(amount) { this.#validate(amount); this.#balance += amount; return this.balanceLabel; } #validate(amount) { if (amount < 0) throw new RangeError("Amount must be positive"); }} account.deposit(25);console.log(account.balanceLabel);A method or a getter can be private too. Below, the getter's name, #label, is private. The public method label() can use it. Code outside the class can't write user.#label.
class User { #name = "Asha"; get #label() { return "User: " + this.#name; } label() { return this.#label; }}console.log(new User().label());Line 2 stores the name in a private field. Lines 3–5 make a private getter. Line 7 reads that getter from inside the class. Line 10 calls the public method, which prints User: Asha.
Before the program runs: writing account.#balance outside the class is a SyntaxError. So is creating the same private name twice in one class. JavaScript checks the whole program first and refuses to start it.
While the program runs: a method inside the class may read other.#balance. That is allowed to write. But if other was not made by this class, it has no #balance. JavaScript then throws a TypeError at that moment.
#balance. Code inside the class may use it. Code outside the class can't even write it, so JavaScript won't run the program.class Account { #balance = 100; }const account = new Account();account.#balance;class Account { #balance = 100; read(other) { return other.#balance; }}new Account().read({});In the first example, line 3 is outside the class, so the program never starts. In the second example, line 4 is inside the class, so it is allowed. Line 7 passes a plain object {}, which has no #balance, so line 4 throws when it runs.
- Inside
deposit():this.#balance += amount - Inside
withdraw():this.#validate(amount) - Outside the class:
account.#balance - In a child class method:
this.#balance - Outside:
account["#balance"] JSON.stringify(account)
Sort each piece of code. Ask where it is written: inside the class that created the private name, outside it, or on a normal public property that only looks similar.
Private static members
CLASS STATEA static member belongs to the class itself, not to each object. So static #count is one private value for the whole class. Private static fields are good for things the whole class shares and callers shouldn't touch:
- a counter of how many objects were made,
- a list of all the objects made so far,
- a store of saved results, so the same work isn't done twice,
- helper methods that only the class should call.
Each private name can appear only once in a class. A class can't have both #count and static #count; that is a SyntaxError. Give them different names, like #id for each object and static #count for the class. Then write this.#id for one object's value and Vault.#count for the class's value.
class Vault { static #count = 0; static #lastId = 0; #id; constructor() { Vault.#count += 1; this.#id = ++Vault.#lastId; } static get count() { return Vault.#count; } get label() { return "vault-" + this.#id; }} const first = new Vault();const second = new Vault();console.log(Vault.count);console.log(first.label + ", " + second.label);Line 7 adds 1 to the class's #count each time an object is made. Line 8 gives each object its own #id. After two objects, line 22 prints 2 and line 23 prints vault-1, vault-2. Code outside the class can read Vault.count, the public getter on line 11. It can't read Vault.#count.
Vault holds the only #count. Each new Vault() adds 1 to it and gets its own #id.A child class (made with extends) also gets its parent's static methods. Inside a static method, this is the class you called it on. But a private static field exists only on the class that created it.
So when a child class calls an inherited method that reads this.#count, this is the child. The child has no #count. In Chrome and Node, JavaScript throws TypeError: Cannot read private member #count from an object whose class did not declare it. To avoid this, name the class that owns the field, like BaseVault.#count.
class BaseVault { static #count = 1; static readWithThis() { return this.#count; } static readWithName() { return BaseVault.#count; }}class ChildVault extends BaseVault {}console.log(BaseVault.readWithThis());try { ChildVault.readWithThis();} catch (error) { console.log(error.name + ": " + error.message);}console.log(ChildVault.readWithName());Line 11 calls readWithThis() on BaseVault and prints 1. Line 13 calls it on ChildVault. Now this is ChildVault, so it throws, and line 15 prints the error. Line 17 calls readWithName(), which names BaseVault directly, so it prints 1.
#x in obj brand checks
STEP THROUGHSometimes you want to know: was this object made by my class? When a class makes an object, it puts its private fields on it. Those private fields work like the class's mark, or brand. A brand check looks for that mark.
Inside the class, #balance in value asks: does value have this class's #balance? The answer is true or false. The check never reads the balance itself.
Check that the value is an object first, because #balance in null throws an error. typeof null is "object", so you also need value !== null. The && operator stops at the first part that is false, so the brand check only runs on real objects.
A brand check only tells you which class made the object. It doesn't check that the balance or any other value makes sense.
A brand check asks whether this class made the object. It never reads the private value.
script
class BankAccount { #balance = 0; static isAccount(value) { return typeof value === "object" && value !== null && #balance in value; }} const fake = { "#balance": 999 };console.log(BankAccount.isAccount(account));console.log(BankAccount.isAccount(fake));fake["#balance"] = 123;console.log(BankAccount.isAccount(fake));console.log(fake["#balance"]);account has it. fake only has a public key with the same text.A bank clerk wants to know, "Is this one of our folders?" She looks for the bank's stamp on the folder. She doesn't need to open the safe or count the money.
- In real life: A folder with the bank's stamp
- In JavaScript: An object made by the class, with its private fields
- In real life: A fake folder with "balance" written on a note
- In JavaScript: A plain object with a public
"#balance"key - In real life: Looking at the stamp without opening the safe
- In JavaScript:
#balance in objgivestrueorfalse
Private fields also stay hidden from tools that list an object's properties. Object.keys, the spread { ...obj }, and JSON.stringify all skip them. A public property named "#balance" is different: it is a normal property, so these tools show it.
class Account { #balance = 100; owner = "Ada"; label() { return "₹" + this.#balance; }}const account = new Account();console.log(Object.keys(account).join(","));console.log(JSON.stringify(account));account["#balance"] = 999;console.log(Object.keys(account).join(","));console.log(JSON.stringify(account));Lines 9 and 10 show only owner. Line 11 adds a public property named "#balance". Now lines 12 and 13 show it, with 999. The private #balance, which holds 100, never appears.
Private fields vs closures
COMPAREYou now know three ways to hide data:
- Closures. A function remembers the variables around it. Code outside the function can't reach those variables.
- WeakMaps. You keep the hidden data in a separate map. Each object is a key in that map.
- Private fields. The data sits on each object, and JavaScript itself blocks code outside the class.
In the table below, each row asks one question. Read across the row to compare the three ways.
| Question | Private fields | Closures | WeakMap |
|---|---|---|---|
| How strong is the privacy? | JavaScript itself blocks it. Writing obj.#x outside the class is a SyntaxError. | Private, as long as you never hand out the hidden variable. | Private, as long as you keep the WeakMap hidden. |
| Where is the data kept? | On each object, in its private fields. | In the variables that the function remembers. | In a separate map, with each object as a key. |
| Can a child class use it? | No. A child class can't write the parent's private names. | There are no classes here, unless you build them yourself. | Yes, if both classes can see the same WeakMap. |
| What do the browser's developer tools show? | They may show the private fields, but your code still can't read them. | Usually the remembered variables of the function. | Usually the WeakMap and its entries. |
Do Object.keys and JSON show it? | No. They skip private fields. | No. The data isn't a property of any object. | No. The data is outside the object. |
When to pick each one:
- Pick private fields when you are writing a class and each object needs its own hidden data.
- Pick closures for a factory (a function that builds and returns something), or for a value one function needs to remember.
- Pick a WeakMap when you need to attach hidden data to objects that other code made and you can't change.
Private fields are not always the best choice. A closure can hide data without any object at all. A WeakMap can keep data beside objects that another file made. Pick the way that matches who owns the data and what callers should see.
Where you'll use this
Private members help whenever an object has a rule that must always stay true. For example, a balance should never go below zero. If only the class's methods can change the balance, they can check the rule every time.
- Page widgets, like a drop-down menu: keep the page elements it controls private. Offer methods like
open()andclose(). - Data objects: check every change inside a method, so a wrong value can't be written directly.
- Code that talks to a web service for you: hide the retry counter, saved results, and settings.
- Factories: keep a private static store of objects already made, and offer a public method that makes new ones.
class Todo { #done = false; finish() { this.#done = true; } get status() { return this.#done ? "done" : "open"; }}const todo = new Todo();todo.finish();console.log(todo.status);Line 2 creates a private #done flag. Line 4, inside the public finish() method, sets it to true. The getter on line 7 shows only the status text. Line 11 calls finish(), and line 12 prints done. Callers can't set todo.#done themselves.
Don't put passwords or secret keys in browser JavaScript, even in a #private field. The person using the browser can still see them, for example in the browser's developer tools. Private fields stop other parts of your program from touching the data. They don't hide it from the person who runs the program.
Common misconceptions
"An underscore makes a property private."
No. _balance is a normal public property with a warning in its name. #balance is private, and JavaScript blocks code outside the class from using it.
"Private fields are just names with # at the start."
No. account["#balance"] reads a normal public property whose name is the text "#balance". It can't reach the private #balance.
"Child classes can read the parent's private fields."
No. A child class (made with extends) gets the parent's methods. But its own class body is a different class body, so it can't write the parent's private names.
"Brand checks read private data."
No. #x in obj only answers true or false: does this object have the private field? It never gives you the value.
"Private fields are included in JSON."
No. JSON.stringify and Object.keys only see public properties. They skip private fields.
Here is the underscore version. It looks like private data, but nothing protects it. Any caller can change the list directly and skip the class's method.
class Cart { _items = []; add(item) { this._items.push(item); }}const cart = new Cart();cart.add("tea");cart._items.push("book");console.log(cart._items.join(","));Line 8 adds tea through the add() method. Line 9 skips the method and pushes book straight into the list. Line 10 prints tea,book. With #items instead, line 9 would be a SyntaxError.
class Parent { #value = 7; read() { return this.#value; }}class Child extends Parent {}console.log(new Child().read());Line 8 prints 7. Child has no read() of its own, so it uses the one from Parent. That method was written inside Parent, so line 4 may read #value. The child can call the method, but it still can't write #value itself.
If the child class tries to write the parent's private name itself, JavaScript refuses to run the code:
class Parent { #value = 7;}class Child extends Parent { readParent() { return this.#value; }}Practice: keep the right data private
5 EXERCISESThis Timer used to keep its time in _seconds. Now it uses #seconds. What does the program print?
class Timer {
#seconds = 0;
tick() {
this.#seconds += 1;
return this.#seconds;
}
}
const timer = new Timer();
console.log(timer.tick());
console.log(Object.keys(timer).length);class Timer {
#seconds = 0;
tick() {
this.#seconds += 1;
return this.#seconds;
}
}
const timer = new Timer();
console.log(timer.tick());
console.log(Object.keys(timer).length);Line 9 prints 1, because tick() is inside the class and may change #seconds. Line 10 prints 0, because Object.keys(timer) lists only public properties, and this timer has none.
Does this print a number, give undefined, or cause an error? If it is an error, which kind?
class Account { #balance = 100; }
const account = new Account();
account.#balance;It is a SyntaxError. Line 3 is outside the class, so account.#balance is not allowed, and the program never starts.
Member.isMember(value) should give true only for real Member objects, without reading the private value. Read how it does that. What do the two lines print?
class Member {
#id = 1;
static isMember(value) {
return typeof value === "object" && value !== null && #id in value;
}
}
console.log(Member.isMember(new Member()));
console.log(Member.isMember({ "#id": 1 }));class Member {
#id = 1;
static isMember(value) {
return typeof value === "object" && value !== null && #id in value;
}
}
console.log(Member.isMember(new Member()));
console.log(Member.isMember({ "#id": 1 }));The real Member object has the private #id, so line 7 prints true. The plain object only has a public key named "#id", so line 8 prints false.
This cart uses a private method, #requireName, to stop empty item names. Try changing "Tea" to "" to see it throw. As written, what does the program print?
class Cart {
#items = [];
add(name) {
this.#requireName(name);
this.#items.push(name);
return this.#items.length;
}
#requireName(name) {
if (name === "") throw new RangeError("Name required");
}
}
const cart = new Cart();
console.log(cart.add("Tea"));class Cart {
#items = [];
add(name) {
this.#requireName(name);
this.#items.push(name);
return this.#items.length;
}
#requireName(name) {
if (name === "") throw new RangeError("Name required");
}
}
const cart = new Cart();
console.log(cart.add("Tea"));The public add method asks the private #requireName method to check the name first. Then it adds the name to the private list and returns the list's length, 1.
You are building a VideoPlayer class with play() and pause() methods. It also keeps the current time, and that time may only change after a check. Which way of hiding data fits best?
Use private fields. Closures are great for factory functions. But a class with many objects, methods, private helpers, and brand checks is exactly what #private fields are made for.
Quiz: check your understanding
7 QUESTIONSQuestion 1 of 7What does
#balancemean in a class?Choose an answer to see the explanation.
Question 2 of 7What does this account program print?
Read the code, then predictclass Account { #balance = 100; deposit(amount) { this.#balance += amount; return this.#balance; } } const account = new Account(); console.log(account.deposit(25));Choose an answer to see the explanation.
Question 3 of 7What happens if code outside the class writes
account.#balance?Choose an answer to see the explanation.
Question 4 of 7What do the brand-check lines print?
Read the code, then predictclass Account { #balance = 0; static isAccount(value) { return typeof value === "object" && value !== null && #balance in value; } } console.log(Account.isAccount(new Account())); console.log(Account.isAccount({ "#balance": 0 }));Choose an answer to see the explanation.
Question 5 of 7What do Object.keys and JSON print?
Read the code, then predictclass Account { #balance = 100; owner = "Ada"; } const account = new Account(); console.log(Object.keys(account).join(",")); console.log(JSON.stringify(account));Choose an answer to see the explanation.
Question 6 of 7A static method in the class
Basereads a private static field. Child classes may call this method too. Which line is safest?Choose an answer to see the explanation.
Question 7 of 7When are closures a better fit than private fields?
Choose an answer to see the explanation.
Key takeaways
- A
#name is truly private. It is not just a naming habit like_balance. - Only the class body that creates a private field, method, getter, setter, or static member can use it.
- Writing
account.#xoutside the class, or creating the same private name twice, is aSyntaxError: the program won't start. - Reading a private field from an object the class didn't make is a
TypeErrorwhile the program runs. #x in objtells you whether the class made the object. It doesn't read the private value.- Private fields, closures, and WeakMaps all hide data. Pick the one that fits your code.
Remember the one-liner.
A #private member can only be used by code inside its class, and JavaScript itself blocks everyone else.
Up next: Extending built-ins & instanceof.