What is the purpose of the 'new' keyword in JavaScript?

Question

What is the purpose of the 'new' keyword in JavaScript?

After years of using JavaScript like a semi-imperative version of Lisp, I am still confused about how constructors actually work in the language. I would appreciate some insight into how objects are meant to function in JavaScript.

Consider this code snippet:

function Foo(x) {
    return {
        bar: function() { return x; }
    };
}

I'm curious to know what sets myFoo = Foo(5) apart from myFoo = new Foo(5). In essence, what is the role of a constructor in JavaScript?

javascript oop

Answer 1

Answer №1

What is the distinction between using myFoo = Foo(5) versus myFoo = new Foo(5)?

In this scenario, there actually isn't a difference because both methods result in an object being returned. According to the specification:

Let result be the outcome of invoking the [[Call]] internal property of F, with obj as the this value and the argument list provided into [[Construct]] as args.

If Type(result) is Object, then return result.

Since the function returns an Object as its result, either method can be used interchangeably. A discrepancy would only arise if it did not return an object or if it checked this, such as in this example:

function Foo(x) {
  if (!(this instanceof Foo)) { return new Foo(x); }
  this.bar = function() { return x; };
}
// Now instanceof works.
alert((new Foo) instanceof Foo);

What exactly does the new operator do in JavaScript?

The new operator results in the function being invoked with this bound to a freshly created Object whose prototype is the function's prototype property.

For user-defined functions,

new f(a, b, c)

is essentially equivalent to

// Create a new instance using f's prototype.
var newInstance = Object.create(f.prototype), result;

// Invoke the function
result = f.call(newInstance, a, b, c),

// If the result is a non-null object, use it; otherwise, use the new instance.
result && typeof result === 'object' ? result : newInstance

It's important to note that the language specification defines functions with two operations, [[Call]] and [[Construct]], which leads to some peculiar behaviors when using new.

For instance, bound and built-in functions:

var g = f.call.bind(f);

should create a function that merely calls f; thus, g should behave identically to f. However, when doing:

new g()

a

TypeError: function call() { [native code] } is not a constructor

error occurs since the built-in function Function.prototype.call supports [[Call]] but not [[Construct]].

Additionally, Function.prototype.bind displays different behavior between new and regular calls. The this value is always the bound thisValue during a regular call, whereas it becomes a newly constructed instance when using new.

Answer 2

What is the distinction between using myFoo = Foo(5) versus myFoo = new Foo(5)?

In this scenario, there actually isn't a difference because both methods result in an object being returned. According to the specification:

Let result be the outcome of invoking the [[Call]] internal property of F, with obj as the this value and the argument list provided into [[Construct]] as args.

If Type(result) is Object, then return result.

Since the function returns an Object as its result, either method can be used interchangeably. A discrepancy would only arise if it did not return an object or if it checked this, such as in this example:

function Foo(x) {
  if (!(this instanceof Foo)) { return new Foo(x); }
  this.bar = function() { return x; };
}
// Now instanceof works.
alert((new Foo) instanceof Foo);

What exactly does the new operator do in JavaScript?

The new operator results in the function being invoked with this bound to a freshly created Object whose prototype is the function's prototype property.

For user-defined functions,

new f(a, b, c)

is essentially equivalent to

// Create a new instance using f's prototype.
var newInstance = Object.create(f.prototype), result;

// Invoke the function
result = f.call(newInstance, a, b, c),

// If the result is a non-null object, use it; otherwise, use the new instance.
result && typeof result === 'object' ? result : newInstance

It's important to note that the language specification defines functions with two operations, [[Call]] and [[Construct]], which leads to some peculiar behaviors when using new.

For instance, bound and built-in functions:

var g = f.call.bind(f);

should create a function that merely calls f; thus, g should behave identically to f. However, when doing:

new g()

a

TypeError: function call() { [native code] } is not a constructor

error occurs since the built-in function Function.prototype.call supports [[Call]] but not [[Construct]].

Additionally, Function.prototype.bind displays different behavior between new and regular calls. The this value is always the bound thisValue during a regular call, whereas it becomes a newly constructed instance when using new.

Answer 3

Answer №2

