Is it necessary to use the "new" keyword when utilizing JS closure to create objects?

Question

Is it necessary to use the "new" keyword when utilizing JS closure to create objects?

My response to a question about closures on SO included the following code sample:

function Constructor() {
    var privateProperty = 'private';
    var privateMethod = function(){
        alert('called from public method');
    };
    return {
        publicProperty: 'im public',
        publicMethod: function(){
            alert('called from public method');
        },
        getter: privateMethod
    }
}

var myObj = new Constructor();

//public
var pubProp = myObj.publicProperty;
myObj.publicMethod();
myObj.getter();

//private - will cause errors
myObj.privateProperty
myObj.privateMethod

A user left a comment on my answer which said:

Also, if your function explicitly returns an object it is not a good practice to call it with new because that is misleading - if using new you'd expect the result to be an instance of Constructor

I typically create objects using new. But why is it considered not a good practice? It appears that using new and not using new both return the same thing. What is the correct way to create objects from closures?

javascript closures

Answer 1

Answer №1

It's important to note that the use of instanceof can yield unexpected results, as demonstrated below:

function C1() {
    return {};
}

function C2() {
}

var c1 = new C1();
var c2 = new C2();
alert(c1 instanceof C1); // false; unexpected result
alert(c2 instanceof C2); // true, expected result

Here's a demo.

To avoid such issues, it's recommended to create objects by assigning to this, with added safeguards to prevent missing new calls.

function Constructor() {
    var privateProperty = 'private';
    var privateMethod = function() {
        alert('Called from private method');
    };

    this.publicProperty = "I'm public!";
    this.publicMethod = function() {
        alert('Called from public method');
    };
    this.getter = privateMethod;
}

An even more efficient approach is to utilize prototypes whenever possible:

function Constructor() {
    var privateProperty = 'private';
    var privateMethod = function() {
        alert('Called from private method');
    };

    this.getter = privateMethod;
}

Constructor.prototype.publicProperty = "I'm public!";
Constructor.prototype.publicMethod = function() {
    alert('Called from public method');
};

Answer 2

It's important to note that the use of instanceof can yield unexpected results, as demonstrated below:

function C1() {
    return {};
}

function C2() {
}

var c1 = new C1();
var c2 = new C2();
alert(c1 instanceof C1); // false; unexpected result
alert(c2 instanceof C2); // true, expected result

Here's a demo.

To avoid such issues, it's recommended to create objects by assigning to this, with added safeguards to prevent missing new calls.

function Constructor() {
    var privateProperty = 'private';
    var privateMethod = function() {
        alert('Called from private method');
    };

    this.publicProperty = "I'm public!";
    this.publicMethod = function() {
        alert('Called from public method');
    };
    this.getter = privateMethod;
}

An even more efficient approach is to utilize prototypes whenever possible:

function Constructor() {
    var privateProperty = 'private';
    var privateMethod = function() {
        alert('Called from private method');
    };

    this.getter = privateMethod;
}

Constructor.prototype.publicProperty = "I'm public!";
Constructor.prototype.publicMethod = function() {
    alert('Called from public method');
};

Answer 3

Answer №2

When examining point 4 in this response: Understanding the concept of the 'new' keyword in JavaScript

"The outcome is the newly formed object, unless the constructor function yields a non-primitive value. In such scenario, that non-primitive value will take precedence."

Hence, following minitech's explanation where function C1 delivers an empty object, the variable c1 will correspond to the returned object instead of the one generated by the 'new' declaration. Consequently, no instance of the constructor function is created.

In case I attempt to return a primitive value from the constructor function, my webstorm issues a notice: "If invoked with new, the intended value will not be preserved and an object will be delivered as the result instead."

Answer 4

When examining point 4 in this response: Understanding the concept of the 'new' keyword in JavaScript

"The outcome is the newly formed object, unless the constructor function yields a non-primitive value. In such scenario, that non-primitive value will take precedence."

Hence, following minitech's explanation where function C1 delivers an empty object, the variable c1 will correspond to the returned object instead of the one generated by the 'new' declaration. Consequently, no instance of the constructor function is created.

In case I attempt to return a primitive value from the constructor function, my webstorm issues a notice: "If invoked with new, the intended value will not be preserved and an object will be delivered as the result instead."

Is it necessary to use the "new" keyword when utilizing JS closure to create objects?

Answer №1

Answer №2

Similar questions

The 'xxx' type is lacking various properties compared to the 'xxx[]' type, such as length, pop, push, concat, and many others

Interact with USB drive using electron to both read and write data

Finding clarity amidst the chaos of require and export in Express.js (Node.js)

Animating content through CSS and jQuery to reveal its unfolding effect

How can I access specific values from a table generated with a PHP array using jQuery?

Managing the layout with React Native Flexbox to evenly distribute items

Insert the URL into either a div or an iframe

Looking for assistance with reviewing and optimizing Angular UI-Router implementation

Automatically substitute a term with a clickable link

Adjust the height of a div using jQuery animate based on the amount of text within

Another class is overriding the border of the text-box

Clear the Material-UI textfield upon form submission

Ways to store information using VueJS lifecycle hooks

Adjusting the position of a stationary element when the page is unresponsive and scrolling

Utilize a vacant implementation of an interface

Leveraging ThemeProvider Parameters with Global Styled-Components

Next.js React Hydration Issue - "Anticipated a corresponding <a> within the server HTML <a>"

Refine the search outcomes by specifying a group criteria

NodeJS: Retrieve Over 10,000 Images From the Server

What are the steps for encountering a duplicate property error in TypeScript?