2

Can someone please explain why I get the results I do in each of the following situations? I wish to understand why the outcomes are what they are regarding how JavaScript works with scope, if this is what the issue is. In the first example, my code functions properly.

var Employees = function(name, salary) {
    this.name = name;
    this.salary = salary;

    this.addSalary = addSalaryFunction;

    this.getSalary = function() {
        return this.salary;
    };

};

var addSalaryFunction = function(addition) {
        this.salary = this.salary + addition;
    };


var ceo = new Employees("Chris", 400000);
ceo.addSalary(20000);
document.write(ceo.getSalary());

If I move the addSalaryFunction into the Employees function, and below this.addSalary I get the Uncaught TypeError.

var Employees = function(name, salary) {
    this.name = name;
    this.salary = salary;

    this.addSalary = addSalaryFunction;

    this.getSalary = function() {
        return this.salary;
    };

    var addSalaryFunction = function(addition) {
        this.salary = this.salary + addition;
    };
};

var ceo = new Employees("Chris", 400000);
ceo.addSalary(20000);
document.write(ceo.getSalary());

But if I move the addSalaryFunction above this.addSalary if works properly again. Although my IDE tells me that my local variable addSalaryFunction is redundant.

var Employees = function(name, salary) {
    this.name = name;
    this.salary = salary;

    var addSalaryFunction = function(addition) {
        this.salary = this.salary + addition;
    };

    this.addSalary = addSalaryFunction;

    this.getSalary = function() {
        return this.salary;
    };

};


var ceo = new Employees("Chris", 400000);
ceo.addSalary(20000);
document.write(ceo.getSalary());

4 Answers 4

7

It's because you're trying to assign the function before it was created.

this.addSalary = addSalaryFunction; // there's no function yet

//...

var addSalaryFunction = function(addition) {  // now there is, but too late
    this.salary = this.salary + addition;
};

When you moved the variable assignment above the this.addSalary = addSalaryFunction, you're now creating the function before trying to reference it.

var addSalaryFunction = function(addition) {  // here's the function
    this.salary = this.salary + addition;
};
this.addSalary = addSalaryFunction;  // now we can assign it

If you had used function declaration syntax instead, the first version would work, because the function declarations are "hoisted" (as they say) to the top of the variable scope.

this.addSalary = addSalaryFunction; // This now works because of the magic below

//...

// This is magically hoisted to the top
function addSalaryFunction(addition) {
    this.salary = this.salary + addition;
}
2
  • Great explanation here
    – RobH
    May 17, 2013 at 13:21
  • @chris_s: You're welcome. Ultimately, the cleanest solution is to use what rGil posted. But IMO, even better is to use prototypal inheritance by putting all your methods on Employees.prototype. Then they're shared between all Employee objects instead of recreated for every object.
    – user1106925
    May 17, 2013 at 13:33
2

Second method does not work because addSalaryFunction is being referenced before it has been declared.

You could eliminate some code and just declare:

this.addSalary = function(addition) {
    this.salary = this.salary + addition;
}
0

In a much simpler form:

var foo = function() {
    var x = y;
    var y = 2;
    return x;
};

var bar = function() {
    var y = 2;
    var x = y;
    return x;
};

Obviously, bar() will return 2. foo, however, gets undefined when it looks for a value of y on the first line, so returns undefined. While variable declarations are hoisted to the top of their scope, variable initialisations are not.

0

It's a specific hoisting problem. Have a look at this explanation: http://www.sitepoint.com/back-to-basics-javascript-hoisting/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.