JavaScript: 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 JavaScript: 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.

// create a new Date object
var x = new Date();
console.log(x); // Mon, 05 Aug 2013 02:26:25 GMT

Here's example of standard builtin constructors.

Common Builtin Construtors
ObjectLiteral Expression SyntaxConstructor SyntaxNotes
Object{…}new Object(…) 〔►see JavaScript: Object Constructor
Array[…]new Array(…) 〔►see JavaScript: Array Constructor
Functionfunction (…) {…}new Function(…) 〔►see JavaScript: Function Constructor
Regex/…/…new RegExp(…) 〔►see JavaScript: RegExp Constructor
Datenonenew Date(…) 〔►see JavaScript: 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 JavaScript: Data Types

〔►see JavaScript: Primitive Value Object Wrapper

Constructor for Primitive Values's Wrapper Objects
ObjectLiteral Expression SyntaxConstructor SyntaxNotes
Number{3, -3, 3.7, …}new Number(…) 〔►see JavaScript: Number Constructor
String"…"new String("…") 〔►see JavaScript: String Constructor
Boolean{true, false}new Boolean(…) 〔►see JavaScript: 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 JavaScript: 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().
  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(…) returns 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 JavaScript: Operator “new”

Do Not Confuse with Property Name “constructor”

Do not confuse with property named “constructor”.

〔►see JavaScript: Property Key "constructor"

JS Constructor Topic

  1. JavaScript: “this” Binding
  2. JavaScript: What's Constructor?
  3. JavaScript: Property Key "prototype"
  4. JavaScript: Operator “new”
  5. JavaScript: “instanceof” Operator
  6. JavaScript: Property Key "constructor"
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.