Multiple var and functions with appended ||?

Question

I was looking at this code here and encountered a style I don't quite understand. I'm fairly new to Javascript, but this style of declaration strikes me as very different from how it's done in the various tutorials I've read.

Basically what I'd like to know is what is being accomplished by doing it like this?

var Spriter;
(function (Spriter) {
    . . .
})(Spriter || (Spriter = {}));
var Spriter;
(function (Spriter) {
    . . .
})(Spriter || (Spriter = {}));
.
.
.

Why is function stuck between parenthesis? Whats the (Spriter || (Spriter={})) appended to the (function(Spriter){ } doing? And why is 'var Spriter;' written multiple times? I would think multiple 'var Spriter' would be redundant.

As far as WHAT this is for, it allows you to use animations created in Spriter (an animator suite notable for using bones in 2d animation), in Phaser (a game engine).

It's passing either `Spriter`, it it's defined, or a new object, assigned to `Spriter` if not (it creates the object). — Andrew Li, Oct 10 '16 at 21:33
"*Why is function stuck between parenthesis?*" - see https://stackoverflow.com/questions/1634268/explain-javascripts-encapsulated-anonymous-function-syntax — Bergi, Oct 10 '16 at 21:34
"*And why is 'var Spriter;' written multiple times?*" - Because the file you see is generated from (string-)concatenating multiple modules. *"I would think multiple 'var Spriter' would be redundant.*" - they are. — Bergi, Oct 10 '16 at 21:35

score 5 · Accepted Answer · answered Oct 10 '16 at 21:36

var Spriter; (function (Spriter) { . . . })(Spriter || (Spriter = {}));

This code is doing the following

It is first checking if the Spriter variable is defined or not
If Spriter has some value defined, then it takes that value.
If there is no value, it would intialise Spriter as an empty object

you can have clear understanding with the following code snipetts

var Spriter;
(function (Spriter) {
   alert(Spriter.name);
})(Spriter || (Spriter = {"name":"xyz"}));

var Spriter={"age":10};
(function (Spriter) {
   alert(Spriter.name);
})(Spriter || (Spriter = {"name":"xyz"}));

Here as the Spriter is not empty, it takes the value of Spriter and does not display the value name as there is no property as name defined in the Spriter object

Hope this helps

score 2 · Answer 2 · answered Oct 10 '16 at 21:38

when you see something like this

(function(arg1, arg2 /*, and so on*/) {
    // function body
})(param1, param2 /*, and so on*/)

it is, in Javascript term, Immediately Invoked Functions. What it means is that you are defining the function and invoke it right away. Normally, you have to declare the function, and you have to call it explicitly. For example,

function test(arg1, arg2) {
    console.log(arg1, " ", arg2);
}

to invoke this function, you do this test("hello", "world");

but with Immediately Invoked Functions syntax, you can do

(function(arg1, arg2) {
    console.log(arg1, " ", arg2);
})("hello", "world");

will have a similar effect

In you example, the parameter being passed in the function is Spriter || (Spriter = {}), meaning if Sprinter is not null, pass in Sprinter as is, or if it is null, assign it an empty object {}, and pass it in.

Multiple var and functions with appended ||?

2 Answers2