Constructors & new

One recipe, many objects

An object literal is perfect when you need one object: { name: "Ada" }. But apps often need many objects with the same shape: many users, many books, many tasks, many cart items. A constructor function is an older JavaScript pattern for making those similar objects from one reusable function.

You call a constructor with the new operator. The constructor receives a fresh object as this, writes properties onto it, and gives that object back. If you already know functions, Declaring & calling functions, and methods where this is the object before the dot, this lesson connects those ideas to object creation.

A constructor function is just a regular function that is meant to be called with new. By convention its name starts with a capital letter: User, Book, Task. The capital is not required by the language, but it tells humans, “use new here.”

function User(name) {
  this.name = name;
  this.role = "learner";
}

const ada = new User("Ada");
const grace = new User("Grace");
console.log(ada.name, grace.name);
console.log(ada === grace);

Line 1 defines the constructor. Lines 2 and 3 write properties on this. When line 6 runs, new supplies a fresh object as this, so ada gets its own name and role. Line 7 presses the same cookie cutter again, making a different object for Grace.

• ada.name is "Ada"; grace.name is "Grace".
• ada === grace is false because each new call returns a separate object.
• Arrow functions cannot be used with new, because arrows do not have constructor behavior or their own this.

The new operator is a small routine with four important steps:

1. Create a fresh empty object.
2. Link that object to Constructor.prototype.
3. Call the constructor with this set to the fresh object.
4. Return the fresh object, unless the constructor returns its own object.

The replay below uses a real hand-written helper named createWith. It is a teaching model, not a replacement for new. The tests prove that this helper and real new User("Ada") produce equivalent objects: same own property, same prototype, and instanceof is true.

1function createWith(Constructor, ...args) {2  const obj = Object.create(Constructor.prototype);Run3  const result = Constructor.apply(obj, args);4  return result !== null && (typeof result === "object" || typeof result === "function")5    ? result6    : obj;7}8 9function User(name) {10  this.name = name;11}12 13const real = new User("Ada");14const model = createWith(User, "Ada");15console.log(real.name === model.name);16console.log(Object.getPrototypeOf(real) === Object.getPrototypeOf(model));17console.log(model instanceof User);

Inside a normal function, new.target tells you how the function was started. If the call used new, it is the constructor function. If the call did not use new, it is undefined.

That gives constructors a way to fail clearly or auto-correct. This version auto-corrects: if (!new.target) return new SafeUser(name). Some codebases prefer throwing a TypeError so bugs are noticed immediately.

1function SafeUser(name) {2  if (!new.target) {3    return new SafeUser(name);4  }5  this.name = name;6}7 8const ada = SafeUser("Ada");Run9console.log(ada.name);

Most constructors do not write return. They assign to this, and new returns that object. But JavaScript has one unusual rule: returning an object replaces the fresh object, while returning a primitive is ignored.

function ReturnsObject() {
  this.name = "built";
  return { name: "replacement" };
}

function ReturnsPrimitive() {
  this.name = "built";
  return "ignored";
}

console.log(new ReturnsObject().name);
console.log(new ReturnsPrimitive().name);

This is rare in everyday constructors, but it explains weird library code and some interview puzzles. If you see a constructor returning an object, read that line as “replace the cookie.” If it returns a number, string, boolean, null, or undefined, new keeps the object it already made.

If you put a function inside a constructor, every instance gets its own copy of that function. That works, but it wastes memory and makes comparisons surprising. Put the method on Constructor.prototype instead, and all instances share the same function.

function CopiedMethodUser(name) {
  this.name = name;
  this.greet = function () {
    return "Hi, " + this.name;
  };
}

function SharedMethodUser(name) {
  this.name = name;
}
SharedMethodUser.prototype.greet = function () {
  return "Hi, " + this.name;
};

const copiedA = new CopiedMethodUser("Ada");
const copiedB = new CopiedMethodUser("Grace");
const sharedA = new SharedMethodUser("Ada");
const sharedB = new SharedMethodUser("Grace");
console.log(copiedA.greet === copiedB.greet);
console.log(sharedA.greet === sharedB.greet);
console.log(sharedA.greet());

The second pattern works because new links the created object to SharedMethodUser.prototype. When sharedA.greet() is called, JavaScript does not find greet as an own property, so it looks along that link and finds the shared method. The prototype lessons later make that lookup precise.

JavaScript has built-in constructors too. new Date() creates a Date object. new Map() creates a keyed collection you will study in a later lesson. But new Number(5), new String("x"), and new Boolean(false) create wrapper objects, and those are usually a trap.

console.log(typeof new String("x"));
console.log(Boolean(new Boolean(false)));
console.log(typeof "x");
console.log(Boolean(false));

The dangerous one is new Boolean(false). The value inside it represents false, but the wrapper itself is an object, and all objects are truthy. Prefer primitives: 5, "x", and false, or use Number(value), String(value), and Boolean(value) as plain conversion functions.

Where you’ll use this

You will meet constructor behavior in three places. First, older code and some libraries still expose constructor functions. Second, built-in data structures such as Date, Map, Set, URL, and many browser objects are constructed with new. Third, classes use the same construction pathway with a cleaner syntax.

function CartItem(name, price, quantity) {
  if (!new.target) return new CartItem(name, price, quantity);
  this.name = name;
  this.price = price;
  this.quantity = quantity;
}

CartItem.prototype.total = function () {
  return this.price * this.quantity;
};

const apples = new CartItem("Apples", 2, 3);
console.log(apples.total());

This is not the only way to model data. Object literals, factory functions, and classes are all useful. Constructors are worth learning because they explain the common new Something() shape and prepare you for prototypes and classes.

Common misconceptions

Read each snippet carefully. Your first try counts, but every option explains why it is right or wrong.

Key takeaways

• Constructor functions are regular functions intended to be called with new; capitalize their names by convention.
• new creates a fresh object, links it to Constructor.prototype, calls the function with this set to that object, and returns it.
• new.target is undefined for plain calls and the constructor for new calls, so it can guard mistakes.
• Returning an object from a constructor replaces the fresh object; returning a primitive is ignored.
• Put shared methods on the prototype or use class syntax later; avoid primitive wrapper constructors.

Up next: Object.keys, values & entries.