1

I saw this in an online lecture, and I am wondering what is going on with the return statement? 

myAcessors = (function() {
  var data = "data";
  var getData = function() {
    console.log(data);
  };
  var setData = function(val) {
    data = val;
  };
  return {
    getData: getData,
    setData: setData
  };
})();
Ivan
  • 34,531
  • 8
  • 55
  • 100
akotch
  • 215
  • 5
  • 11

2 Answers2

1

myAcessors is an object containing the properties getData and setData, they are both functions.

myAcessors = (function() {
  var data = "data";
  var getData = function() {
    console.log(data);
  };
  var setData = function(val) {
    data = val;
  };
  return {
    getData: getData,
    setData: setData
  };
})();

For example, you can call myAcessors.getData() and it will return "data".

By using an anonymous function your enclosing all code inside the brackets. Notice that myAcessors.data will not return anything. This is because variable data lives inside of the anonymous function and cannot escape unless you provide a way to: i.e. a get method. In your case, you do have a get method: getData that will return variable from within the closure.

You could say your properties are private, because they cannot be accessed without a get method.

A more common way of declaring an object in JavaScript is with:

myAcessors = {
  data: "data",
  getData: function() {
    console.log(this.data)
  },
  setData: function(data) {
    this.data = data
  }
}

But here myAcessor.data would indeed return the property. Unlike the other object this time you can access all of myAcessor's properties outside the object.

Ivan
  • 34,531
  • 8
  • 55
  • 100
  • I have never seen this syntax before, is there any place I get more information on this? – akotch May 27 '18 at 21:29
  • This is an anonymous function definition, you can read more [here](https://en.wikibooks.org/wiki/JavaScript/Anonymous_functions) – Ivan May 27 '18 at 21:34
  • I have updated my answer to clarify how this differs from a normal object. – Ivan May 27 '18 at 21:46
  • In the closure syntax you you can't access data by `myAcessors.data` but in your example you're exposing `myAcessors.data` to the end user. They are not the same at all. Please remove that part from your answer as it is technically not correct. – Amin Jafari May 27 '18 at 21:49
  • @AminJafari I have explained both ways and clearly showed one allowed to enclose code the other did not. What's the problem? – Ivan May 27 '18 at 21:52
  • The problem is the line "Alternatively you could have declared myAcessors with:". All I'm saying is that the code you provided as an alternative is not an alternative to the provided code sample at all. They are two different subjects for different use cases. And also the other part of your answer which you removed which was saying "I prefer the second syntax". – Amin Jafari May 27 '18 at 21:58
  • Indeed, I have edited this last part before I saw your comment. I will remove 'alternatively' – Ivan May 27 '18 at 22:17
1

Actually this technique is called closure, which is basically a self initialising function that (in this case) returns an object and encapsulates the methods context.

The function/variable definitions inside myAcessors such as data are to emulate private methods or private variables. Think of them as statics that are inaccessible from outside the closure function.

To further explain, if you take a look at ECMAScript 2015 class syntax, myAcessors would look like this:

class myAcessors {
  static data = 'data';

  getData = () => {
    console.log(this.data);
  };

  setData = val => {
    this.data = val;
  };
}
Amin Jafari
  • 7,157
  • 2
  • 18
  • 43