1

I'm a javascript newbie and trying to understand how functions work. I found a similar question here but it doesn't really answer my question.

Taking the following piece of javascript as an example

var test = function(){
  console.log("kick off");
  var insideTest = "variable inside test";
  var init = function(){
    var insideInit ="variable inside init";
    console.log("inside init");
  }
  return{
    init:init
  }
}

test().init();

The above code prints the following:

kick off
inside init

But if I remove

return{
init:init
}

it gives me an error saying

Uncaught TypeError: Cannot read property 'init' of undefined

Also, even though I'm calling init method using test().init() it doesn't print inside Init if the return statement is removed.

My question is why is it necessary to return init:init to execute init method.

EDIT: To answer why my init function is inside the test() function here is the larger picture of what i'm trying to do.

var test = function() {
  var init = function() {
    var a = 0;
    function1();
    function2();
  }

  var function1() = function() {
    //some code
  }

  var function1() = function() {
    //some code
  }

  return {
    init: init
  }
}
Community
  • 1
  • 1
md1hunox
  • 3,815
  • 10
  • 45
  • 67
  • 1
    because if you return nothing, then the result of calling `test()` is `undefined` which has no method called `init` – Jaromanda X May 12 '17 at 04:05
  • 1
    You could alternatively `return init` then call the returned function `test()()`. Or, `var init = test(); init();` – guest271314 May 12 '17 at 04:07
  • `even though I'm calling init method using test().init() it doesn't print inside Init` - because you are not calling init at all if you dont' return anything – Jaromanda X May 12 '17 at 04:07

2 Answers2

3

Have added inline comments. Also the init inside test will have access to variable defined outside it(init) scope which is closure. test is returning an object to access it's inner function.This specific pattern is revealing module pattern

var test = function(){
  console.log("kick off");
  var insideTest = "variable inside test";
  // Here init is a function which is private to test function
  // Any function calling test will not have access to init unless it is 'exposed'
  var init = function(){
    var insideInit ="variable inside init";
    console.log("inside init");
  }
  return{
    init:init // exposing the private function
  }
}
brk
  • 48,835
  • 10
  • 56
  • 78
1

When you return, you're returning an Object with a single key of init, which you've assigned the "init" function that you defined within the test function. This allows you to return multiple functions if you'd like, so you can chain calls.

If you'd prefer a different way, you could just return the function without the curly braces, ie. return init;, and then assign the return of test() to a variable. var externalInitFnc = test();

Edit: Looking back it seems that you are fuzzy on the idea of scope in Javascript. When you defined init within the test function, it is only accessible within that function. Similar to how a private variable in a Java class is only available within that same class.

djak250
  • 9
  • 3
  • Yes, scope is a bit blurry area right now for me. Also, this is a snippet i created based on a larger code I'm working on. That code goes something like: https://jsfiddle.net/49pf1a6w/ – md1hunox May 12 '17 at 04:34