It seems like you are using an ad blocker. To enhance your experience and support our website, please consider:

  1. Signing in to disable ads on our site.
  2. Sign up if you don't have an account yet.
  3. Or, disable your ad blocker by doing this:
    • Click on the ad blocker icon in your browser's toolbar.
    • Select "Pause on this site" or a similar option for lancecourse.com.

Javascript in 100 bits

Course by zooboole,

Last Updated on 2025-01-28 08:04:00

Lesson 23 - JavaScript Static Methods and Properties

What is a static method?

Static methods and properties belong to the class itself rather than instances of the class. They are useful for utility functions, constants, and helper methods that do not require an instance.


Example 1: Static Methods

class MathHelper {
    static add(a, b) {
        return a + b;
    }

    static subtract(a, b) {
        return a - b;
    }
}

console.log(MathHelper.add(5, 3));      // Output: 8
console.log(MathHelper.subtract(10, 4)); // Output: 6

? We call add() and subtract() directly on the class!


Explanation

  • static keyword is used to define static methods and properties.
  • They are accessed using the class name instead of an instance.
  • Static methods cannot access this inside instance methods.

Example 2: Static Properties

class Config {
    static appName = "MyApp";
    static version = "1.0.0";

    static getInfo() {
        return `${this.appName} - Version ${this.version}`;
    }
}

console.log(Config.appName);   // Output: MyApp
console.log(Config.getInfo()); // Output: MyApp - Version 1.0.0
  • We access appName and getInfo() directly from the class!

Try Your Hand

Steps:

  1. Create a File:

    • Name it lesson23-static.html.
  2. Write the Code:

    • Copy the following code:

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Lesson 23 - Static Methods</title>
      </head>
      <body>
      <script>
         class Temperature {
             static toCelsius(fahrenheit) {
                 return (fahrenheit - 32) * 5 / 9;
             }
      
             static toFahrenheit(celsius) {
                 return (celsius * 9 / 5) + 32;
             }
         }
      
         console.log(Temperature.toCelsius(100)); // Converts 100°F to Celsius
         console.log(Temperature.toFahrenheit(0)); // Converts 0°C to Fahrenheit
      </script>
      </body>
      </html>
  3. Save the File.

  4. Preview in Browser and Check Console Output.


Experiment

  1. Modify MathHelper to include a multiply() method:

    class MathHelper {
       static multiply(a, b) {
           return a * b;
       }
    }
    
    console.log(MathHelper.multiply(4, 5)); // Output: 20
  2. Add a new static property to Config named author and access it.

Key Takeaways

  • Use static for methods and properties that belong to the class.
  • They cannot be called on class instances.
  • Static methods are great for utility functions.