Class syntax in Javascript - Deep Dive

Overview - Class syntax

What is it?

Class syntax in JavaScript is a way to create blueprints for objects. It lets you define properties and behaviors (methods) that many objects can share. Classes make it easier to organize and reuse code by grouping related data and functions together. They look like templates that help you build many similar things quickly.

Why it matters

Without class syntax, programmers would have to write repetitive code to create similar objects, making programs longer and harder to manage. Classes solve this by letting you define a single blueprint and create many objects from it. This saves time, reduces mistakes, and makes code easier to understand and update.

Where it fits

Before learning classes, you should know about basic JavaScript objects and functions. After mastering classes, you can explore inheritance, where classes build on other classes, and advanced topics like encapsulation and polymorphism.

Mental Model

Core Idea

A class is a blueprint that defines how to create objects with shared properties and behaviors.

Think of it like...

Think of a class like a cookie cutter. The cutter shapes dough into many cookies of the same form, just like a class creates many objects with the same structure.

Class Blueprint
┌─────────────────────┐
│      Class Name      │
│ ┌───────────────┐   │
│ │ Properties    │   │
│ │ - name        │   │
│ │ - age         │   │
│ └───────────────┘   │
│ ┌───────────────┐   │
│ │ Methods       │   │
│ │ + greet()     │   │
│ └───────────────┘   │
└─────────┬───────────┘
          │
          ▼
   Object Instance
┌─────────────────────┐
│ name: "Alice"      │
│ age: 30             │
│ greet(): function   │
└─────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding objects and properties

Concept: Learn what objects are and how they hold data using properties.

In JavaScript, an object is a collection of key-value pairs. For example: const person = { name: "Alice", age: 30 }; Here, 'name' and 'age' are properties that store data about the person.

Result

You can access data like person.name which gives "Alice".

Knowing objects and properties is essential because classes build on this idea to create many similar objects easily.

2

Foundation

Functions as behaviors inside objects

Concept: Understand how functions can be part of objects to define actions.

Objects can have functions called methods. For example: const person = { name: "Alice", greet: function() { return `Hello, my name is ${this.name}`; } }; Calling person.greet() returns a greeting string.

Result

person.greet() outputs "Hello, my name is Alice".

Combining data and behavior in objects is the foundation for classes, which organize these better.

3

Intermediate

Defining a class with constructor

🤔Before reading on: do you think a class can create multiple objects with the same structure? Commit to your answer.

Concept: Learn how to define a class and use a constructor to set initial property values.

A class is defined using the 'class' keyword. The constructor method runs when creating a new object: class Person { constructor(name, age) { this.name = name; this.age = age; } } const alice = new Person("Alice", 30); Here, 'alice' is an object made from the Person class.

Result

alice.name is "Alice" and alice.age is 30.

Understanding constructors helps you create many objects with different data from the same class blueprint.

4

Intermediate

Adding methods inside classes

🤔Before reading on: do you think methods inside classes need the 'function' keyword? Commit to your answer.

Concept: Learn how to add functions (methods) inside a class without the 'function' keyword.

Inside a class, methods are defined like this: class Person { constructor(name) { this.name = name; } greet() { return `Hi, I'm ${this.name}`; } } const bob = new Person("Bob"); console.log(bob.greet()); This prints: Hi, I'm Bob

Result

Calling bob.greet() returns a greeting string using the object's name.

Knowing that methods inside classes omit 'function' keyword makes class syntax cleaner and easier to read.

5

Intermediate

Creating multiple instances from a class

Concept: See how to make many objects from one class and how each keeps its own data.

Using the 'new' keyword, you create separate objects: const alice = new Person("Alice"); const bob = new Person("Bob"); Each has its own 'name' property and can call greet() independently.

Result

alice.greet() returns "Hi, I'm Alice"; bob.greet() returns "Hi, I'm Bob".

Understanding instances shows how classes help manage many similar objects without repeating code.

6

Advanced

Class fields and private properties

🤔Before reading on: do you think all properties in a class are accessible from outside? Commit to your answer.

Concept: Learn about class fields and how to make properties private to hide data inside objects.

