What's the difference between these two ways of declaring a function?
function someFunc() { ... } var someFunc = function() { ... }
I'm not asking in the technical sense. I'm not asking which is better for readability, or which style is preferred.
clone = function() { var newfun = new Function('return ' + this. toString())(); for (var key in this) newfun[key] = this[key]; return newfun; };
A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.
I am on different opinion with most of the people here. Technically this syntax may mean the same for declaring functions both ways (I stand incorrect on my last statement. I read up on a diff post why they are technically diff and I'll add in the end, why) ; but the way they play a role in evolving patterns is massive. I would highly recommend "Javascript: The Good Parts" by Doughlas Crockford.
But to prove my point in a subtle and a simple manner; here is a small example.
//Global function existing to serve everyone function swearOutLoud(swearWord) { alert("You "+ swearWord); } //global functions' territory ends here //here is mr. spongebob. He is very passionate about his objects; but he's a bit rude. var spongeBob = { name : "squarePants", swear : function(swearWord) { name = "spongy"; alert("You "+ swearWord); return this; } } //finally spongebob learns good manners too. EVOLUTION! spongeBob.apologize = function() { alert("Hey " + this.name + ", I'm sorry man!"); return this; } //Ask spongebob to swear and then apologize in one go (CASCADING EFFECT!!) alert(spongeBob.swear("twit").apologize());
if you look at the code above I declared a function with a name swearOutLoud. Which would take a swear word from any object or a call and will give you the output. It can do operations on any object using the "this" parameter that is passed to it and the arguments.
However second declaration is declared as an attribute of object called "spongeBob". This is important to note; as here I am moving towards an object driven behavior. While I am also maintaining "cascading effect" as I return "this" if i have nothing else to return.
Somthing similar is done in jquery; and this cascading pattern is important if you are trying to write a framework or something. You'll link it to Builder design pattern also.
But with functions declared as an attributes of an object I am able to achieve an object centric behavior which leads to a better programming paradigm. Unless designed well; individual functions declared outside with global access lead to a non-object oriented way of coding. I somehow prefer the latter.
To see cascading in effect, look at the last statement where you can ask spongebob to swear and apologize at once; even though apologize was added as an attribute later on.
I hope I make my point clear. The difference from a technical perspective may be small; but from design and code evolution perspective it's huge and makes a world of a difference.
But thats just me! Take it or leave it. :)
EDIT:
So both the calls are technically different; because a named declaration is tied to global namespace and is defined at parse time. So can be called even before the function is declared.
//success swearOutLoud("Damn"); function swearOutLoud(swearWord) { alert("You " + swearWord) }
Above code will work properly. But code below will not.
swear("Damn!"); var swear = function(swearWord) { console.log(swearWord); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With