JavaScript Fundamentals

Private Fields

Hide class data with true private fields using # syntax

Find videos you like?

Save to resource drawer for future reference!

What are Private Fields?

Private fields are truly hidden class properties that can't be accessed from outside the class. Use # prefix to make fields private!

Secret Box Analogy

Like a locked box that only the class can open! The # symbol marks fields as private - no one outside can access them, not even subclasses!

Creating Private Fields

Use # prefix to make fields private

Public vs Private

Public Field

class User {
  name = 'Alice';  // Public
}

const user = new User();
console.log(user.name);  // 'Alice' ✓
user.name = 'Bob';       // Can change ✓

Private Field

class User {
  #password = 'secret';  // Private
}

const user = new User();
console.log(user.#password);  // Error! ✗
user.#password = 'new';       // Error! ✗

Basic Private Fields

Truly hidden data

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Private Methods

Hidden helper methods inside class

Internal Helpers

Methods can also be private - perfect for internal helper functions

class Validator {
  #isValidEmail(email) {  // Private method
    return email.includes('@') && email.includes('.');
  }
  
  validateUser(email) {  // Public method
    if (this.#isValidEmail(email)) {
      return 'Valid email';
    }
    return 'Invalid email';
  }
}

const validator = new Validator();
console.log(validator.validateUser('test@example.com'));  // 'Valid email'

// Cannot call private method
validator.#isValidEmail('test');  // SyntaxError!

Private Methods Examples

Hidden helper functions

javascript

code

DarkEditable

class CreditCard {
  #number;
  
  constructor(number) {
    this.#number = number;
  }
  
  // Private method to mask card number
  #maskNumber() {
    const last4 = this.#number.slice(-4);
    return '****-****-****-' + last4;
  }
  
  // Private validation
  #isValidNumber() {
    return this.#number.length === 16;
  }
  
  // Public method uses private methods
  getDisplayNumber() {
    if (!this.#isValidNumber()) {
      return 'Invalid card number';
    }
    return this.#maskNumber();
  }
}

const card = new CreditCard('1234567812345678');
console.log(card.getDisplayNumber());
// '****-****-****-5678'

// Private methods cannot be called
// card.#maskNumber();  // SyntaxError!

// Real-world: Password hashing
class User {
  #password;
  
  constructor(password) {
    this.#password = this.#hashPassword(password);
  }
  
  // Private method
  #hashPassword(password) {
    // Simplified hash (use real hashing in production!)
    return btoa(password);
  }
  
  // Private method
  #verifyHash(password, hash) {
    return this.#hashPassword(password) === hash;
  }
  
  // Public method
  checkPassword(password) {
    return this.#verifyHash(password, this.#password);
  }
}

const user = new User('mySecret123');
console.log(user.checkPassword('wrong'));      // false
console.log(user.checkPassword('mySecret123')); // true

// Cannot access private data or methods
// console.log(user.#password);        // Error!
// user.#hashPassword('test');         // Error!

Console Output

Click "Run Code" to see output here...

Controlled Access with Getters/Setters

Validate and control private field access

Controlled Exposure

Use getters/setters to provide controlled access to private fields

class Temperature {
  #celsius;
  
  constructor(celsius) {
    this.#celsius = celsius;
  }
  
  get celsius() {
    return this.#celsius;
  }
  
  set celsius(value) {
    if (value < -273.15) {
      throw new Error('Below absolute zero!');
    }
    this.#celsius = value;
  }
}

const temp = new Temperature(25);
console.log(temp.celsius);  // 25

temp.celsius = 30;  // ✓ Valid
temp.celsius = -300;  // ✗ Error!

Getters/Setters with Private Fields

Validated access

javascript

code

DarkEditable

class Person {
  #age;
  #name;
  
  constructor(name, age) {
    this.#name = name;
    this.#age = age;
  }
  
  // Getter - read-only access
  get name() {
    return this.#name;
  }
  
  // Getter with validation
  get age() {
    return this.#age;
  }
  
  // Setter with validation
  set age(value) {
    if (value < 0 || value > 150) {
      console.log('Invalid age');
      return;
    }
    this.#age = value;
  }
  
  // Computed property using private field
  get isAdult() {
    return this.#age >= 18;
  }
}

const person = new Person('Alice', 25);

console.log(person.name);    // 'Alice'
console.log(person.age);     // 25
console.log(person.isAdult); // true

person.age = 30;  // ✓ Valid
console.log(person.age);  // 30

person.age = -5;  // ✗ 'Invalid age'
console.log(person.age);  // 30 (unchanged)

// Real-world: Product with price control
class Product {
  #price;
  #discount = 0;
  
  constructor(name, price) {
    this.name = name;  // Public
    this.#price = price;
  }
  
  get price() {
    return this.#price * (1 - this.#discount);
  }
  
  set price(value) {
    if (value < 0) {
      throw new Error('Price cannot be negative');
    }
    this.#price = value;
  }
  
  applyDiscount(percent) {
    if (percent >= 0 && percent <= 100) {
      this.#discount = percent / 100;
    }
  }
  
