Вивчайте Using Static Methods in JavaScript | Mastering JavaScript Classes and Inheritance

Static methods provide shared functionality at the class level, accessible without creating an instance.

What Are Static Methods?

Think of a utility company that provides electricity. The company itself (class) provides the power, but you (an instance) don't need to create a power plant at your home. Instead, you access the company's service (static method) directly.

How to Define and Use Static Methods

Static methods are declared using the static keyword. You can call them directly from the class, but they don't have access to instance properties or methods since they operate at the class level.


              123456789101112131415
            
class MathUtils {
  // Static method to calculate the square of a number
  static square(number) {
    return number * number;
  }

  // Static method to calculate the cube of a number
  static cube(number) {
    return number * number * number;
  }
}

// Calling static methods directly from the class
console.log(MathUtils.square(4)); // Output: 16
console.log(MathUtils.cube(3)); // Output: 27

In this example, the square and cube methods are static, meaning they belong to the MathUtils class and can be called directly on the class itself. These methods perform mathematical operations and are shared by the entire class without needing to be associated with any specific instance.

Why Use Static Methods?

Static methods are useful when you want to provide functionality related to the class but don't need to be tied to individual instances. They're commonly used for utility functions, helper methods, or logic that applies broadly to the class as a whole.

Static methods are often used for operations that apply universally, like math calculations, date manipulation, or string formatting;
Static methods can also be used for operations that involve the class itself, like creating instances in specific ways, managing class-level configurations, or providing class-wide data access.

Example: Static Utility Method

Let's take a real-world example where a User class has a static method to compare two users' IDs. This method doesn't need to interact with any individual user's data, so it can be a static method on the class.


              12345678910111213141516171819
            
class User {
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }

  // Static method to compare user IDs
  static compareIds(user1, user2) {
    return user1.id === user2.id;
  }
}

const user1 = new User(101, 'Alice');
const user2 = new User(102, 'Bob');
const user3 = new User(101, 'Charlie');

// Using the static method to compare user IDs
console.log(User.compareIds(user1, user2)); // Output: false
console.log(User.compareIds(user1, user3)); // Output: true

In this example, the compareIds static method belongs to the User class and allows you to compare the IDs of two User instances without needing access to their individual properties or methods.

Key Differences Between Static and Instance Methods

Real-World Example: Application Utility Class

Let's take a scenario where an application needs to log data. A Logger class can have static methods to log messages with different levels (info, warning, error). These methods can be accessed globally without creating an instance of the logger.


              123456789101112131415161718
            
class Logger {
  static info(message) {
    console.log(`INFO: ${message}`);
  }

  static warning(message) {
    console.warn(`WARNING: ${message}`);
  }

  static error(message) {
    console.error(`ERROR: ${message}`);
  }
}

// Calling static methods directly from the Logger class
Logger.info('Application started');
Logger.warning('Low disk space');
Logger.error('Uncaught exception occurred');

In this example, the static methods info, warning, and error are utility functions that can be called globally to log messages at different levels. No instance of Logger is needed to use these methods.

1. What is a static method?

2. How do you define a static method in a class?

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 12

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.22

Свайпніть щоб показати меню