Class method VS function in an object property
1. Syntax
Class method:
class User {
greet() {
console.log(`Hi, ${this.name}`);
}
}Object property function:
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:
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 copyClass 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.
class Animal {
speak() {
console.log("The animal makes a sound");
}
}
class Dog extends Animal {}
const dog = new Dog();
dog.speak(); // The animal makes a soundAn 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).
class A {
greet() { console.log("Hi from A"); }
}
class B extends A {
greet() {
super.greet(); // available
console.log("Hi from B");
}
}In an object:
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):
class A {
hello() {
console.log(this); // A
}
}
const a = new A();
setTimeout(a.hello, 1000); // undefined (context lost)The same happens with an object:
const obj = {
hello() {
console.log(this);
}
};
setTimeout(obj.hello, 1000); // undefinedIf you need to preserve the context, arrow functions are used as properties:
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
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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.