CODEWITHSUNDEEP
javascriptclosures
BegaluruBoy
BegaluruBoy

Reputation: 95

Parameter variable in anonymous function in JavaScripts

I came across this on Mozilla's tutorials on JavaScripts and I cant seem to understand it. I read a lot of stackoverflow questions but I could not find an answer to my question. Given below is a code snippet.

var createPet = function(name) {
  var sex;

  return {
    setName: function(newName) {
      name = newName;
    },

    getName: function() {
      return name;
    },

    getSex: function() {
      return sex;
    },

    setSex: function(newSex) {
      if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
        sex = newSex;
      }
    }
  }
}

var pet = createPet("Vivie");
var pet2 = createPet("Sam");
pet.getName();                  // Vivie
pet2.getName();                 // Sam

createPet only seems to return a map of function objects but there is no mention of variable name anywhere but somehow, pet and pet2 behave like objects of a class with a member variable named name and a bunch of member functions like getName(), setName() etc. How does this work?

Upvotes: 0

Views: 100

Answers (2)

Esailija
Esailija

Reputation: 140230

The name is defined as a formal parameter like function( name /*<-- there it is */).

So think of:

= function( name ) {
    var sex;
};

As:

= function() {
    var name = arguments[0];
    var sex;
}

They are indeed exactly, or at least effectively, the same.

And yes, createPet returns a dumb map of promiscuous closures. In fact, you could do this and see it still work:

var a = createPet("Vivie");

var asd = a.setName;

asd("asd");

a.getName() //"asd"

This is because the object is pretty much irrelevant, it's the functions that carry the data not the object. The object is just a dumb map of functions (closures).

You will also not deal with object properties but variables. And you cannot pretend variables are object properties unless it's a global variable which is not a variable actually, but a property of the global object:

  • Properties can be enumerated, dynamically accessed, deleted and made constant
  • Properties can be accessed anywhere, as long as you have a reference to the object

On top of this, the whole model is backwards. You have behavior that carries data instead of data that carries behavior.

You don't have to do this at all of course, see https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model.

Upvotes: 0

jfriend00
jfriend00

Reputation: 707406

name is the argument to the createPet() function. It works identically to the local variable sex and behaves as a private member variable that is only accessible to the functions declared inside of createPet(). name is passed into createPet(), but it can also be set from within createPet() and it survives the execution of createPet() because of the closure created by the functions in the returned object which all have a reference to the name argument.

Upvotes: 3

Related Questions