  get originalPrice() {
    return this.#price;
  }
}

const product = new Product('Laptop', 1000);
console.log(product.price);  // 1000

product.applyDiscount(20);
console.log(product.price);          // 800 (with discount)
console.log(product.originalPrice);  // 1000 (original)

// Cannot access private fields directly
// console.log(product.#price);     // Error!
// console.log(product.#discount);  // Error!

Console Output

Click "Run Code" to see output here...

Static Private Fields

Private class-level data

Class-Level Privacy

Combine static and private for hidden class data

class Database {
  static #connection = null;  // Static private
  static #maxConnections = 5;
  
  static connect() {
    if (!this.#connection) {
      this.#connection = 'Connected';
      console.log('Database connected');
    }
  }
  
  static getStatus() {
    return this.#connection ? 'Connected' : 'Disconnected';
  }
}

Database.connect();
console.log(Database.getStatus());  // 'Connected'

// Cannot access static private fields
// Database.#connection;  // Error!

Static Private Fields Example

Singleton pattern with privacy

javascript

code

DarkEditable

class Config {
  static #instance = null;
  static #settings = {};
  
  #id;
  
  constructor() {
    if (Config.#instance) {
      return Config.#instance;
    }
    this.#id = Math.random();
    Config.#instance = this;
  }
  
  static set(key, value) {
    Config.#settings[key] = value;
  }
  
  static get(key) {
    return Config.#settings[key];
  }
  
  static reset() {
    Config.#settings = {};
  }
}

// Set config
Config.set('apiUrl', 'https://api.example.com');
Config.set('timeout', 5000);

console.log(Config.get('apiUrl'));  // 'https://api.example.com'

// Singleton pattern - always same instance
const config1 = new Config();
const config2 = new Config();
console.log(config1 === config2);  // true

// Cannot access private static fields
// console.log(Config.#settings);  // Error!
// console.log(Config.#instance);  // Error!

// Real-world: Counter with private state
class IDGenerator {
  static #counter = 0;
  static #prefix = 'ID';
  
  static generate() {
    return `${IDGenerator.#prefix}-${++IDGenerator.#counter}`;
  }
  
  static getCount() {
    return IDGenerator.#counter;
  }
  
  static reset() {
    IDGenerator.#counter = 0;
  }
}

console.log(IDGenerator.generate());  // 'ID-1'
console.log(IDGenerator.generate());  // 'ID-2'
console.log(IDGenerator.generate());  // 'ID-3'
console.log(IDGenerator.getCount());  // 3

IDGenerator.reset();
console.log(IDGenerator.generate());  // 'ID-1'

Console Output

Click "Run Code" to see output here...

Key Takeaways

Do This ✅

• Use # for truly private data
• Hide sensitive data (passwords, keys)
• Use getters/setters for controlled access
• Make helper methods private
• Use for encapsulation and data hiding

Avoid This ❌

• Don't make everything private (use public when appropriate)
• Don't forget # prefix in class methods
• Don't use _ convention for truly private data
• Don't access private fields in child classes (they can't!)
• Don't forget browser support (ES2022+)

Privacy Comparison

Public: this.field - Accessible everywhere

Convention "private": this._field - Not enforced, just convention

True private: this.#field - Truly hidden, enforced by language ✓

Browser Support

Private fields are ES2022+ feature. Check browser compatibility for production use. All modern browsers (2022+) support them!

Previous Topic

Static Methods

Class-level methods that don't require instantiation.

Next Topic

Asynchronous JavaScript

Understanding synchronous vs asynchronous code execution.

Ask a Question

Have a question about Private Fields? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Fundamentals

Private Fields

Hide class data with true private fields using # syntax

Find videos you like?

Save to resource drawer for future reference!

What are Private Fields?

Private fields are truly hidden class properties that can't be accessed from outside the class. Use # prefix to make fields private!

Secret Box Analogy

Like a locked box that only the class can open! The # symbol marks fields as private - no one outside can access them, not even subclasses!

Creating Private Fields

Use # prefix to make fields private

Public vs Private

Public Field

class User {
  name = 'Alice';  // Public
}

const user = new User();
console.log(user.name);  // 'Alice' ✓
user.name = 'Bob';       // Can change ✓

Private Field

class User {
  #password = 'secret';  // Private
}

const user = new User();
console.log(user.#password);  // Error! ✗
user.#password = 'new';       // Error! ✗

Basic Private Fields

Truly hidden data

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Private Methods

Hidden helper methods inside class

Internal Helpers

Methods can also be private - perfect for internal helper functions

class Validator {
  #isValidEmail(email) {  // Private method
    return email.includes('@') && email.includes('.');
  }
  
  validateUser(email) {  // Public method
    if (this.#isValidEmail(email)) {
      return 'Valid email';
    }
    return 'Invalid email';
  }
}

const validator = new Validator();
console.log(validator.validateUser('test@example.com'));  // 'Valid email'

// Cannot call private method
validator.#isValidEmail('test');  // SyntaxError!

