5.3 Contructor Function

Factory functions are not the only way to build objects. The other classic pattern in JavaScript is the constructor function. Like a factory, it is a function whose job is to produce an object, but the syntax and conventions are different.

Naming conventions

• Factory functions use camelCase — like createCircle.
• Constructor functions use PascalCase — like Circle. Other JavaScript developers will assume PascalCase functions are constructors.

function Circle(radius) {
  this.radius = radius;
  this.draw = function () {
    console.log("draw");
  };
}

const circle = new Circle(1);
circle.draw();

Instead of returning an object literal, we assign properties on this. The this keyword is a reference to the object that is currently executing this piece of code. Because objects in JavaScript are dynamic, we can add properties to them at any time — including the radius property and the draw method.

The magic happens when we call Circle with the new operator. Three things happen behind the scenes:

1. new creates a new empty JavaScript object.
2. It binds this inside the function to that new empty object.
3. After the function runs, new returns that object.

If you forget the new operator, this defaults to the global object (window in the browser), which is almost never what you want. Factory functions and constructor functions are both equally valid ways to create objects — pick the one your team is most comfortable with. Constructor functions tend to feel more familiar to developers coming from class-based languages like C# or Java.

Summary

This lesson introduces constructor functions as an alternative pattern for creating objects in JavaScript. Constructor functions use the `new` keyword and `this` reference to dynamically initialize objects. The key distinction from factory functions lies in naming convention (PascalCase for constructors vs camelCase for factories) and implementation approach (using `this` and `new` versus explicit object return).

Key points

• Constructor functions follow PascalCase naming convention (e.g., Circle) to signal their intended use with the `new` operator
• The `this` keyword references the empty object created by the `new` operator, allowing dynamic property and method assignment
• Using `new` with a constructor performs three operations: creates an empty object, binds `this` to that object, and returns the newly constructed object
• JavaScript objects are dynamic—properties and methods can be added after object creation using dot notation (e.g., `this.radius = radius`)
• Constructor functions and factory functions are equally valid approaches; constructor functions are familiar to developers from languages like C# and Java

FAQ

How does the `new` operator work with constructor functions?

The `new` operator performs three steps: first, it creates an empty JavaScript object; second, it sets `this` to reference that empty object; third, it returns the newly constructed object from the function.

What is the difference between constructor functions and factory functions?

Factory functions use camelCase naming and explicitly return an object, while constructor functions use PascalCase naming, use the `new` operator, and rely on `this` to reference the object being constructed.

Can you add properties and methods to an object after it is created?

Yes, JavaScript objects are dynamic. You can add properties and methods to an existing object at any time using dot notation (e.g., `object.property = value`).