In this specific instance, there is no disparity in the final outcome.

This occurs because the function Foo is giving back an object instance.

The new operator yields a newly formed object that inherits from the constructor's prototype only when the function produces a primitive value (or if it doesn't produce any result, which technically represents the undefined value).

For instance:

function Foo () {
  return 5; // or "", or null, or no return statement at all (undefined)
}

var foo = new Foo();
typeof foo; // "object"
foo instanceof Foo; // true
Foo.prototype.isPrototypeOf(foo); // true

When you hand back an object, the freshly created object that borrows from the constructor's prototype is simply disregarded:

function Foo () {
  return {};
}

var foo = new Foo();
typeof foo; // "object"
foo instanceof Foo; // false
Foo.prototype.isPrototypeOf(foo); // false

Also refer to:

What values can a constructor return to avoid returning this?
JavaScript: How does 'new' work internally

Answer 4

In this specific instance, there is no disparity in the final outcome.

This occurs because the function Foo is giving back an object instance.

The new operator yields a newly formed object that inherits from the constructor's prototype only when the function produces a primitive value (or if it doesn't produce any result, which technically represents the undefined value).

For instance:

function Foo () {
  return 5; // or "", or null, or no return statement at all (undefined)
}

var foo = new Foo();
typeof foo; // "object"
foo instanceof Foo; // true
Foo.prototype.isPrototypeOf(foo); // true

When you hand back an object, the freshly created object that borrows from the constructor's prototype is simply disregarded:

function Foo () {
  return {};
}

var foo = new Foo();
typeof foo; // "object"
foo instanceof Foo; // false
Foo.prototype.isPrototypeOf(foo); // false

Also refer to:

What values can a constructor return to avoid returning this?
JavaScript: How does 'new' work internally

Answer 5

Answer №3

When you create a new object in this case, there won't be any difference. You could rephrase it like this:

function Foo(x){
   this._x = x;
}

Foo.prototype.bar = function() {
   return this._x;
}

Using this syntax, each time new Foo is called, a new object with a property of _x will be created. The advantage is that the bar function will only be stored once and can be used for multiple instances of Foo. In contrast, if you call Foo() multiple times as shown in the code, a separate bar function will be created for every instance. Therefore, attaching functions to the prototype rather than directly on the object will consume less memory.

You can find a detailed explanation of how prototypes work here at MDN.

Answer 6

When you create a new object in this case, there won't be any difference. You could rephrase it like this:

function Foo(x){
   this._x = x;
}

Foo.prototype.bar = function() {
   return this._x;
}

Using this syntax, each time new Foo is called, a new object with a property of _x will be created. The advantage is that the bar function will only be stored once and can be used for multiple instances of Foo. In contrast, if you call Foo() multiple times as shown in the code, a separate bar function will be created for every instance. Therefore, attaching functions to the prototype rather than directly on the object will consume less memory.

You can find a detailed explanation of how prototypes work here at MDN.

What is the purpose of the 'new' keyword in JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for including a footer element in React:How can a footer division be

Discover the power of EJS embedded within HTML attributes!

The functionality of module.exports and require operation

The debate between CSS Generic loading and Page Specific loading has been a

What is the best way to access the original observed node using MutationObserver when the subtree option is set to

express.js and socket.io compatibility perplexity

Tips on avoiding duplicate selection of checkboxes with Vue.js

Creating a grid with React and implementing lodash

Mastering MaterializeCSS: Creating a Toggle Feature for Two Notifications with a Single Button Click

Adjusting the label on the Formik toggler

"An issue with the external jQuery file loop causes it to skip either the first or

Ways to replicate a key press event upon the loading of a document

changing the default property value within an object

Updating the content of a file on an iPhone

Is there a way to dynamically update the button color within JavaScript and have it reflect in a separate function?

Choose a numeric value and then adjust it to display with exactly two decimal places

After npm installation and running the dev command, an error is displayed in the console, despite the project functioning properly on a different

Issue with activation of onClick event in case/switch statement

Troubleshooting Problem in Coursera's AngularJS Week 3 Exercise 4

jQuery code runs smoothly on Firefox but encounters issues on Chrome