CODEWITHSUNDEEP
javascriptscope
chris_s
chris_s

Reputation: 1051

Explain this Uncaught TypeError: Property 'x' of object [object Object] is not a function

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());

Upvotes: 2

Views: 1790

Answers (4)

RWAM
RWAM

Reputation: 7018

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

Upvotes: 0

Eric
Eric

Reputation: 97555

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.

Upvotes: 0

rGil
rGil

Reputation: 3719

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;
}

Upvotes: 2

user1106925
user1106925

Reputation:

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;
}

Upvotes: 7

Related Questions