CODEWITHSUNDEEP
javascript
Aks
Aks

Reputation: 5236

what is the difference between these two

I'm very new to js so I'd appreciate some help. I have two blocks of code that I think should work identically but don't. Can someone explain how they're different? It looks like in the first piece of code, the parser enters the function directly.

function embedGameSwfAfterReg() {
    embedGameSwf("{$swfLocation}", "100%", "100%", {$flashVars});
}
API.registerOnload(embedGameSwfAfterReg())

and

API.registerOnload(function() {
    embedGameSwfAfterReg("{$swfLocation}", "100%", "100%", {$flashVars});
});

Upvotes: -1

Views: 113

Answers (6)

user2487119
user2487119

Reputation:

Short answer: First piece of code do nothing, because embedGameSwfAfterReg doesn't have a return statement. Probably it could even end up with an error if API.registerOnload doesn't accurately check its arguments before execution.

Second piece of code creates an anonymous-function that is passed as an argument to API.registerOnload method which (as far as I can see from method name) runs functions during an Onload event.

Long answer: In the first piece of code you declare a new function named embedGameSwfAfterReg which resists in global-scope of your code:

function embedGameSwfAfterReg() {
  // calls embedGameSwf function
}

after, you execute defined function and pass the result to registerOnload method of an object named API:

API.registerOnload(embedGameSwfAfterReg());

As you probably mentioned, declared function embedGameSwfAfterReg has no return statement, so the result of its execution will be undefined. In other words 

API.registerOnload(embedGameSwfAfterReg());

is doing the same as 

embedGameSwfAfterReg();
API.registerOnload();

so eventually it calls API.registerOnload() WITHOUT any arguments passed!

Second piece of code creates an anonymous function (functions are specific objects in JS, which can be passed to other functions/methods, have its own methods and executed). Then it passes created function (or better say a reference to the function) to registerOnload - method of an object called "API".

You should read topics about Objects, Function-type, scopes, anonymous functions and closures in JS. I would advise Mozilla JavaScript guide

Also feels free to play with a simplified example at jsfiddle which gives some practical hint on anonymous functions in JS.

Upvotes: 0

user142162
user142162

Reputation:

In the first code block, you're registering the result of the embedGameSwfAfterReg function (undefined) as the onload function (() means you're evaluating the function). Remove the parentheses to have the embedGameSwfAfterReg function itself registered:

API.registerOnload(embedGameSwfAfterReg)

Upvotes: 2

Pascal Bayer
Pascal Bayer

Reputation: 2613

API.registerOnload() takes a callback function as parameter, therefore you only have to pass in the function name as reference, otherwise the function is directly getting called when the code runs.

// Correct form is:
API.registerOnload(embedGameSWFAfterReg)

Your second sample already is an anonymous function that is handled like an function callback and therefore evaluated when API.registerOnload(callback) is calling the reference with callback() somewhere inside it's code.

Upvotes: 0

Andrew Eisenberg
Andrew Eisenberg

Reputation: 28737

I'm asssuming that the second example should be

API.registerOnload(function() {
    embedGameSwf("{$swfLocation}", "100%", "100%", {$flashVars});
});

If so, then the difference is quite big. In the first case, the embedGameSwfAfterReg function is invoked and the embedGameSwf is called when you register. This is probably not what you want since the the return value of the function is undefined.

In the second case, the anonymous function is not invoked until later when the registerOnLoad event is raised. This is probably what you want.

Upvotes: 0

harsh
harsh

Reputation: 1551

function embedGameSwfAfterReg() {
    embedGameSwf("{$swfLocation}", "100%", "100%", {$flashVars});
}
API.registerOnload(embedGameSwfAfterReg)

and

API.registerOnload(function() {
    embedGameSwfAfterReg("{$swfLocation}", "100%", "100%", {$flashVars});
});

would work the same way. The difference is () which you have put with embedGameSwfAfterReg function in the first case It actually calls the function there only but its different in the 2nd case.

Upvotes: 0

Ben McCormick
Ben McCormick

Reputation: 25718

This

API.registerOnload(embedGameSwfAfterReg())

runs embedGameSwfAfterReg, and then passes the return value (undefined since it doesn't return a value), to registerOnLoad

you want

API.registerOnload(embedGameSwfAfterReg)

which passes the function itself to registerOnload

Functions are objects in Javascript and can be passed directly by their names. When you add the parens, it instead runs the function and passes the result.

Upvotes: 0

Related Questions