JavaScript return a JSON with a function name

Question

I'm learning AngularJS, and someone wrote this code:

.factory('cribs',function(){
    var data = [{
        name: "jack",
        last: 'doe'
    },{
        name: 'hazel',
        last: 'man'
    }
    ];

    function getcrib(){
        return data;
    }
    return{
        getcrib: getcrib // what the heck does this mean?
    }
})

I'm baffled with the return line... he returned an object of getcrib with a function that returns the data? Does the getcrib at the beginning need to be the same exact case?

The semicolon is wrong, but yes, getcrib is a reference to the function declared in the lines above. The property name getcrib only matters to the user of the factory. — Bergi
– Bergi, Commented Jan 13, 2017 at 2:45
oh yes semi colon is wrong. could nt he just return the function itself instead of that? is this line of code similar? var t = function getcrib(){ ..} return t as such? — Chopnut
– Chopnut, Commented Jan 13, 2017 at 2:46
It doesn't matter in this tiny example, but when things get more complicated, by having a single place where you can see: 'return {usefulFunction: usefulFunction, anotherUsefulFunction: anotherUsefulFunction, ..., etc. }', it helps a person get a quick look at what gets 'exported' by the factory without having to wade through a ton of function declarations. — Chas Brown
– Chas Brown, Commented Jan 13, 2017 at 2:59
Yes, returning a function directly instead of returning an object with a single method is often a good idea, however you loose the method name which might or might not be significant. You'll want to ask the author of the code why he chose this approach, we cannot know. — Bergi
– Bergi, Commented Jan 13, 2017 at 3:02

CozyAzure · Accepted Answer · 2017-01-13 03:45:07Z

3

All the four codes below does the same thing. Hope you have a better understanding on function declarations. :)

Code 1:

.factory('cribs',function(){
    var data = 3.142;
    function getcrib(){
        return data;
    }
    return{
        getcrib: getcrib 
    }
})
//console.log(cribs.getcrib()) outputs 3.142

Explanation:

An object is returned.

This object has a property of getcrib, which reference the function whose name is also getcrib.

Code 2:

.factory('cribs', function() {
  var data = 3.142;
  return {
    getcrib: function() {
      return data;
    }
  }
})
//console.log(cribs.getcrib()) outputs 3.142

Explanation:

An object is returned.

This object has a property of getcrib, which reference an anonymous function. (anonymous is a function without a name)

Code 3:

.factory('cribs',function(){
    var data = 3.142;
    function GET_PI_VALUE(){
        return data;
    }
    return{
        getcrib: GET_PI_VALUE
    }
})
//console.log(cribs.getcrib()) outputs 3.142

Explanation:

An object is returned.

This object has a property of getcrib, which reference a function whose name is called GET_PI_VALUE. This is the same case as code 1

Code 4:

.factory('cribs', function() {
  var data = 3.142;
  return {
    getcrib: function GET_PI_VALUE() {
      return data;
    }
  }
})
//console.log(cribs.getcrib()) outputs 3.142

Explanation:

An object is returned.

This object has a property of getcrib, which reference a function whose name is called GET_PI_VALUE. This is the same case as code 3.

Code 5

.factory('cribs', function() {
  var data = 3.142;
  return {
    getcrib: function GET_PI_VALUE() {
      return data;
    }
  }
})
//console.log(cribs.GET_PI_VALUE()) gives an error, complaining GET_PI_VALUE is not a function.

Explanation:

An object is returned.

This object has a property of getcrib

GET_PI_VALUE is totally shadowed, hence error. The function of GET_PI_VALUE itself was NOT returned, only the reference(via getcribs) is returned.

edited Jan 13, 2017 at 3:45

answered Jan 13, 2017 at 3:07

CozyAzure

8,4987 gold badges39 silver badges56 bronze badges

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

6 Comments

Chopnut Over a year ago

wow thank you very much! I get confused with returning a function without the bracket and with a bracket. Im really slow at this but this really helps! Thank you for a thorough explanation of a noob javascripter :D

CozyAzure Over a year ago

blame those javascript inventors who come up with this confusing convention! :P

Chopnut Over a year ago

And javascript not having a proper class name, I thought he was returning an object instead of a function, I was also learning about prototype.constructor = ObjectNameOrfunctionName;and combined with what I saw . just confuses me. Oh a follow up question, if factory is being returned wouldnt the function inside be automatically be callable as well? or should he go something like this.function getcrib(){ .. }?

CozyAzure Over a year ago

@Chopnut What a good follow up. No, the function insides are NOT callable. They are shadowed. You can only access what is returned. This is sort of a nice encapsulation in away. See my edit on Code 5

Chopnut Over a year ago

Wow awesome! I wouldnt have known that! Because any start up tutorial doesnt tell you that!Cause he didnt explain why he had to return a function, I was like thats weird.. Man youre a life saver! Thats it for now =) Super thanks! Done deal.

|

Collectives™ on Stack Overflow

JavaScript return a JSON with a function name

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related