What is the difference between an object and an object from a class in JavaScript?

Question

I'm learning JavaScript and Java at work and in school. As far as I know, in Java, you always have a class and from that class you can create objects. Same works in JavaScript, BUT: In JavaScript it's possible to create objects without classes.

So my question is: what is the difference between those two kinds of objects in JavaScript?

class Test {
    say() {
        console.log("I'm a test.");
    }
}

let TestFromClass = new Test();

let TestFromObject = {
    say() {
        console.log("I'm also a test.");
    }
};


TestFromClass.say();    // Output: I'm a test.
TestFromObject.say();   // Output: I'm also a test.

Now I wanted to know if there is a difference in them, or if we actually need classes in JavaScript.

Answer 1

When you use new, you construct a new object whose internal prototype is the class's prototype. For example:

class Test {
    say() {
        console.log("I'm a test.");
    }
}

let TestFromClass = new Test();
console.log(Object.getPrototypeOf(TestFromClass) === Test.prototype);

This is useful when you need to create multiple objects. Usually, such objects are created because they'll have some sort of state associated with each individual object, usually in the form of properties on the object (eg, a person object might have a name and an age property).

But if you don't have any data associated with an instance (in your example, the TestFromClass object), there's not much point having an instance at all.

If you only want to collect named functions into a data structure, your TestFromObject makes much more sense than a class.

That said, you may want to have a class that has some functions associated with it (like say) which don't have anything to do with an instance of its data, while still being able to create an instance, perhaps with other methods on the prototype. This isn't that uncommon, and is done by making the non-instance-related functions static:

class Person {
  static canEat() {
    return ['apples', 'bananas', 'carrots'];
  }
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const p = new Person('Bob', 99);
console.log(p.name);
console.log(Person.canEat());