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/Class

  1. “this” Binding
  2. What's Constructor?
  3. Property Key "prototype"
  4. Operator “new”
  5. Operator “instanceof”
  6. Property Key “constructor”
  7. Class
  8. Keyword “extends”
  9. Keyword “super”
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

JavaScript in Depth

Basics

  1. JavaScript Basics
  2. true, false
  3. Operators
  4. Branch Control
  5. Loop
  6. Array Basics
  7. Object Basics
  8. RegExp Basics

Variable

  1. Value Types
  2. let
  3. const
  4. var
  5. var Order
  6. var Scope
  7. Global Variable
  8. Destructuring Assignment

String

  1. String Overview
  2. Template String
  3. Char, Code Unit, Codepoint
  4. String Escape Sequence
  5. Unicode Escape Sequence

Function

  1. Define Function
  2. Arrow Function ⭐
  3. Function Params
  4. “arguments” Object
  5. Rest Params ⭐
  6. Arg Default Value ⭐
  7. Arg Destructure ⭐
  8. f Declaration vs Expression
  9. Closure
  10. f call apply bind
  11. Functional Programing

Object Property

  1. Property Overview
  2. Property Key
  3. Dot vs Bracket Notation
  4. Create/Delete Property
  5. Get/Set Property
  6. Check Property Existence
  7. Access Property
  8. List Properties
  9. Property Attributes
  10. Getter/Setter
  11. Property Descriptor
  12. Symbol

Object and Inheritance

  1. Object Overview
  2. Object Type
  3. Find Object's Type
  4. Prototype Chain
  5. Create Object
  6. Object Literal Expr
  7. Create Object with Parent X
  8. Get/Set Parent
  9. Show Prototype Chain
  10. Prevent Adding Property
  11. Clone Object
  12. Test Object Equality
  13. Add Method to Prototype

Array

  1. Understand JS Array
  2. Create Array
  3. Sparse Array
  4. Array-Like Object
  5. Array How-To

Class

  1. “this” Binding
  2. What's Constructor?
  3. Property Key "prototype"
  4. Operator “new”
  5. Operator “instanceof”
  6. Property Key “constructor”
  7. Class
  8. Keyword “extends”
  9. Keyword “super”

Iterable ⭐

  1. Interface
  2. Iterable
  3. Iterator
  4. Iterator Prototype
  5. for-of Loop
  6. Spread Operator
  7. Generator
  8. Generator Function

Misc

  1. Set Object
  2. Map Object
  3. Try Catch Throw Finally
  4. Import/Export
  5. Promise
  6. Proxy
  7. ES2015 Features
  8. How to Convert ES5 to ES2015
  9. Style Guide
  10. Semicolon Rules
  11. Exclamation Before Function
  12. How to Determine Strict Mode?
  13. x.y.z Associativity
  14. Function Chain
  15. Random Number, Range, Integer, Element
  16. Timing JS Code
  17. Range Function for Array
  18. Random Array Element, Randomize Array
  19. Tagged Template String
  20. String to Number
  21. Format Number

Object Reference

  1. the Global Object
  2. Object 🙼 Object.prototype
  3. Array 🙼 Array.prototype
  4. Function 🙼 Function.prototype
  5. String 🙼 String.prototype
  6. RegExp 🙼 RegExp.prototype 🙼 RegExp Syntax
  7. Date 🙼 Date.prototype
  8. Set ⭐🙼 Set.prototype
  9. Map ⭐🙼 Map.prototype
  10. JSON
  11. Math
  12. Reflect
  13. Symbol ⭐🙼 Symbol.prototype
  14. Number 🙼 Number.prototype
  15. Boolean 🙼 Boolean.prototype

DOM How-To

  1. Basic DOM Methods
  2. Get Elements by ID, Tag, Name, Class, CSS Selector
  3. Change CSS
  4. Change Node Content
  5. Create/Insert Node
  6. Remove Node
  7. Get Element's Attribute Value
  8. Set Element's Attribute Value
  9. Remove Element's Attribute Value
  10. List/Add/Remove Class Attribute
  11. Add/Remove Event Handler
  12. Navigate DOM Tree

DOM Overview

  1. Browser Window Object, Document Object Model
  2. Intro to Event-Based Programing
  3. JavaScript Load Order
  4. What is Live Object
  5. NodeList vs HTMLCollection
  6. DOM: Whitespace Nodes

Basic DOM Methods

  1. Basic DOM Methods
  2. Node Type, Name, Value
  3. Navigate DOM Tree

HTML Form

  1. HTML Form
  2. Visit URL in a New Window
  3. Instant Field Validation
  4. Input Field Validation
  5. HTML: Input Range Slider

DOM How To

  1. Encode URL, Escape String
  2. Browser Info, Navigator Object
  3. Get URL (window.location)
  4. Web Cookies
  5. Web Storage
  6. Find Window Width
  7. Find Element Width
  8. WebSocket

Web Scripting Examples

  1. Disable Right Click
  2. document.write
  3. Image Rollover
  4. Pop-up New Window
  5. Digital Clock
  6. Stopwatch
  7. Fade a Element
  8. Fade a Element Using CSS Transition
  9. Shake Element
  10. How to Create Tooltip
  11. Falling Snow Effect
  12. JavaScript: Floating Box Following Scroll

DOM Misc

  1. Value of “this” in Event Handler
  2. Event Delegation
  3. Get Current Script Tag
  4. insertAfter Element
  5. Randomize List
  6. create Document Fragment
  7. innerHTML, nodeValue, textContent, innerText?

jQuery

  1. jQuery Basics
  2. jQuery() vs querySelectorAll()
  3. Write JQuery Plugin

node.js