Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Exploring Static Properties in JavaScript | Mastering JavaScript Classes and Inheritance
Advanced JavaScript Mastery

bookExploring Static Properties in JavaScript

In programming, static properties allow shared information to exist across all instances of a class, making them ideal for consistent data.

What Are Static Properties?

Static properties belong to the class itself rather than any particular class instance. This means that static properties are shared among all instances and can be accessed directly from the class without needing to instantiate an object. They are often used for utility functions, constants, or data that should be shared across all instances of a class.

Consider a company where each employee (an instance of a class) has their own personal information (name, position), but the company's address (a static property) is the same for all employees. The address belongs to the company itself, not to any individual employee.

How to Declare and Use Static Properties

To declare a static property, use the static keyword inside the class. Static properties can only be accessed using the class name, not from class instances.


              
1234567891011121314151617181920

            
class Company {
  static headquarters = '123 Main St'; // Static property

  constructor(name) {
    this.name = name; // Instance property
  }

  getCompanyInfo() {
    return `${this.name} is located at ${Company.headquarters}`;
  }
}

const google = new Company('Google');
console.log(google.getCompanyInfo()); // Output: Google is located at 123 Main St

const amazon = new Company('Amazon');
console.log(amazon.getCompanyInfo()); // Output: Amazon is located at 123 Main St

// Accessing the static property directly from the class
console.log(Company.headquarters); // Output: 123 Main St
copy

In this example, the headquarters property is shared among all instances of the Company class. Both Google and Amazon instances reference the same headquarters address. Static properties are accessed directly using the class name (Company.headquarters), not through instances of the class.

How Static Properties Are Shared Among All Instances of a Class

Since static properties are attached to the class itself, they are not copied for each instance. All instances of the class refer to the same static property, making it an efficient way to store data that doesn't need to change per instance.

Example: Counter for the Number of Instances Created

Let's say we want to keep track of how many instances of a class have been created. We can use a static property to hold the count of instances, and increment it every time a new instance is created.


              
123456789101112131415161718192021222324

            
class User {
  static count = 0; // Static property to track the number of users

  constructor(name) {
    this.name = name;
    User.count++; // Increment static property every time a new user is created
  }

  getUserInfo() {
    return `${this.name} is user number ${User.count}`;
  }
}

const user1 = new User('John');
const user2 = new User('Jane');
const user3 = new User('Alice');

// Accessing the static property directly from the class
console.log(User.count); // Output: 3 (number of users created)

// Each instance can see the total count of users
console.log(user1.getUserInfo()); // Output: John is user number 3
console.log(user2.getUserInfo()); // Output: Jane is user number 3
console.log(user3.getUserInfo()); // Output: Alice is user number 3
copy

In this example, every time a new user is created, the static count property is incremented. All instances of the User class share the same count value, as it belongs to the class itself.

Benefits of Static Properties

Since static properties are shared across instances, there's no need to duplicate data, which keeps the code cleaner and more efficient. They're especially useful for storing information that's the same for all instances, like configuration settings or constants, helping maintain consistency throughout the code.

Real-World Example: Application Configuration

In a real-world scenario, you might have an application configuration object that stores shared settings across the application. Static properties would be an excellent choice for such use cases.


              
12345678910111213141516171819202122

            
class AppConfig {
  static appName = 'QuirkApp Solutions'; // Shared configuration setting
  static version = '1.3.14'; // Shared configuration setting

  constructor(user) {
    this.user = user;
  }

  getUserConfig() {
    return `${this.user} is using ${AppConfig.appName} version ${AppConfig.version}`;
  }
}

const user1 = new AppConfig('Alice');
const user2 = new AppConfig('Bob');

console.log(user1.getUserConfig()); // Output: Alice is using QuirkApp Solutions version 1.3.14
console.log(user2.getUserConfig()); // Output: Bob is using QuirkApp Solutions version 1.3.14

// Accessing static properties directly from the class
console.log(AppConfig.appName); // Output: QuirkApp Solutions
console.log(AppConfig.version); // Output: 1.3.14
copy

In this example, the app name and version are shared across all users of the application. The static properties appName and version belong to the class and are not replicated for each instance.

1. What is a static property?

2. How do you access a static property?

3. In the following code, what will console.log(User.count); output?

question mark

What is a static property?

Select the correct answer

question mark

How do you access a static property?

Select the correct answer

question mark

