Ambiguous function declaration in Javascript

Question

I am new to Javascript and got confused by how the function declaration works. I made some test on that and got some interesting results:

say();

function say()
{
    alert("say");
}

The forward-declaration worked and popup "say"

On the opposite

say();

say = function()
{
    alert("say");
}

did not work, although it also declared a function object

If we declare the function and redeclare that afterwards:

function say()
{
    alert("speak");
}

say();

function say()
{
    alert("say");
}

I got "say" instead of "speak". That's surprise!

OK. It seems that only the latest function declaration works. Then lets declare function object first and then a "regular" function:

say = function()
{
    alert("speak");
}

say();

function say()
{
    alert("say");
}

say();

Another surprise, it was "speak" followed by "speak". The "regular" function declaration did not work at all!

Is there an explanation of all of them? And, if the "regular" function declaration is really that "fragile" and can be easily override by the function object with same name, should I stay away from that?

Another question is: with only the function object format, does that forward-declaration become impossible? Is there any way to "simulate" that in Javascript?

Answer 1

You can expect your function definitions to be applied in order. Then all of your non-method lines of code will be executed in order, including the assignment of function objects. This explains each of your examples. It is an interesting issue though. You really can't assign a function object after attempting to call it, and expect it to work. However, a function definition that follows executable code will actually be applied first.

Answer 2

say();

function say()
{
    alert("say");
}

Here the interpreter fetches the definition of say() when it is called, and executes it.

say();

say = function()
{
    alert("say");
}

Here there is no definition of say() to fetch - instead you are assigning an anonymous function to a variable. The interpreter can't "find" this like it can find forward declarations.

function say()
{
    alert("speak");
}

say();

function say()
{
    alert("say");
}

Here say is defined and then redefined - the last definition wins out.

say = function()
{
    alert("speak");
}

say();

function say()
{
    alert("say");
}

say();

Here say is a variable pointing to an anonymous function (after the first statement is interpreted). This takes precedence over any function definition, the same as if you had placed the function definition before the assignment.

But if you had

say();

say = function()
{
    alert("speak");
}

say();

function say()
{
    alert("say");
}

Then you would get "say" followed by "speak".

Answer 3

Its always good idea calling the function later, even though javascript works like that.

Most of the languages won't work that way, instead do this.

function say(){
    alert("say");
}

say();

or

say = function(){
    alert("say");
}

say();

or

(function(){
    alert("say");
})();

Answer 4

The following excellent article by kangax answers all your questions and more: http://yura.thinkweb2.com/named-function-expressions/