Since what you are really talking about here is a stylistic/readability issue (at least, that's the way I read it), you might be a little out of luck, because all the all alteratives I can think of aren't great.
Really you have two options, write multiple distinct functions like you have done above, or use closures to bring it all "inline" (as it were), where you will quickly run into issues with keeping the horizontal whitespace sane.
That being said, if you really do want to keep it all in a single block that looks like one procedure, I would probably go with the closure option:
function(){
command1;
var x1 = something;
async_function(x1, function (data){
var x2 = command2(data);
async_function2(x2, function (data1){
command3(data1);
});
});
}
Which could of course be spaced out like this, quite close to your desired example:
function(){
command1;
var x1 = something;
async_function(x1, function (data){
var x2 = command2(data);
async_function2(x2, function (data1){
command3(data1);
});});
}
...but personally I would probably try and stick to the first version.
In general though I wouldn't do either. I would keep it broken down into small and obviously named routines, I find it makes for much more readable code in the long run and any sane IDE will allow you to jump from function call to function definition and vice versa, so navigation shouldn't be too much of an issue.
See the proposal to add arrow functions: http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax1
What it says is:
However, we don’t want CoffeeScript’s ->, it’s confusing to have two
arrows and dynamic this binding is an oft-fired footgun.
You can also see some discussion of a previous version of the proposal which did have the -> syntax as well: https://esdiscuss.org/topic/arrow-function-syntax-simplified
It appears to come down to the following:
- Having two arrow syntaxes with subtly different semantics would increase complication and confusion.
- The dynamic this binding of function() and
->
was deemed rarely useful, and a foot-gun.
- If you really need dynamic this binding, you can still use function(), having a shortcut syntax wasn't very helpful.
Best Answer
Method 1
For Method 1, the function and its symbol is processed by the parser before any code in this file is run. Thus the definition is "hoisted" to the top of whatever scope it is in and the symbol can be used anywhere in the scope it is defined in. Order of declaration within a scope does not matter.
So, with the first method, you can do this:
because the first pass over the code to parse it will define the symbol hello to be your function. Therefore, in the second pass when the code is actually executed, the symbol
hello
already exists so it can be called at any time.Method 2
For Method 2, the function is processed by the parser, but the symbol that contains the function is not assigned a value until the assignment statement is executed at run-time. Code in this scope before this line cannot use the symbol (because it doesn't yet have a value). Order of assignment within a scope does matter and does have to be paid attention to.
Using, your second method, the same ordering as in the example above will not work:
because the symbol
hello
is not yet defined when you try to use it. Instead, you would have to do this:Summary
People seem to have a preference for one style vs. the other. Personally, I like the first style as it just seems simpler to let the parser define all your function symbols and not have to worry about declaration order. The one exception I make is if I'm actually assigning different functions to a given variable depending upon some condition. Then, I may use the second style.