JavaScript Fundamentals

Static Methods

Class-level utility methods that don't need instances

Find videos you like?

Save to resource drawer for future reference!

What are Static Methods?

Static methods belong to the class itself, not to instances. They're like utility functions that live inside a class - call them directly on the class, no instance needed!

Toolbox Analogy

Think of static methods as tools in a toolbox (the class) that you can use without taking out the tools. You don't need to create an instance - just call the method on the class itself!

Creating Static Methods

Use static keyword for class-level methods

Instance vs Static

Instance Method

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

const calc = new Calculator();
calc.add(5, 3);  // 8

Need to create instance first

Static Method ✅

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

Calculator.add(5, 3);  // 8

Call directly on class!

Basic Static Method

Call methods without creating instances

javascript

code

DarkEditable

Console Output

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

When to Use Static Methods

Perfect for utility functions

Use Cases

✓ Utility Functions

Math operations, string formatting, data conversion

✓ Factory Methods

Create instances in specific ways

✓ Validation

Check data before creating instances

✓ Configuration

Class-level settings and constants

Real-World Static Methods

Common use cases

javascript

code

DarkEditable

// Utility functions
class StringHelper {
  static capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
  }
  
  static truncate(str, length) {
    return str.length > length ? str.slice(0, length) + '...' : str;
  }
  
  static slugify(str) {
    return str.toLowerCase().replace(/\s+/g, '-');
  }
}

console.log(StringHelper.capitalize('hello'));  // 'Hello'
console.log(StringHelper.truncate('Long text here', 8));  // 'Long tex...'
console.log(StringHelper.slugify('My Blog Post'));  // 'my-blog-post'

// Validation
class User {
  static isValidEmail(email) {
    return email.includes('@') && email.includes('.');
  }
  
  static isStrongPassword(password) {
    return password.length >= 8 && /\d/.test(password);
  }
}

console.log(User.isValidEmail('test@example.com'));  // true
console.log(User.isStrongPassword('pass'));  // false
console.log(User.isStrongPassword('pass1234'));  // true

// Factory methods
class Color {
  constructor(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
  }
  
  static fromHex(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return new Color(r, g, b);
  }
  
  static red() {
    return new Color(255, 0, 0);
  }
  
  static blue() {
    return new Color(0, 0, 255);
  }
}

const color1 = Color.fromHex('#FF5733');
const color2 = Color.red();
console.log(color2.r);  // 255

Console Output

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

Built-in Static Methods

JavaScript has many built-in static methods

Common Built-in Static Methods

Math.* methods

Math.round(4.7);      // 5
Math.floor(4.7);      // 4
Math.random();        // 0.123...
Math.max(1, 5, 3);    // 5

Object.* methods

Object.keys({a: 1, b: 2});     // ['a', 'b']
Object.values({a: 1, b: 2});   // [1, 2]
Object.entries({a: 1, b: 2});  // [['a',1],['b',2]]

Array.* methods

Array.isArray([1, 2]);     // true
Array.from('hello');        // ['h','e','l','l','o']
Array.of(1, 2, 3);          // [1, 2, 3]

Using Built-in Static Methods

JavaScript's native static methods

javascript

code

DarkEditable

// Math static methods
console.log(Math.round(4.7));       // 5
console.log(Math.floor(4.3));       // 4
console.log(Math.ceil(4.1));        // 5
console.log(Math.abs(-5));          // 5
console.log(Math.max(1, 5, 3, 9));  // 9
console.log(Math.min(1, 5, 3, 9));  // 1

// Random number between 1 and 10
const random = Math.floor(Math.random() * 10) + 1;
console.log(random);  // 1-10

// Object static methods
const user = { name: 'Alice', age: 25 };

console.log(Object.keys(user));     // ['name', 'age']
console.log(Object.values(user));   // ['Alice', 25]
console.log(Object.entries(user));  // [['name','Alice'],['age',25]]

// Check if property exists
console.log(Object.hasOwn(user, 'name'));  // true

// Array static methods
console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray('hello'));    // false

const arr = Array.from('hello');
console.log(arr);  // ['h', 'e', 'l', 'l', 'o']

const nums = Array.of(1, 2, 3);
console.log(nums);  // [1, 2, 3]

// Number static methods
console.log(Number.isInteger(5));      // true
console.log(Number.isInteger(5.5));    // false
console.log(Number.parseInt('123'));   // 123
console.log(Number.parseFloat('3.14'));  // 3.14

Console Output

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

Static vs Instance Methods

Understanding the difference

Key Differences

Instance Methods

• Called on instances (objects)
• Can access instance data with this
• Each instance has its own copy
• Use for object-specific behavior

Static Methods

• Called on class itself
• Can't access instance data
• Shared across all instances
• Use for utility/helper functions

Static vs Instance Comparison

Side-by-side comparison

javascript

code

DarkEditable

class Circle {
  constructor(radius) {
    this.radius = radius;  // Instance property
  }
  
  // Instance method - needs instance, uses 'this'
  getArea() {
    return Math.PI * this.radius ** 2;
  }
  
