← Previous Next →

Class Methods & Properties

In JavaScript, classes let you create objects with shared structure and behavior. Properties hold data for each instance, while methods define actions or behavior that instances can perform.

Illustration of class_methods_properties
Illustration of class_methods_properties

💡 What are Class Properties?

Properties are values stored on each instance of a class, typically defined inside the constructor using this. They represent the object's state or data.

💡 What are Class Methods?

Methods are functions defined inside a class that describe behaviors or actions that instances of the class can perform.

Defining Properties & Methods

Properties are usually set inside the constructor() method. Methods are defined as standalone functions within the class body, but outside the constructor.

📌 Deep Dive: Simple Class with Properties & Methods

JAVASCRIPT
class Person {
  constructor(name, age) {
    this.name = name;  // property
    this.age = age;    // property
  }
  
  greet() {           // method
    return `Hello, my name is ${this.name}.`;
  }
  
  haveBirthday() {    // method that modifies a property
    this.age++;
  }
}

const user = new Person('Alice', 30);
console.log(user.greet()); // Hello, my name is Alice.
user.haveBirthday();
console.log(user.age);     // 31
Output
Hello, my name is Alice.
31

Key Points

  • this.propertyName inside the constructor assigns a property to the object instance.
  • Methods are functions inside the class body, accessible on any instance.
  • Methods can read or modify properties using this.
  • Properties exist per instance; methods are shared on the prototype.

⚠️ Avoid Defining Methods Inside Constructor

Defining methods inside the constructor creates a new function for each instance, which is memory-inefficient. Always define methods directly inside the class body.

Properties vs Methods in Classes
AspectPropertyMethod
Definition locationInside constructor using thisInside class body, but outside constructor
Value typeData (string, number, object, etc.)Function
Accessinstance.propertyNameinstance.methodName()
Memory usageUnique per instanceShared via prototype

💡 Public Class Fields (Modern Syntax)

You can define properties directly in the class body (outside constructor) using public class fields:

📌 Deep Dive: Public Class Fields

JAVASCRIPT
class Car {
  color = 'red';  // property defined as class field

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

  describe() {
    return `This is a ${this.color} ${this.make}.`;
  }
}

const car = new Car('Toyota');
console.log(car.describe()); // This is a red Toyota.
Output
This is a red Toyota.

💡 Static Methods & Properties

Static methods/properties belong to the class itself, not instances. They are accessed directly on the class, not on objects created from it.

📌 Deep Dive: Static Method Example

JAVASCRIPT
class MathUtil {
  static square(x) {
    return x * x;
  }
}

console.log(MathUtil.square(5)); // 25

const util = new MathUtil();
// util.square(5); // Error: square is not a function on instance
Output
25

⚠️ Remember:

Static methods cannot access instance properties or methods via this because they belong to the class itself.

← Previous Next →