3

What's the difference between these?

var person = {
    age: 25,
    name: "David"
};

var person = (function() {
    var name = "David", age = 25;
}());

My question really is, what does (function(){}()) do?

user1508212
  • 45
  • 3
gotta have my pops
  • 878
  • 4
  • 11
  • 22
  • To me this is a very interesting topic. I found this website that gives some light on your question. http://www.phpied.com/3-ways-to-define-a-javascript-class/ – themhz Aug 13 '12 at 03:12
  • And you are missing a quote from "David" I think – themhz Aug 13 '12 at 03:14
  • 4
    Both statements do totally different things, it does not make sense to compare them. The first one creates an object, the second one executes a function assignes the return value (`undefined`) to `person`. – Felix Kling Aug 13 '12 at 03:16
  • @FelixKling: this should be the accepted answer. I wish I've seen your comment (or better read the question) before submitting [a wrong one](http://stackoverflow.com/a/11927787/1081234) – Oleg Aug 13 '12 at 03:57

3 Answers3

7

What does (function(){}()) do?

This essentially creates an anonymous function and then executes it. One common use for this is limiting global variables.

For example, the following would have three global variables (var1, var2, and var3):

var var1 = "a", var2 = "b", var3 = "c";

If you wrapped these declarations in the anonymous function, they're still accessible as local variables within the anonymous function, yet do not cloud up the global namespace. For example:

(function() {
    var var1 = "a", var2 = "b", var3 = "c";
    console.log(var1); // interact with local variables
})(); // execute function.

What's the difference between these?

var person = {
    age: 25,
    name: "David"
};

If this code is contained in a function, it creates a local variable named person. Otherwise, it creates a global variable named person.

var person = (function() {
    var name = "David", age = 25;
}());

This code creates and executes an anonymous function, then assigns the return code of that anonymous function to the variable person. Since the anonymous function has no return value, the variable person has a value of undefined. This statement, as it currently stands, is functionally equivalent to var person;, because the anonymous function has no side-effects and doesn't have a return value.

jeff
  • 8,300
  • 2
  • 31
  • 43
  • say there were methods in both the object literal and the anonymous function, i.e. getName(). I can still access person.getName() from either declaration.. so do both code ultimately achieve the same thing? – gotta have my pops Aug 13 '12 at 08:00
  • very thorough and concise, thank you! – Oleg Aug 13 '12 at 23:28
  • @anonymous - Unless an object was somehow returned in the anonymous function, you couldn't use `person.getName()`, so they're not really the same. If you want to use `person.getName()` from the anonymous function version, you could use this: `var person = (function() { this.getName = function() { return "Bob" }; return this; })();` – jeff Aug 13 '12 at 23:57
4
var person = (function() {
    var name = "David", age = 25;
}());

person will be undefined, because the function doesn't have a return statement.

It is just a self executing anonymous function, you could image that as below.

function foo() {
  var name = "David", age = 25;
}
var person = foo();
xdazz
  • 158,678
  • 38
  • 247
  • 274
  • +1 for mentioning the `undefined` value of the variable when the `new` keyword is not used with the constructor – Oleg Aug 13 '12 at 03:21
2

It executes the anonymous function you just created.

This technique is useful because it allows you to scope member in your class.

If you're looking for a good way to do classes and inheritance, take a look at http://ejohn.org/blog/simple-javascript-inheritance/

I'd also recommend defining your classes as AMD modules.

Esteban Araya
  • 29,284
  • 24
  • 107
  • 141
  • What does an immediate executed function have to do with "classes"? I agree, it is useful for scoping, but I don't see why you bring in classes. – Felix Kling Aug 13 '12 at 03:19
  • @Felix Kling Just going by the title of the question. He's trying to define objects... Might as well talk about classes. – Esteban Araya Aug 13 '12 at 03:21
  • I don't see how it can be used with constructor functions and which benefit it brings. Care to elaborate? – Felix Kling Aug 13 '12 at 03:22
  • @Felix Kling Admittedly I know little about JS. But a constructor function feels a lot like a class definition to me. At least in the Java sense of class. Excpet for the "type" part of it of course. Thoughts? – Esteban Araya Aug 13 '12 at 03:30
  • Yes, constructor functions create objects, but this has nothing to do with immediately executed functions, i.e. the construct `(function() {...}())`, and that's what the question is actually about (as far as I can tell at least). – Felix Kling Aug 13 '12 at 03:33
  • 1
    The OP's example isn't a constructor unless the code is changed to use `new` when calling the function - in which case it still wouldn't do the same thing as the object literal because creating variables with `var` inside the function does not add them as properties to the returned object. – nnnnnn Aug 13 '12 at 03:46