  // Static method - doesn't need instance
  static compareAreas(circle1, circle2) {
    return circle1.getArea() - circle2.getArea();
  }
  
  // Static utility - no instance needed
  static calculateArea(radius) {
    return Math.PI * radius ** 2;
  }
}

// Create instances
const circle1 = new Circle(5);
const circle2 = new Circle(10);

// Call instance method on instance
console.log(circle1.getArea());  // 78.54

// Call static method on class
console.log(Circle.compareAreas(circle1, circle2));  // negative number

// Static method - no instance needed
console.log(Circle.calculateArea(7));  // 153.94

// This WON'T work:
// circle1.compareAreas(circle1, circle2);  // Error!
// Circle.getArea();  // Error!

// Real-world example: User class
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  
  // Instance method - uses 'this'
  getDisplayName() {
    return this.name.toUpperCase();
  }
  
  // Static method - validation utility
  static isValidEmail(email) {
    return email.includes('@');
  }
  
  // Static factory method
  static createGuest() {
    return new User('Guest', 'guest@example.com');
  }
}

const user = new User('Alice', 'alice@example.com');
console.log(user.getDisplayName());  // 'ALICE'

// Static methods on class
console.log(User.isValidEmail('test@test.com'));  // true
const guest = User.createGuest();
console.log(guest.name);  // 'Guest'

Console Output

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

Complete Real-World Example

Database connection class with static methods

javascript

code

DarkEditable

class Database {
  static #connection = null;  // Static private field
  static #config = {
    host: 'localhost',
    port: 5432
  };
  
  // Static method - get or create connection (Singleton pattern)
  static connect() {
    if (!this.#connection) {
      this.#connection = {
        host: this.#config.host,
        port: this.#config.port,
        status: 'connected'
      };
      console.log('Database connected');
    }
    return this.#connection;
  }
  
  // Static method - close connection
  static disconnect() {
    if (this.#connection) {
      this.#connection = null;
      console.log('Database disconnected');
    }
  }
  
  // Static method - get status
  static getStatus() {
    return this.#connection ? 'Connected' : 'Disconnected';
  }
  
  // Static method - configure before connecting
  static configure(options) {
    this.#config = { ...this.#config, ...options };
  }
}

// Use static methods
Database.configure({ host: 'prod-db.com', port: 3306 });
Database.connect();
console.log(Database.getStatus());  // 'Connected'
Database.disconnect();

// Another example: ID Generator
class IDGenerator {
  static #counter = 0;
  static #prefix = 'ID';
  
  static generate() {
    return `${this.#prefix}-${++this.#counter}`;
  }
  
  static setPrefix(prefix) {
    this.#prefix = prefix;
  }
  
  static reset() {
    this.#counter = 0;
  }
  
  static getCount() {
    return this.#counter;
  }
}

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

IDGenerator.setPrefix('USER');
console.log(IDGenerator.generate());  // 'USER-4'

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

Console Output

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

Key Takeaways

Do This ✅

• Use static for utility functions
• Call on class, not instances
• Use for validation and helpers
• Use for factory methods
• Use for configuration

Avoid This ❌

• Don't call static methods on instances
• Don't use this for instance data in static methods
• Don't make everything static
• Don't confuse with instance methods
• Don't use for object-specific behavior

When to Use Static Methods

✓ Utility functions: StringHelper.capitalize()

✓ Validation: User.isValidEmail()

✓ Factory methods: Color.fromHex()

✓ Configuration: Database.configure()

✓ Counters/State: IDGenerator.generate()

Remember

Static methods are called on the class (e.g., Math.round()), instance methods are called on objects (e.g., array.push())!

Previous Topic

Getters & Setters

Accessor properties for controlled property access in objects and classes.

Next Topic

Private Fields

True private class fields and methods using the # prefix.

Ask a Question

Have a question about Static Methods? 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

Static Methods

Class-level utility methods that don't need instances

Find videos you like?

Save to resource drawer for future reference!

What are Static Methods?

Static methods belong to the class itself, not to instances. They're like utility functions that live inside a class - call them directly on the class, no instance needed!

Toolbox Analogy

Think of static methods as tools in a toolbox (the class) that you can use without taking out the tools. You don't need to create an instance - just call the method on the class itself!

Creating Static Methods

Use static keyword for class-level methods

Instance vs Static

Instance Method

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

const calc = new Calculator();
calc.add(5, 3);  // 8

Need to create instance first

Static Method ✅

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

Calculator.add(5, 3);  // 8

Call directly on class!

Basic Static Method

Call methods without creating instances

javascript

code

DarkEditable

Console Output

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

When to Use Static Methods

Perfect for utility functions

Use Cases

✓ Utility Functions

Math operations, string formatting, data conversion

✓ Factory Methods

Create instances in specific ways

✓ Validation

Check data before creating instances

✓ Configuration

Class-level settings and constants

Real-World Static Methods

Common use cases

javascript

code

DarkEditable

console.log(User.isValidEmail('test@example.com'));  // true
console.log(User.isStrongPassword('pass'));  // false
console.log(User.isStrongPassword('pass1234'));  // true