You can define properties directly in the class body and use '#' to make them private: class Person { #secret; constructor(name, secret) { this.name = name; this.#secret = secret; } revealSecret() { return this.#secret; } } const alice = new Person("Alice", "loves cats"); console.log(alice.revealSecret()); // works console.log(alice.#secret); // error: private field

Result

Private properties cannot be accessed directly outside the class, protecting sensitive data.

Knowing private fields helps you write safer code by controlling what data is exposed.

7

Expert

How class methods share memory efficiently

🤔Before reading on: do you think each object has its own copy of class methods? Commit to your answer.

Concept: Understand that class methods are stored once on the prototype and shared by all instances.

When you define methods in a class, JavaScript puts them on the class prototype. This means: - All objects share the same method code. - Memory is saved because methods aren't duplicated. Example: class Person { greet() { return 'Hi'; } } const a = new Person(); const b = new Person(); console.log(a.greet === b.greet); // true Both objects use the same greet function.

Result

Methods are shared, making programs more memory efficient.

Understanding prototype sharing explains why methods inside classes are efficient and how JavaScript manages memory.

Under the Hood

JavaScript classes are mostly syntax sugar over its prototype-based system. When you create a class, JavaScript creates a constructor function and a prototype object. Methods defined in the class go on the prototype, so all instances share them. The 'new' keyword creates a new object, sets its prototype to the class prototype, and runs the constructor to initialize properties. Private fields use special internal slots that are not accessible outside the class, enforced by the JavaScript engine.

Why designed this way?

Classes were introduced to make object creation clearer and more familiar to programmers from other languages. Before classes, JavaScript used functions and prototypes, which were powerful but confusing. Classes keep the prototype system under the hood but give a cleaner, easier syntax. Private fields were added later to improve data encapsulation, a common need in large programs.

Class Syntax Internals
┌───────────────┐
│   Class Foo   │
│ ┌───────────┐ │
│ │ constructor│ │
│ │ methods   │ │
│ └───────────┘ │
└──────┬────────┘
       │ prototype
       ▼
┌───────────────┐
│ Foo.prototype │
│ - methods     │◄───────────── shared by all instances
└──────┬────────┘
       │
       ▼
┌───────────────┐
│  instance obj │
│ - properties  │
│ __proto__ → Foo.prototype
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does each object created from a class have its own copy of the methods? Commit to yes or no.

Common Belief: Each object has its own copy of all methods defined in the class.

Reality: All objects share the same methods stored on the class prototype; methods are not duplicated per object.

Why it matters: Thinking methods are copied wastes memory and can lead to inefficient code design.

Quick: Can you access private fields of a class instance directly from outside? Commit to yes or no.

Common Belief: Private fields can be accessed like normal properties from outside the class.

Reality: Private fields are truly private and cannot be accessed or modified from outside the class methods.

Why it matters: Trying to access private fields directly causes errors and breaks encapsulation principles.

Quick: Does the 'class' keyword create a new object type completely different from functions? Commit to yes or no.

Common Belief: Classes create a new kind of object unrelated to functions or prototypes.

Reality: Classes are special functions under the hood; they use prototypes like traditional constructor functions.

Why it matters: Misunderstanding this can confuse debugging and advanced JavaScript concepts like inheritance.

Quick: Does omitting the 'new' keyword when calling a class constructor still create an object? Commit to yes or no.

Common Belief: You can call a class constructor without 'new' and it will work fine.

Reality: Calling a class constructor without 'new' throws an error; 'new' is required to create instances.

Why it matters: Forgetting 'new' causes runtime errors and breaks object creation.

Expert Zone

1

Class methods are non-enumerable by default, so they don't show up in for-in loops, keeping object keys clean.

2

Private fields are truly private and cannot be accessed even by subclasses, unlike protected fields in some languages.

3

Static methods belong to the class itself, not instances, useful for utility functions related to the class.

When NOT to use

Avoid classes when you need simple one-off objects or when functional programming style is preferred. For very dynamic or prototype-heavy patterns, using plain objects and prototypes directly can be more flexible.

Production Patterns

In real-world apps, classes are used to model entities like users or products, often combined with inheritance for shared behavior. Private fields protect sensitive data. Static methods provide helpers. Classes integrate with frameworks like React for components.

Connections

Prototype-based inheritance

Classes build on prototype inheritance by providing cleaner syntax.

Understanding prototypes clarifies how classes share methods and how inheritance works under the hood.

Object-oriented programming (OOP)

Class syntax is JavaScript's way to support OOP concepts like encapsulation and reuse.

Knowing OOP principles helps you design better classes and understand why classes group data and behavior.

Blueprints in architecture

Classes are like architectural blueprints used to build many houses with the same design.

Seeing classes as blueprints helps grasp why they define structure and behavior before creating actual objects.

Common Pitfalls

#1 Forgetting to use 'new' when creating an instance.

Wrong approach:

const alice = Person('Alice');

Correct approach:

const alice = new Person('Alice');

Root cause:

Not understanding that 'new' is required to create a new object from a class constructor.

#2 Trying to access private fields directly.

Wrong approach:

console.log(alice.#secret);

Correct approach:

console.log(alice.revealSecret());

Root cause:

Misunderstanding that private fields are inaccessible outside class methods.

#3 Defining methods inside the constructor instead of the class body.

Wrong approach:

class Person {
constructor(name) {
this.name = name;
this.greet = function() { return `Hi, I'm ${this.name}`; };
}
}

Correct approach:

class Person {
constructor(name) {
this.name = name;
}
greet() { return `Hi, I'm ${this.name}`; }
}

Root cause:

Not realizing that methods defined in the constructor create new copies per instance, wasting memory.

Key Takeaways

Class syntax provides a clear and organized way to create objects with shared properties and methods.

The constructor method initializes new objects, while methods define behaviors shared by all instances.

Methods are stored on the class prototype, so all objects share the same function code, saving memory.

Private fields protect data inside objects, preventing outside access and improving security.

Using 'new' is essential to create instances from classes; forgetting it causes errors.

Practice

1. What is the main purpose of a class in JavaScript?

easy

A. To create blueprints for objects with shared properties and methods

B. To execute code immediately

C. To store data in a database

D. To style HTML elements

Solution

1. Step 1: Understand what a class represents

   A class is a blueprint or template for creating objects that share properties and behaviors.

2. Step 2: Compare options with the definition

   Only To create blueprints for objects with shared properties and methods correctly describes the purpose of a class in JavaScript.

3. Final Answer:

   To create blueprints for objects with shared properties and methods -> Option A

4. Quick Check:

   Class purpose = blueprint for objects [OK]

Hint: Classes define object templates, not immediate actions [OK]

Common Mistakes:

• Confusing classes with functions that run immediately
• Thinking classes store data like databases
• Mixing classes with styling or HTML

2. Which of the following is the correct syntax to define a class named Car with a constructor?

easy

A. class Car() { constructor() { } }

B. function Car() { constructor() { } }

C. class Car { function constructor() { } }

D. class Car { constructor() { } }

Solution

1. Step 1: Recall correct class syntax

   A class is declared with the keyword class, followed by the class name and curly braces. The constructor is a method inside without the function keyword.

2. Step 2: Check each option

   Only class Car { constructor() { } } is correct. The other options have syntax errors such as parentheses after the class name, using function Car() declaration, or using the function keyword for the constructor.

3. Final Answer:

   class Car { constructor() { } } -> Option D

4. Quick Check:

   Class syntax = class Name { constructor() {} } [OK]

Hint: Class constructor has no 'function' keyword inside class [OK]

Common Mistakes:

• Adding parentheses after class name
• Using 'function' keyword inside class methods
• Defining constructor outside class body

3. What will be the output of the following code?

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}
const p = new Person('Anna');
console.log(p.greet());

medium

A. Hello, Anna!

B. Hello, undefined!

C. Hello, !

D. Error: greet is not a function

Solution

1. Step 1: Understand object creation and constructor

   The Person class constructor sets this.name to the passed argument. Here, 'Anna' is passed, so this.name becomes 'Anna'.

2. Step 2: Call the greet method

   The greet method returns a string using this.name. Since this.name is 'Anna', the returned string is 'Hello, Anna!'.

3. Final Answer:

   Hello, Anna! -> Option A

4. Quick Check:

   Method uses this.name = 'Anna' [OK]

Hint: Constructor sets properties; methods use them with this [OK]

Common Mistakes:

• Forgetting to pass argument to constructor
• Expecting greet to print instead of return
• Confusing this.name with undefined

4. Identify the error in the following class code:

class Animal {
  constructor(type) {
    this.type = type;
  }
  speak() {
    console.log('I am a ' + type);
  }
}
const a = new Animal('Dog');
a.speak();

medium

A. Incorrect class declaration syntax

B. Missing constructor keyword

C. Using undefined variable 'type' inside speak method

D. Cannot create instance with new keyword

Solution

1. Step 1: Check variable usage inside speak method

   The method uses type directly, but type is not defined in its scope. It should use this.type to access the instance property.

2. Step 2: Confirm other parts are correct

   The constructor and class syntax are correct, and creating an instance with new is valid.

3. Final Answer:

   Using undefined variable 'type' inside speak method -> Option C

4. Quick Check:

   Use this.type to access property inside methods [OK]

Hint: Use this.property inside class methods to access instance data [OK]

Common Mistakes:

• Using variable name without this inside methods
• Forgetting to use new keyword when creating instance
• Misnaming constructor method

5. Given the class below, what will be the output of console.log(car.getDescription());?

class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
  getDescription() {
    return `${this.make} ${this.model}`;
  }
}
class Car extends Vehicle {
  constructor(make, model, year) {
    super(make, model);
    this.year = year;
  }
  getDescription() {
    return `${this.year} ${super.getDescription()}`;
  }
}
const car = new Car('Toyota', 'Corolla', 2020);
console.log(car.getDescription());

hard

A. Toyota Corolla

B. 2020 Toyota Corolla

C. Corolla Toyota 2020

D. Error: super.getDescription is not a function

Solution

1. Step 1: Understand inheritance and super calls

   The Car class extends Vehicle. The Car constructor calls super(make, model) to initialize those properties in the parent class.

2. Step 2: Analyze getDescription method in Car

   The Car class overrides getDescription and calls super.getDescription() to get the parent class description, then prepends the year.

3. Step 3: Substitute values

   super.getDescription() returns 'Toyota Corolla'. Adding this.year (2020) before it results in '2020 Toyota Corolla'.

4. Final Answer:

   2020 Toyota Corolla -> Option B

5. Quick Check:

   super.method() calls parent method [OK]

Hint: Use super.method() to call parent class methods inside subclass [OK]

Common Mistakes:

• Forgetting to call super() in subclass constructor
• Not using super.getDescription() inside overridden method
• Mixing order of make and model in output