Can you clarify the issue with the Uncaught TypeError stating that Property 'x' of object [object Object] is not a function?

Question

Can you clarify the issue with the Uncaught TypeError stating that Property 'x' of object [object Object] is not a function?

Could someone please clarify why the outcomes differ in each scenario described below? I am trying to grasp the way JavaScript interacts with scope, assuming that is the root of the issue. In the initial example, my code behaves as expected.

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 relocate the addSalaryFunction inside the Employees function and position it beneath this.addSalary, I encounter an 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());

However, if I move the addSalaryFunction above this.addSalary, the code functions correctly again. My IDE indicates that the local variable addSalaryFunction seems 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());

javascript scope

Answer 1

Answer №1

The reason for the error is that you are attempting to assign a function before it has been created.

this.addSalary = addSalaryFunction; // At this point, the function does not exist yet

//...

var addSalaryFunction = function(addition) {  // The function is defined here, but it's too late
    this.salary = this.salary + addition;
};

By moving the variable assignment above

this.addSalary = addSalaryFunction

, you create the function before referencing it.

var addSalaryFunction = function(addition) {  // Function definition goes first
    this.salary = this.salary + addition;
};
this.addSalary = addSalaryFunction;  // Now the function can be assigned and accessed

If you had used function declaration syntax instead, the initial version would work because function declarations are "hoisted" to the top of the scope.

this.addSalary = addSalaryFunction; // Works due to hoisting

//...

// This function is magically hoisted to the top
function addSalaryFunction(addition) {
    this.salary = this.salary + addition;
}

Answer 2

The reason for the error is that you are attempting to assign a function before it has been created.

this.addSalary = addSalaryFunction; // At this point, the function does not exist yet

//...

var addSalaryFunction = function(addition) {  // The function is defined here, but it's too late
    this.salary = this.salary + addition;
};

By moving the variable assignment above

this.addSalary = addSalaryFunction

, you create the function before referencing it.

var addSalaryFunction = function(addition) {  // Function definition goes first
    this.salary = this.salary + addition;
};
this.addSalary = addSalaryFunction;  // Now the function can be assigned and accessed

If you had used function declaration syntax instead, the initial version would work because function declarations are "hoisted" to the top of the scope.

this.addSalary = addSalaryFunction; // Works due to hoisting

//...

// This function is magically hoisted to the top
function addSalaryFunction(addition) {
    this.salary = this.salary + addition;
}

Answer 3

Answer №2

The reason the second method fails is that addSalaryFunction is being called before it is defined.

To simplify, you can just define it like this:

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

Answer 4

The reason the second method fails is that addSalaryFunction is being called before it is defined.

To simplify, you can just define it like this:

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

Answer 5

Answer №3

In a more simplified manner:

function exampleOne() {
    var num = val;
    var val = 4;
    return num;
};

function exampleTwo() {
    var value = 4;
    var num = value;
    return num;
};

Certainly, exampleTwo() will return 4. On the other hand, exampleOne() encounters an issue as it attempts to access the value of val before it has been defined, resulting in undefined being returned. Declarations for variables are elevated to the top within their scope, but initializations are not.

Answer 6

In a more simplified manner:

function exampleOne() {
    var num = val;
    var val = 4;
    return num;
};

function exampleTwo() {
    var value = 4;
    var num = value;
    return num;
};

Certainly, exampleTwo() will return 4. On the other hand, exampleOne() encounters an issue as it attempts to access the value of val before it has been defined, resulting in undefined being returned. Declarations for variables are elevated to the top within their scope, but initializations are not.

Answer 7

Answer №4

There seems to be a particular issue with hoisting here. Check out this informative resource for more insight: http://www.example.com/understanding-javascript-hoisting/

Answer 8

There seems to be a particular issue with hoisting here. Check out this informative resource for more insight: http://www.example.com/understanding-javascript-hoisting/

Can you clarify the issue with the Uncaught TypeError stating that Property 'x' of object [object Object] is not a function?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the correct way to upload an image using the Express static middleware?

I am facing an issue with my useFetch hook causing excessive re-renders

AngularJS: Retrieve individual objects from an array and subsequently initiate asynchronous requests

Steps to create a scrollable material-ui Modal

JavaScript/CSS manipulation: The power of overriding animation-fill-mode

Using jQuery to loop through a table and choose dropdown menus

I've been attempting to develop a React application, but I consistently encounter the following error: "npm ERR! cb() function was never invoked!"

What is the best way to ensure a consistent time interval between invoking two functions in JavaScript?

Timeout during the beforeLoad event

"Exploring the powerful combination of React.js with DataGrid

The backdrop moving in a reverse direction

Rubaxa's sorting feature conceals floating entities but not the real rows

Encountered an issue during the package installation process in Next.js

SlickGrid cannot function without a proper container, unfortunately #myGrid is not present in the DOM

Using JavaScript to retrieve data from a JSON file and showcase it on a jQuery mobile webpage

Evaluating the functionality of Express Js Server with mocha and chai

display in a modal-body and jdata

Utilize SectionList and a custom header view on Y to achieve a translation effect that creates a visually appealing empty space as

Ways to pause and restart an animation without removing the initial tag object?

Exploring the depths of Javascript objects using Typescript