Suggest an edit

Improve this article

Refine the answer for “Class method VS function in an object property”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. Syntax

**Class method:**

```javascript
class User {
  greet() {
    console.log(`Hi, ${this.name}`);
  }
}
```

**Object property function:**

```javascript
const user = {
  greet: function() {
    console.log(`Hi, ${this.name}`);
  }
};
```

They look similar, but **the first one is a prototype method**, while the second is a **unique property of that specific object**.

---

## 2. Where the Method Is Stored

| Approach | Where the function is stored |
| --- | --- |
| **Class method** | In `User.prototype` |
| **Object property function** | In the object itself (in its "body") |

### Example:

```javascript
class A {
  sayHi() {}
}

const a1 = new A();
const a2 = new A();

console.log(a1.sayHi === a2.sayHi); // true: one method shared by everyone

// Now the object
const obj1 = {
  sayHi: function() {}
};
const obj2 = {
  sayHi: function() {}
};

console.log(obj1.sayHi === obj2.sayHi); // false: each one has its own copy
```

**Class methods save memory**, because a single method is stored on the prototype and used by all instances.

---

## 3. Creation and When the Function Is Allocated

- In a **class**, the method is added **once, when the class is defined**.
- In an **object**, the property function is created **every time a new object is created**.

So if you create 1000 instances of a class, they all share one method.
But if you create 1000 objects with a property function, there will be 1000 separate functions in memory.

---

## 4. Difference With Inheritance

Class methods automatically participate in inheritance via `prototype`.

```javascript
class Animal {
  speak() {
    console.log("The animal makes a sound");
  }
}

class Dog extends Animal {}

const dog = new Dog();
dog.speak(); // The animal makes a sound
```

An object with a property function, on the other hand, does not participate in inheritance (unless you use `Object.create`).

---

## 5. Difference in `super` Syntax

`super` (calling the parent's method) works **only in classes**,
and not in plain objects (unless you use advanced tricks with `Object.setPrototypeOf`).

```javascript
class A {
  greet() { console.log("Hi from A"); }
}
class B extends A {
  greet() {
    super.greet(); // available
    console.log("Hi from B");
  }
}
```

In an object:

```javascript
const a = { greet() { console.log("Hi from A"); } };
const b = {
  greet() {
    // super.greet(); doesn't work without a prototype
    console.log("Hi from B");
  }
};
```

---

## 6. `this` Behavior

Both in a class and in an object, the method keeps its `this`,
but if you pass it as a callback, `this` **is lost** (unless it's an arrow function):

```javascript
class A {
  hello() {
    console.log(this); // A
  }
}

const a = new A();
setTimeout(a.hello, 1000); // undefined (context lost)
```

The same happens with an object:

```javascript
const obj = {
  hello() {
    console.log(this);
  }
};

setTimeout(obj.hello, 1000); // undefined
```

If you need to preserve the context, arrow functions are used as properties:

```javascript
class A {
  hello = () => {
    console.log(this); // always the correct this
  };
}
```

---

## 7. Difference at the Language Level

| Difference | Class Method | Object Property Function |
| --- | --- | --- |
| Where it's stored | `Class.prototype` | In the object itself |
| Shared across instances | Yes | No |
| Created when | The class is defined | The object is created |
| Participates in inheritance | Yes | No |
| Access to `super` | Yes | No |
| Loses `this` in a callback | Yes (unless an arrow function) | Yes (unless an arrow function) |
| Performance and memory | More efficient | Less efficient |

---

## Example for Visualization

```javascript
class User {
  greet() { console.log("I am a class method"); }
}

const obj = {
  greet() { console.log("I am an object property function"); }
};

console.log(Object.getOwnPropertyNames(User.prototype)); // ["constructor", "greet"]
console.log(Object.keys(obj)); // ["greet"]
```

---

**Summary:**
Class methods are functions on the prototype, shared by all instances (they save memory, participate in inheritance, and support `super`).
Object property functions are regular properties that belong to a specific object, are recreated every time, and do not participate in inheritance.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts701 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.