5.15 Exercise: Function Factory and Constructor

In the previous exercise we used the object literal syntax to build an address. This time the goal is to create the very same address object in two different ways — once with a factory function, once with a constructor function. Try it on your own, then come back to compare.

1. Factory function

A factory function simply returns a new object. By convention it is named in camelCase (for example createAddress) and takes the data as parameters. When key and value share the same name, the shorthand syntax keeps the code clean:

function createAddress(street, city, zipCode) {
  return { street, city, zipCode };
}

const address = createAddress("...", "...", "...");
console.log(address);

2. Constructor function

• Named in PascalCase (first letter of each word capitalised), so the convention is Address, not createAddress.
• Uses the this keyword to assign properties on the new object.
• Called with the new operator, which creates the empty object, binds this to it and returns it.

function Address(street, city, zipCode) {
  this.street = street;
  this.city = city;
  this.zipCode = zipCode;
}

const address = new Address("...", "...", "...");
console.log(address);

Log either result on the console and you'll see exactly the same shape: a plain object with three properties. The point of this exercise is simply to get comfortable with both syntaxes. In the next exercise, we'll work with blog publishing objects.

Summary

This lesson demonstrates two fundamental JavaScript patterns for creating objects: factory functions and constructor functions. The factory function approach returns a new object directly, while the constructor function uses the "this" keyword to initialize object properties. Both methods achieve identical results—creating an address object with street, city, and postal code properties—but follow different naming conventions and syntax patterns.

Key points

• Factory functions return a new object directly without requiring the "new" operator
• Constructor functions use the "this" keyword to initialize properties and must be called with the "new" operator
• Constructor functions follow PascalCase naming convention (Address) versus camelCase for factory functions (createAddress)
• When property keys and values share the same name, shorthand syntax can simplify the code
• Both patterns create identical objects with the same structure and properties
• Understanding these patterns is essential for working with object-oriented JavaScript

FAQ

What is the main difference between a factory function and a constructor function?

A factory function returns a new object directly without requiring the "new" operator, while a constructor function uses "this" to initialize properties and must be called with the "new" operator. Both create objects, but they follow different syntax conventions.

Why do constructor functions use PascalCase naming?

PascalCase (e.g., Address) is a naming convention that signals to developers that a function is intended to be used as a constructor with the "new" operator, distinguishing it from regular functions.

Can factory functions and constructor functions produce identical results?

Yes, both approaches can create objects with identical structure and properties. The choice between them depends on coding style preference and the specific use case in your project.