JS: What's Constructor?

By Xah Lee. Date: . Last updated: .

What's a Constructor?

When a function is designed to be called with the keyword new, for example new function_name(…), we call the function constructor.

(There are some exceptions. For example, the constructor Symbol cannot be called with new [see JS: Symbol Tutorial])

JavaScript spec defines constructor thus:

function object that creates and initializes objects

NOTE The value of a constructor's prototype property is a prototype object that is used to implement inheritance and shared properties.

ECMAScript 2015 §Overview#sec-constructor

Constructor is one of the way to create a object. [see JS: Create Object]

Builtin Constructors

The most common use of new is to create a builtin object instances using builtin constructor, such as Date object.

const x = new Date();

Here's example of standard builtin constructors.

Common Builtin Construtors
ObjectLiteral Expression SyntaxConstructor SyntaxNotes
Object{…}new Object(…) [see JS: Object Constructor]
Array[…]new Array(…) [see JS: Array Constructor]
Functionfunction (…) {…}new Function(…) [see JS: Function Constructor]
Regex/…/…new RegExp(…) [see JS: RegExp Constructor]
Datenonenew Date(…) [see JS: Date Constructor]

There are many more constructors. Most standard builtin object has a constructor.

[see JavaScript Object Reference]

Primitive Value Wrapper Constructors

The following are constructors for primitive value's wrapper objects. (when you call a method on a primitive value, such as "a/b".split("/"), the string is temporarily converted to a string object. That's why it has methods.)

[see JS: Primitive Value]

Constructor for Primitive Values's Wrapper Objects
ObjectLiteral Expression SyntaxConstructor SyntaxNotes
Number{3, -3, 3.7, …}new Number(…) [see JS: Number Constructor]
String"…"new String("…") [see JS: String Constructor]
Boolean{true, false}new Boolean(…) [see JS: Boolean Constructor]

Use Literal Expression When Possible

For builtin objects, you should use the literal expression to create object whenever possible. Because:

  1. The constructor functions are often very complex, involves many arguments. Type and number of arguments may change its behavior.
  2. Some constructor can be called with new, some not. For example, the Symbol constructor cannot be called with new. [see JS: Symbol Tutorial]
  3. For some constructors, the behavior of calling it with new or without, is the same. For example, {• Object()Array()Function()RegExp()} are like that. But not others. For example, Date(). [see JS: Date Constructor]
  4. Some constructor are there simply to make the JavaScript language structure consistent, but is not designed for practical use. For example, Function().

User Defined Constructor

To define your own constructor:

For detail, see JS: Operator “new”

(Note: you cannot use arrow function to creat constructor. [see JS: Arrow Function])

Parenthesis Optional for Constructor Call with No Args

When a function is used as a constructor and without argument, the parenthesis are optional. For example, new F() and new F are equivalent.

Constructor Name Should Start with Capital Letter

By convention, functions designed to be used as constructor starts with a capital letter.

This is important, because, function designed as constructor have very different behavior than “normal” functions. For example, constructor function usually does not contain return statement, and usually will add/modify properties of “this binding”.

Function starting with capital letter lets you know whether it is designed to be called with new.

Though, you can write a function such that f(…) and new f(…) have the same behavior. (just have a return statement and have it return a object.) The builtin functions {• Object()Array()Function()RegExp()} are like that.

Do Not Confuse with Property Name “constructor”

Do not confuse constructor with property named “constructor”.

[see JS: Property Key “constructor”]

JS Constructor Topic

  1. JS: “this” Binding
  2. JS: What's Constructor?
  3. JS: Property Key "prototype"
  4. JS: Operator “new”
  5. JS: “instanceof” Operator
  6. JS: Property Key “constructor”
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Patreon me $5. Ask me question on patreon