Question

In the following code, why are both of the methods (increment and print) listed inside of return? Why can’t you just use return counter++? Also, what does it mean to return a console.log?

function create() {
  var counter = 0;
  return {
    increment: function() {
      counter++;
    },
    print: function() {
      console.log(counter);
    }
  }
}

Thanks!

Answer 1

What this returns is more or less a Counter, if we rename the topmost function, it should make more sense.

Well what does it do? Let’s add some comments

function Counter() { // a function, nothing special here
  var counter = 0; // a variable that's local to the function Counter
  return { // return an object literal {}
    // which has a property named 'increment'
    increment: function() { // that's a function AND a closure
      counter++; // and therefore still has access to the variable 'counter' inside of Counter
    },
    print: function() { // another function
      console.log(counter); // this logs to the console in most web browser
                            // the console object was introduces by Firebug 
                            // and effort is made being to standardize it
    }
  }
}

Example usage:

var a = Counter(); // you don't need the new keyword here sinc in this case
                   // there's no difference because the implicit return overwrites
                   // the normal constructor behavior of returning 'this'
a.increment();
a.print(); // 1
var b = Counter();
b.print(); // 0

Note the variable counter inside the function is not accessible from the outside, therefore it’s readonly, an effect you can only achieve by using a closure.