In the following code, what will console.log(User.count); output?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 11

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.22

bookExploring Static Properties in JavaScript

Desliza para mostrar el menú

In programming, static properties allow shared information to exist across all instances of a class, making them ideal for consistent data.

What Are Static Properties?

Static properties belong to the class itself rather than any particular class instance. This means that static properties are shared among all instances and can be accessed directly from the class without needing to instantiate an object. They are often used for utility functions, constants, or data that should be shared across all instances of a class.

Consider a company where each employee (an instance of a class) has their own personal information (name, position), but the company's address (a static property) is the same for all employees. The address belongs to the company itself, not to any individual employee.

How to Declare and Use Static Properties

To declare a static property, use the static keyword inside the class. Static properties can only be accessed using the class name, not from class instances.


              
1234567891011121314151617181920

            
class Company {
  static headquarters = '123 Main St'; // Static property

  constructor(name) {
    this.name = name; // Instance property
  }

  getCompanyInfo() {
    return `${this.name} is located at ${Company.headquarters}`;
  }
}

const google = new Company('Google');
console.log(google.getCompanyInfo()); // Output: Google is located at 123 Main St

const amazon = new Company('Amazon');
console.log(amazon.getCompanyInfo()); // Output: Amazon is located at 123 Main St

// Accessing the static property directly from the class
console.log(Company.headquarters); // Output: 123 Main St
copy

In this example, the headquarters property is shared among all instances of the Company class. Both Google and Amazon instances reference the same headquarters address. Static properties are accessed directly using the class name (Company.headquarters), not through instances of the class.

How Static Properties Are Shared Among All Instances of a Class

Since static properties are attached to the class itself, they are not copied for each instance. All instances of the class refer to the same static property, making it an efficient way to store data that doesn't need to change per instance.

Example: Counter for the Number of Instances Created

Let's say we want to keep track of how many instances of a class have been created. We can use a static property to hold the count of instances, and increment it every time a new instance is created.


              
123456789101112131415161718192021222324

            
class User {
  static count = 0; // Static property to track the number of users

  constructor(name) {
    this.name = name;
    User.count++; // Increment static property every time a new user is created
  }

  getUserInfo() {
    return `${this.name} is user number ${User.count}`;
  }
}

const user1 = new User('John');
const user2 = new User('Jane');
const user3 = new User('Alice');

// Accessing the static property directly from the class
console.log(User.count); // Output: 3 (number of users created)

// Each instance can see the total count of users
console.log(user1.getUserInfo()); // Output: John is user number 3
console.log(user2.getUserInfo()); // Output: Jane is user number 3
console.log(user3.getUserInfo()); // Output: Alice is user number 3
copy

In this example, every time a new user is created, the static count property is incremented. All instances of the User class share the same count value, as it belongs to the class itself.

Benefits of Static Properties

Since static properties are shared across instances, there's no need to duplicate data, which keeps the code cleaner and more efficient. They're especially useful for storing information that's the same for all instances, like configuration settings or constants, helping maintain consistency throughout the code.

Real-World Example: Application Configuration

In a real-world scenario, you might have an application configuration object that stores shared settings across the application. Static properties would be an excellent choice for such use cases.


              
12345678910111213141516171819202122

            
class AppConfig {
  static appName = 'QuirkApp Solutions'; // Shared configuration setting
  static version = '1.3.14'; // Shared configuration setting

  constructor(user) {
    this.user = user;
  }

  getUserConfig() {
    return `${this.user} is using ${AppConfig.appName} version ${AppConfig.version}`;
  }
}

const user1 = new AppConfig('Alice');
const user2 = new AppConfig('Bob');

console.log(user1.getUserConfig()); // Output: Alice is using QuirkApp Solutions version 1.3.14
console.log(user2.getUserConfig()); // Output: Bob is using QuirkApp Solutions version 1.3.14

// Accessing static properties directly from the class
console.log(AppConfig.appName); // Output: QuirkApp Solutions
console.log(AppConfig.version); // Output: 1.3.14
copy

In this example, the app name and version are shared across all users of the application. The static properties appName and version belong to the class and are not replicated for each instance.

1. What is a static property?

2. How do you access a static property?

3. In the following code, what will console.log(User.count); output?

question mark

What is a static property?

Select the correct answer

question mark

How do you access a static property?

Select the correct answer

question mark

In the following code, what will console.log(User.count); output?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 11
some-alt