Private Methods Examples

Hidden helper functions

javascript

code

DarkEditable

const card = new CreditCard('1234567812345678');
console.log(card.getDisplayNumber());
// '****-****-****-5678'

// Private methods cannot be called
// card.#maskNumber();  // SyntaxError!

const user = new User('mySecret123');
console.log(user.checkPassword('wrong'));      // false
console.log(user.checkPassword('mySecret123')); // true

// Cannot access private data or methods
// console.log(user.#password);        // Error!
// user.#hashPassword('test');         // Error!

Console Output

Click "Run Code" to see output here...

Controlled Access with Getters/Setters

Validate and control private field access

Controlled Exposure

Use getters/setters to provide controlled access to private fields

class Temperature {
  #celsius;
  
  constructor(celsius) {
    this.#celsius = celsius;
  }
  
  get celsius() {
    return this.#celsius;
  }
  
  set celsius(value) {
    if (value < -273.15) {
      throw new Error('Below absolute zero!');
    }
    this.#celsius = value;
  }
}

const temp = new Temperature(25);
console.log(temp.celsius);  // 25

temp.celsius = 30;  // ✓ Valid
temp.celsius = -300;  // ✗ Error!

Getters/Setters with Private Fields

Validated access

javascript

code

DarkEditable

const person = new Person('Alice', 25);

console.log(person.name);    // 'Alice'
console.log(person.age);     // 25
console.log(person.isAdult); // true

person.age = 30;  // ✓ Valid
console.log(person.age);  // 30

person.age = -5;  // ✗ 'Invalid age'
console.log(person.age);  // 30 (unchanged)

const product = new Product('Laptop', 1000);
console.log(product.price);  // 1000

product.applyDiscount(20);
console.log(product.price);          // 800 (with discount)
console.log(product.originalPrice);  // 1000 (original)

// Cannot access private fields directly
// console.log(product.#price);     // Error!
// console.log(product.#discount);  // Error!

Console Output

Click "Run Code" to see output here...

Static Private Fields

Private class-level data

Class-Level Privacy

Combine static and private for hidden class data

class Database {
  static #connection = null;  // Static private
  static #maxConnections = 5;
  
  static connect() {
    if (!this.#connection) {
      this.#connection = 'Connected';
      console.log('Database connected');
    }
  }
  
  static getStatus() {
    return this.#connection ? 'Connected' : 'Disconnected';
  }
}

Database.connect();
console.log(Database.getStatus());  // 'Connected'

// Cannot access static private fields
// Database.#connection;  // Error!

Static Private Fields Example

Singleton pattern with privacy

javascript

code

DarkEditable

// Set config
Config.set('apiUrl', 'https://api.example.com');
Config.set('timeout', 5000);

console.log(Config.get('apiUrl'));  // 'https://api.example.com'

// Singleton pattern - always same instance
const config1 = new Config();
const config2 = new Config();
console.log(config1 === config2);  // true

// Cannot access private static fields
// console.log(Config.#settings);  // Error!
// console.log(Config.#instance);  // Error!

console.log(IDGenerator.generate());  // 'ID-1'
console.log(IDGenerator.generate());  // 'ID-2'
console.log(IDGenerator.generate());  // 'ID-3'
console.log(IDGenerator.getCount());  // 3

IDGenerator.reset();
console.log(IDGenerator.generate());  // 'ID-1'

Console Output

Click "Run Code" to see output here...

Key Takeaways

Do This ✅

• Use # for truly private data
• Hide sensitive data (passwords, keys)
• Use getters/setters for controlled access
• Make helper methods private
• Use for encapsulation and data hiding

Avoid This ❌

• Don't make everything private (use public when appropriate)
• Don't forget # prefix in class methods
• Don't use _ convention for truly private data
• Don't access private fields in child classes (they can't!)
• Don't forget browser support (ES2022+)

Privacy Comparison

Public: this.field - Accessible everywhere

Convention "private": this._field - Not enforced, just convention

True private: this.#field - Truly hidden, enforced by language ✓

Browser Support

Private fields are ES2022+ feature. Check browser compatibility for production use. All modern browsers (2022+) support them!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Static Methods

Asynchronous JavaScript

JavaScript Code Editor

Building Your Learning Module...

Private Fields

What are Private Fields?

Secret Box Analogy

Public vs Private

Public Field

Private Field

Basic Private Fields

Internal Helpers

Private Methods Examples

Controlled Exposure

Getters/Setters with Private Fields

Class-Level Privacy

Static Private Fields Example

Key Takeaways

Do This ✅

Avoid This ❌

Privacy Comparison

Browser Support

Static Methods

Asynchronous JavaScript

JavaScript Code Editor

Private Fields

What are Private Fields?

Secret Box Analogy

Public vs Private

Public Field

Private Field

Basic Private Fields

Internal Helpers

Private Methods Examples

Controlled Exposure

Getters/Setters with Private Fields

Class-Level Privacy

Static Private Fields Example

Key Takeaways

Do This ✅

Avoid This ❌

Privacy Comparison

Browser Support