TypeError when using closures in javascript

Question

I am executing closure example, Please check the code below

function Counter()
{ 
    var count=0;
    var counterIncrement=function()
    {
        count++;
        console.log(count);            
    }
    return counterIncrement;  
    
}

var v=Counter();
v.counterIncrement();

Error: Please explain

"message": "Uncaught TypeError: v.counterIncrement is not a function",
"filename": "https://stacksnippets.net/js",
"lineno": 26,
"colno": 3

v.counterIncrement() doesn't make sense. Refer this - https://stackoverflow.com/a/111111/6643136 — Vinay, Jul 13 '17 at 04:40
`Counter` returns a function. It doesn't return an object with a property called `counterIncrement`. You could call `v();`, but `v.counterIncrement` is `undefined`. — Paul, Jul 13 '17 at 04:40
Possible duplicate of [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — Vinay, Jul 13 '17 at 04:43
https://www.youtube.com/watch?v=FYrtnS3X_Lw&t=30s please refer once — Veeresh Koppula, Jul 13 '17 at 05:40

Samuel Toh · Answer 1 · 2017-07-13T05:53:24.177

1

Updated:

This is an extended answer requested by OP in comment.

So OP was asking what if you have 2 functions within it. How would you call it? Easy, just return an object and assign the function handlers to a property each.

Example:

function Counter()
{
    var count=0;
    var counterIncrement = function()
    {
        count++;
        console.log(count);
    }

    var increment = function(value) {
        count += value;
        console.log(count);
    }

    // return as an object with reference to the functions
    return {
        counterIncrement : counterIncrement,
        increment : increment
    }
}

var v= Counter();
v.counterIncrement();
v.increment(100);

---- Previous Answer ------

When you execute var v=Counter();, essentially you are executing the function Counter() and assigning its return value to v.

In this case, Counter() would return a reference to the function counterIncrement.

So variable v now holds a callable function named counterIncrement(). When you do v.counterIncrement(), your javascript engine sees the code as counterIncrement.counterIncrement(), which gets resolved into an undefined property. This produces the error message that you were seeing.

Calling just v() is sufficient.

function Counter()
{
    var count=0;
    var counterIncrement=function()
    {
        count++;
        console.log(count);
    }
    return counterIncrement;

}

var v= Counter();
v();

edited Jul 13 '17 at 05:53

answered Jul 13 '17 at 04:50

Samuel Toh

18,006
3
24
39

but i want to call inside function of Counter() i,e counterIncrement for suppose i have two functions , when call v()// it will excute two functions right – Veeresh Koppula Jul 13 '17 at 04:56
@Bergi you have a point there. Doesn't make sense to init it as 50... not sure what i'm thinking. – Samuel Toh Jul 13 '17 at 04:56
@VeereshKoppula `v` is already the "inside function" so you just invoke it hence `v()` – Samuel Toh Jul 13 '17 at 04:57
Thanks for reply, my question is: if i have two functions in 1) counterIncrement(), 2Increment() how to call this two functions closer please explain am reffer - https://www.youtube.com/watch?v=FYrtnS3X_Lw&t=30s – Veeresh Koppula Jul 13 '17 at 05:43
Thank you so much , Can please explain // return as an object with reference to the functions return { counterIncrement : counterIncrement, increment : increment } why you are taking reference with out reference it will not execute , please refer this video, – Veeresh Koppula Jul 13 '17 at 09:14
@VeereshKoppula I don't understand what you're saying here. The code runs fine. – Samuel Toh Jul 13 '17 at 09:29

lalithkumar · Answer 2 · 2017-07-13T05:02:01.887

0

Try like this:

var counter = (function() {
  var count = 0;
  function countval(val) {
    count += val;
  }
  return {
    counterIncrement: function() {
      countval(1);
    },
    counterDecrement: function() {
      countval(-1);
    },
    value: function() {
      return count;
    }
  };   
})();

console.log(counter.value()); 
counter.counterIncrement();
console.log(counter.value()); 
counter.counterDecrement();
console.log(counter.value());

If you dont want like this you can call v(); instead of v.counterIncrement();..So code would be

var v=Counter();
v();

edited Jul 13 '17 at 05:02

answered Jul 13 '17 at 04:48

lalithkumar

3,480
4
24
40

Try making it less complicated. – Bergi Jul 13 '17 at 04:52
i thought of giving the minimal also but they already posted that answer. – lalithkumar Jul 13 '17 at 04:55
but i want to call inside function of Counter() i,e counterIncrement for suppose i have two functions , when call v()// it will excute two functions right – Veeresh Koppula Jul 13 '17 at 04:57
if you want to use two function you can add another function in return .. i ll update my answer – lalithkumar Jul 13 '17 at 05:00
see my second function `counterDecrement` and i called like `counter.counterDecrement();` and getting the vaule from `counter.value()` @Veeresh Koppula – lalithkumar Jul 13 '17 at 05:02

score 0 · Answer 3 · answered Jul 13 '17 at 05:35

you can slightly modify your code for create an object of Counter then you can access the function like myObject.counterIncrement()

function Counter()
{ 
    var count=0;
    this.counterIncrement = function() //used 'this' for create an object method which can access outside
    {
        count++;
        console.log(count);            
    }
    //return counterIncrement;  //no need to return this method,

}

var v = new Counter();//used 'new' keyword to create an object of 'counter' 
v.counterIncrement();//access ojbect method.

v.counterIncrement();//out put 2
v.counterIncrement();//out put 3

Sourabh Somani · Answer 4 · 2017-07-13T05:11:23.970

-1

function Counter()
{ 
    var count=0;
    var counterIncrement=function()
    {
        count++;
        console.log(count);            
    }
    return counterIncrement;// Here you are returning function 
}

var v=Counter();
//v.counterIncrement();// This will not call like that 
//Directly call
v();

Answer as you like is as following

var counter = (function() {
var count = 0;
return {
    counterIncrement: function() {
    count++;
    console.log(count);
    },
  };   
})();

edited Jul 13 '17 at 05:11

answered Jul 13 '17 at 04:41

Sourabh Somani

2,138
1
13
27

but i want to call inside function of Counter() i,e counterIncrement for suppose i have two functions , when call v()// it will excute two functions right – Veeresh Koppula Jul 13 '17 at 04:57
Okay I am updating my answer as you want – Sourabh Somani Jul 13 '17 at 05:02
I have updated as you want please check second example – Sourabh Somani Jul 13 '17 at 05:13

TypeError when using closures in javascript

4 Answers4