JavaScript: Operator “new”

By Xah Lee. Date: . Last updated: .

The keyword new is a operator in JavaScript.

This operator is used to create new objects, together with a function, in this syntax:

new function_name(…);

This page explains what “new” do exactly.

Creating Object with User Defined Constructor

You can create a object by using the keyword new with this syntax new function_name(…);, where function_name is ANY function.

// example of creating a object with user defined constructor

// define a function, no return statement
function FF () {
    this.b = 4; // adding a property
}

// create a new object
var x = new FF();

console.log(x); // { b: 4 }

Functions designed to be used with new are called constructor, and by convention the first letter of the function name is capitalized.

〔►see JavaScript: What's Constructor?

What Does “new” Do Exactly?

Here's what the new keyword do. Let's say we have new F().

  1. Every function F has a property key "prototype" 〔►see JavaScript: Property Key "prototype"
  2. The value of F.prototype by default is {"constructor":F} (that is, a object with a property key "constructor", with value of the function itself). 〔►see JavaScript: Property Key "constructor"
  3. JavaScript creates a new empty object with its parent being the value of F.prototype. Let's call this new object “tempObj”. 〔►see Understanding Prototype and Inheritance
  4. The function F is executed, with F's this value of “tempObj”. 〔►see What's “this” Keyword do?
  5. If F does not have a return statement, or it does but returns a value that is not a object, then the “tempObj” is the result. 〔►see JavaScript: What's Object?〕 If F returns a value that is a JavaScript object, then that object is the result.

ECMAScript 2015 §ECMAScript Language: Expressions#sec-new-operator

// example showing difference of constructor with different type of return value

var F1 = function () { this.b = 4; };
var F2 = function () { this.b = 4; return 3; };
var F3 = function () { this.b = 4; return {"c":7}; };

var x1 = new F1();
var x2 = new F2();
var x3 = new F3();

console.log(x1); // prints { b: 4 }
console.log(x2); // prints { b: 4 }
console.log(x3); // prints { c: 7 }

// what 「new F()」 returns depends on whether F returns a object

What's the Parent of a Object Created with “new”?

Here's a example showing the parent of the new object created by a constructor that doesn't have return statement.

// showing the prototype of a object created by a constructor that doesn't have a return statement
var FF = function (xx) { this.yy = xx; };
var oo = new FF(3);
console.log( Object.getPrototypeOf(oo) === FF.prototype ); // true

Here's a example showing the parent of the new object created by a constructor that returns a object.

// showing the prototype of a object created by a constructor that returns a object

// this function returns a object
var FF = function (xx) { return {"yy":3}; };

var oo = new FF(3);

// the parent of oo is NOT FF.prototype
console.log( Object.getPrototypeOf(oo) === FF.prototype ); // false

// because the function FF returns a object
// so, the newly created object is whatever the function returned.
// in this case, the object is created by literal expression {…}, and by default its parent is Object.prototype
console.log( Object.getPrototypeOf(oo) === Object.getPrototypeOf({}) ); // true
console.log( Object.getPrototypeOf(oo) === Object.prototype ); // true

〔►see JavaScript: Prototype and Inheritance

Changing Constructor's Prototype Property Does Not Change Parent of Existing Object

Here's a example showing that the parent is value of F.prototype at the time the new F() is called. Setting F.prototype to something else later does not change parent.

// changing constructor's prototype property does not change parent of existing object

function FF () {};
FF.prototype = {xx: 5};

var aa = new FF();

console.log(aa.xx); // 5

FF.prototype = {yy: 6};

console.log(aa.yy); // undefined

JS Constructor Topic

  1. JavaScript: Keyword “this”
  2. JavaScript: What's Constructor?
  3. JavaScript: Property Key "prototype"
  4. JavaScript: Operator “new”
  5. JavaScript “instanceof” Operator
  6. JavaScript: How to Use Object.create() to Emulate Constructor?
  7. JavaScript: Property Key "constructor"
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.