1. Introduction
A class in JavaScript is a template for creating objects that share the same properties and methods. Introduced in ES6 (2015), the class keyword gives object-oriented code a familiar, readable shape similar to languages like Java or Python, even though JavaScript remains a prototype-based language under the hood. Classes bundle state (fields) and behavior (methods) together, making it easier to model real-world entities such as users, shapes, or bank accounts.
Cricket analogy: A standard team-selection template, batting order slots, fielding positions, role requirements, lets any franchise stamp out a full squad quickly, bundling each player's stats, the state, and their on-field duties, the behavior, into one consistent format, even though the underlying player contracts work differently behind the scenes.
2. Syntax
class ClassName {
// instance field (optional)
field = initialValue;
constructor(param1, param2) {
this.param1 = param1;
this.param2 = param2;
}
instanceMethod() {
// regular method, shared via the prototype
}
static staticMethod() {
// called on the class itself, not on instances
}
}
const obj = new ClassName(value1, value2);3. Explanation
ES6 class syntax is syntactic sugar over JavaScript's existing prototype-based inheritance model. When you write class Animal { ... }, the engine still creates a function object (Animal) with a prototype property, and instance methods declared inside the class body are placed on Animal.prototype, exactly as they would be with a manually written constructor function. typeof Animal is "function", and Animal.prototype.constructor === Animal is true.
Cricket analogy: Calling a bowler a specialist pacer is really just a label over the same underlying training system every bowler goes through; check the fine print and pacer still traces back to the base bowler certification, the same way Animal.prototype.constructor === Animal reveals the class is still a function underneath.
Methods defined inside a class are automatically non-enumerable and are added to the prototype, not to each instance, so all instances share one copy of each method in memory. static methods and fields belong to the class itself and are called as ClassName.method(), not instance.method() — they are commonly used for utility or factory functionality that does not depend on a particular instance.
Cricket analogy: Every player on a team shares the same rulebook, one copy of the how-to-appeal method on the prototype, rather than each player carrying a personal printed rulebook, while the national selection committee, a static method, belongs to the board itself, not to any individual player.
Class declarations are NOT hoisted the way function declarations are. A class exists in the 'temporal dead zone' (TDZ) from the start of the enclosing scope until its declaration is evaluated. Referencing a class before its declaration line throws a ReferenceError, even though the class name is technically hoisted (unlike var, which would just be undefined).
4. Example
class Animal {
constructor(name, sound) {
this.name = name;
this.sound = sound;
}
makeSound() {
console.log(`${this.name} says ${this.sound}`);
}
static describe() {
console.log("Animals are living organisms.");
}
}
const cat = new Animal("Cat", "Meow");
cat.makeSound();
Animal.describe();
console.log(typeof Animal);
console.log(Animal.prototype.constructor === Animal);
try {
console.log(Wolf.name);
} catch (e) {
console.log(e instanceof ReferenceError);
}
class Wolf extends Animal {}5. Output
Cat says Meow
Animals are living organisms.
function
true
true6. Key Takeaways
classis syntactic sugar over prototype-based inheritance —typeof MyClassis still"function".- Class declarations are in the temporal dead zone and are NOT hoisted like function declarations.
- Instance methods live on
ClassName.prototypeand are shared across all instances, not copied per object. staticmembers belong to the class itself, not to instances created withnew.- Referencing a class before its declaration throws a
ReferenceError, unlike hoistedvarwhich yieldsundefined.
Practice what you learned
1. What does `typeof` return when applied to a class defined with the `class` keyword?
2. What happens if you reference a class before its declaration line in the same scope?
3. Where are instance methods declared inside a class body stored?
4. How do you call a `static` method named `describe` defined on class `Animal`?
5. What is the value of `Animal.prototype.constructor === Animal` for a class `Animal`?
6. Why can classes not be used like `var`-declared function-style hoisting?
Was this page helpful?
You May Also Like
Constructors in JavaScript
How constructor functions and class constructors initialize new objects, run automatically with `new`, and support default parameters.
Inheritance in JavaScript
How the `extends` and `super` keywords let one class build on another, sharing and overriding behavior while respecting strict initialization order.
Prototypes and Prototypal Inheritance in JavaScript
The mechanism underlying every JavaScript object: how property lookups walk the prototype chain, and how `prototype`, `__proto__`, and `Object.getPrototypeOf` relate.
Encapsulation in JavaScript
How JavaScript hides internal object state using ES2022 private class fields (`#field`) and the older underscore naming convention.
Related Reading
Related Study Notes in Programming
Browse all study notesApache Spark Study Notes
Programming · 30 topics
ProgrammingApache Flink Study Notes
Programming · 30 topics
ProgrammingHadoop Study Notes
Programming · 30 topics
ProgrammingSnowflake Study Notes
Programming · 30 topics
ProgrammingApache Airflow Study Notes
Programming · 30 topics
Programmingdbt (Data Build Tool) Study Notes
Programming · 30 topics