Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Static Properties | Classes
Advanced JavaScript Mastery
course content

Contenido del Curso

Advanced JavaScript Mastery

Advanced JavaScript Mastery

1. Classes
2. DOM Manipulation
3. Events and Event Handling
4. Asynchronous JavaScript and APIs

bookStatic Properties

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?
What is a static property?

What is a static property?

Selecciona la respuesta correcta

How do you access a static property?

How do you access a static property?

Selecciona la respuesta correcta

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

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

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 11
We're sorry to hear that something went wrong. What happened?
some-alt