Is the code executed when I create instance of a function?

Question

Hey guys I am new to JS and wanted to ask you about when I create instance of the below function then Is it executed like when I use PageState()? What exactly happens when I use const page = new PageState();

function PageState(){
        let currentState = new homeState();
    
        this.change = function(state){
            currentState=state;
        }
    }
    
const page = new PageState();

You can read this [`new operator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new) for more info — Code Maniac, Jul 16 '19 at 12:11
note you are not creating an instance of the function PageState but an object whose constructor is the function PageState - ie.. page() will not work. as page is not a function. — Bob, Jul 16 '19 at 12:38
You might want to look at ES6 classes https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes if you are doing oop. — Bob, Jul 16 '19 at 12:50

T.J. Crowder · Accepted Answer · 2019-07-16T12:29:45.070

What exactly happens when I use const page = new PageState();

A new object is created with the object that PageState.prototype refers to as its prototype, and then the code in PageState runs. The code in PageState creates a new homeState object and a new function object (for the change property). (That change function is not executed by the code shown, but could be executed via page.change(/*...*/); later.) Although a new function object is created every time, it will reuse the underlying code (not that there's a lot in this case :-) ) on any modern JavaScript engine. That new function is a closure over the context where it was created, which means it has access to the currentState local variable even after PageState returns.

More on closures:

On my anemic little blog: Closures are Not Complicated
Here on SO: How do JavaScript closures work?

score 0 · Answer 2 · answered Jul 16 '19 at 12:20

I changed the code to have a working example. It's commented with some explanation throughout.

function PageState(){
        this.currentState = 0;

        this.change = function(state){
          this.currentState = state;
        }
    }

// Create variable with function Page State in it
const page = new PageState();

// Access one properties of page, this example an integer which is set to 0
console.log("Initial value of current state: " + page.currentState)

// You can also store functions as properties
// You can call this function like this:
result = page.change(1)

// I saved the result in a variable to let you see the returned value (currentState)
console.log("Changed value of current state: " + page.currentState)

score 0 · Answer 3 · answered Jul 16 '19 at 12:26

When you call a function with new keyword, you are creating a new object. You can add properties and methods to this object through this. You can create local variables in this function, they will not be available in the created object. I recommend you to see Module pattern.

Is the code executed when I create instance of a function?

3 Answers3