Javascript: TypeError: callback is not a function

Question

Pulling my hair out here trying to understand the infuriating nuances of Javascript. Hopefully some JS guru can take a gander, point and go, "well, there's yer problem...".

Here's a slimmed down sample of the problem:

var Parent = (function () {
    var func1 = function () {
        func2(function (res) {
            console.log(res);
        });
    };

    var func2 = function (callback) {
        callback('abc');
    };

    return {
        init: function () {
            func1();
            func2();
        }
    };
})();

Call with Parent.init();

This fails with the error:

Uncaught TypeError: callback is not a function
    at check2 (<anonymous>:9:9)
    at Object.init (<anonymous>:15:13)
    at <anonymous>:1:8

What's getting me, is that if I comment out the enclosing code, like so, then it works as expected:

// var Parent = (function () {
    var func1 = function () {
        func2(function (res) {
            console.log(res);
        });
    };

    var func2 = function (callback) {
        callback('abc');
    };

    // return {
    //     init: function () {
    //         func1();
    //         func2();
    //     }
    // };
// })();

...and call with func1();

Result:

abc

What am I missing?

Thanks

Your function is written with a parameter, but when you call it you pass nothing. — Pointy
– Pointy, Commented Sep 23, 2020 at 13:19
To turn the question around... When you call func2(); what do you expect callback to be and why? — David
– David, Commented Sep 23, 2020 at 13:20
In your init() function, you're calling func2();, without specifying the callback function as the required argument. In your second version (with init commented out), you're correctly specifying the callback function in func2(function (res) { ... });. — Reece
– Reece, Commented Sep 23, 2020 at 13:20
func2() must do some processing and return a result. My (perhaps screwed) understanding is that callback must call the "calling" anon function in func1(). lol, I dunno, hence the question. I just want to know why it works in the one sample, but not the other. — Henry
– Henry, Commented Sep 23, 2020 at 13:23
@Reece - mmm, ok, let me give that a try. Sounds like sound advice. — Henry
– Henry, Commented Sep 23, 2020 at 13:24

Reece · Accepted Answer · 2020-09-23 13:26:36Z

1

In your version, you're calling func2() without specifying the callback function, which is a required argument. In your second example (with init commented out), you're correctly specifying the callback function in func2(function (res) { ... });.

Is the below snippet something you're looking for?

const Parent = (function () {
  const func1 = function () {
    func2(function (res) {
      console.log(res);
    });
  }

  const func2 = function (callback) {
    callback('abc'); // this is passing 'abc' to line 3 of this snippet
  }

  return {
    init: function () {
      func1();
      // func2(); // you don't want to call "func2" here, as "func1" calls it
      // Or you could run:
      func2(function (res) {
        console.log(res);
      });
      // But this makes "func1" redundant
    }
  };
});

Parent().init();

// Output
abc

answered Sep 23, 2020 at 13:26

Reece

5493 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Henry Over a year ago

Thanks @Reece, that works and makes sense. Much appreciated!

Reece Over a year ago

If this answer helped you solve your question, please mark it as the solution :-). Happy to help!

Henry Over a year ago

...just waiting for the mandatory countdown to end so I can click that button!

Reece Over a year ago

Cheers Henry! Glad I was able to help.

N1gthm4r3 · Accepted Answer · 2020-09-23 13:24:42Z

1

You have to pass callback parameter into func2 inside init. something like this.

init: function () {
            func1();
            func2(function (res) {
                 console.log(res);
            });
      }

answered Sep 23, 2020 at 13:24

N1gthm4r3

7931 gold badge11 silver badges24 bronze badges

Comments

David · Accepted Answer · 2020-09-23 13:26:41Z

1

From a comment on the question:

I just want to know why it works in the one sample, but not the other.

Because in one example you pass an argument to func2 and in the other you don't. Look at the working version:

func2(function (res) {
    console.log(res);
});

vs. the non-working version:

func2();

The difference is that the first one passes a function which gets invoked as callback('abc'); whereas the second one passes nothing, so the attempt to invoke the non-existant callback function fails.

As an aside, in your non-working example you call func2 twice, once with the callback and once without. So it both "works" and "fails" in that case.

answered Sep 23, 2020 at 13:26

David

221k42 gold badges247 silver badges338 bronze badges

Collectives™ on Stack Overflow

Javascript: TypeError: callback is not a function

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related