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.

ECMAScript 2015 §Overview#sec-constructor

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

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.

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. Every standard builtin object has a constructor.

[see JavaScript Objects Reference Panel Index]

Primitive Value Wrapper Constructors

The following are constructors for primitive values'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: Data Types]

[see JS: Primitive Value Object Wrapper]

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 whenever possible. Because:

  1. The constructor function 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().

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.

User Defined Constructor

ANY function user creates can be called with the new keyword. It will return a object.

Exactly what object new f(…) return, depends on: ① f's definition contains a return statement, and ② that statement returns a value that is a object data type. If both conditions are met, then that return object is returned. Otherwise, a newly created object is returned.

[see JS: Operator “new”]

Do Not Confuse with Property Name “constructor”

Do not confuse 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

Ask me question on patreon