const color1 = Color.fromHex('#FF5733');
const color2 = Color.red();
console.log(color2.r);  // 255

Console Output

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

Built-in Static Methods

JavaScript has many built-in static methods

Common Built-in Static Methods

Math.* methods

Math.round(4.7);      // 5
Math.floor(4.7);      // 4
Math.random();        // 0.123...
Math.max(1, 5, 3);    // 5

Object.* methods

Object.keys({a: 1, b: 2});     // ['a', 'b']
Object.values({a: 1, b: 2});   // [1, 2]
Object.entries({a: 1, b: 2});  // [['a',1],['b',2]]

Array.* methods

Array.isArray([1, 2]);     // true
Array.from('hello');        // ['h','e','l','l','o']
Array.of(1, 2, 3);          // [1, 2, 3]

Using Built-in Static Methods

JavaScript's native static methods

javascript

code

DarkEditable

// Random number between 1 and 10
const random = Math.floor(Math.random() * 10) + 1;
console.log(random);  // 1-10

// Object static methods
const user = { name: 'Alice', age: 25 };

console.log(Object.keys(user));     // ['name', 'age']
console.log(Object.values(user));   // ['Alice', 25]
console.log(Object.entries(user));  // [['name','Alice'],['age',25]]

// Check if property exists
console.log(Object.hasOwn(user, 'name'));  // true

// Array static methods
console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray('hello'));    // false

const arr = Array.from('hello');
console.log(arr);  // ['h', 'e', 'l', 'l', 'o']

const nums = Array.of(1, 2, 3);
console.log(nums);  // [1, 2, 3]

Console Output

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

Static vs Instance Methods

Understanding the difference

Key Differences

Instance Methods

• Called on instances (objects)
• Can access instance data with this
• Each instance has its own copy
• Use for object-specific behavior

Static Methods

• Called on class itself
• Can't access instance data
• Shared across all instances
• Use for utility/helper functions

Static vs Instance Comparison

Side-by-side comparison

javascript

code

DarkEditable

// Create instances
const circle1 = new Circle(5);
const circle2 = new Circle(10);

// Call instance method on instance
console.log(circle1.getArea());  // 78.54

// Call static method on class
console.log(Circle.compareAreas(circle1, circle2));  // negative number

// Static method - no instance needed
console.log(Circle.calculateArea(7));  // 153.94

// This WON'T work:
// circle1.compareAreas(circle1, circle2);  // Error!
// Circle.getArea();  // Error!

const user = new User('Alice', 'alice@example.com');
console.log(user.getDisplayName());  // 'ALICE'

// Static methods on class
console.log(User.isValidEmail('test@test.com'));  // true
const guest = User.createGuest();
console.log(guest.name);  // 'Guest'

Console Output

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

Complete Real-World Example

Database connection class with static methods

javascript

code

DarkEditable

// Use static methods
Database.configure({ host: 'prod-db.com', port: 3306 });
Database.connect();
console.log(Database.getStatus());  // 'Connected'
Database.disconnect();

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

IDGenerator.setPrefix('USER');
console.log(IDGenerator.generate());  // 'USER-4'

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

Console Output

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

Key Takeaways

Do This ✅

• Use static for utility functions
• Call on class, not instances
• Use for validation and helpers
• Use for factory methods
• Use for configuration

Avoid This ❌

• Don't call static methods on instances
• Don't use this for instance data in static methods
• Don't make everything static
• Don't confuse with instance methods
• Don't use for object-specific behavior

When to Use Static Methods

✓ Utility functions: StringHelper.capitalize()

✓ Validation: User.isValidEmail()

✓ Factory methods: Color.fromHex()

✓ Configuration: Database.configure()

✓ Counters/State: IDGenerator.generate()

Remember

Static methods are called on the class (e.g., Math.round()), instance methods are called on objects (e.g., array.push())!

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

Getters & Setters

Private Fields

JavaScript Code Editor

Building Your Learning Module...

Static Methods

What are Static Methods?

Toolbox Analogy

Instance vs Static

Instance Method

Static Method ✅

Basic Static Method

Use Cases

✓ Utility Functions

✓ Factory Methods

✓ Validation

✓ Configuration

Real-World Static Methods

Common Built-in Static Methods

Math.* methods

Object.* methods

Array.* methods

Using Built-in Static Methods

Key Differences

Instance Methods

Static Methods

Static vs Instance Comparison

Complete Real-World Example

Key Takeaways

Do This ✅

Avoid This ❌

When to Use Static Methods

Remember

Getters & Setters

Private Fields

JavaScript Code Editor

Static Methods

What are Static Methods?

Toolbox Analogy

Instance vs Static

Instance Method

Static Method ✅

Basic Static Method

Use Cases

✓ Utility Functions

✓ Factory Methods

✓ Validation

✓ Configuration

Real-World Static Methods

Common Built-in Static Methods

Math.* methods

Object.* methods

Array.* methods

Using Built-in Static Methods

Key Differences

Instance Methods

Static Methods

Static vs Instance Comparison

Complete Real-World Example

Key Takeaways

Do This ✅

Avoid This ❌

When to Use Static Methods

Remember