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?

Aaroninus · Accepted Answer · 2017-01-24 17:32:18Z

3

Javascript works like this:

The document is parsed, and the function declarations are all taken taken into account immediately, before the execution of the actual statements occur. This explains your first example.

If you assign a function to a local variable, that is done during the execution, so you can't use the method in your second example.

What you experience is that if you declare a function twice, the last one will be used by the entire application. That's your third example.

These functions are made members of the window object, they are in effect declared globally. If you assign a local variable to a value of a function, then that local variable takes precedence over members in the window object. If javascript can't find a local variable, it searches up in scope to find it, the window object being the last resort. That's what happened in your last example, it has a variable say that is in a more specific scope than the global function say.

If you would redeclare say at runtime, i.e. swap the order of declarations in your last example, then you would see the two different alerts you'd expect:

say(); //speak, the global function

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

var say = function() {
  alert('say');
}

say(); //say, the declared local variable

edited Jan 24, 2017 at 17:32

Aaroninus

1,1622 gold badges18 silver badges37 bronze badges

answered Jan 15, 2010 at 15:38

Kamiel Wanrooij

12.4k6 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Wei Xiang Over a year ago

I see your points. But what's the scope if I define local function objects? I tried to call window.say() and the result is still not what I expected: <code> function say() { alert("say"); } window.say(); </code> will popup "say" and <code> var say = function() { alert("speak"); } window.say(); function say() { alert("say"); } window.say(); </code> will popup "speak" twice. Does that mean both the "global" function and the "local" object are members of the window object?

Tim Down Over a year ago

@Xiang: The reason why you get "speak" twice is that the JavaScript interpreter does two passes: in the first, it creates properties of the Variable object (which is used to look up variables in the current scope and is the global object in global code) for var statements and function declarations, and in the second pass it executes the statements in order. The crucial thing is that var statements are effectively split into two: in the first pass, a property with value undefined is added to the Variable object if it doesn't already contain a property with that name (continued...)

Tim Down Over a year ago

(continued) ... and if there is a initial value for the variable specified in the variable declaration, it isn't assigned to the Variable object until the second pass. Any function declaration, however, creates a property of the Variable object in the first pass with that function as the value. So in your example, the order of events is: 1) var say = function() { alert("speak"); } creates a property say of the Variable object with value undefined; 2) function say() { alert("say"); } overwrites the say property of the Variable object with that function; (continued...)

Tim Down Over a year ago

I really recommend reading the ECMAScript specification on this subject to get a full idea of what's going on.

Tim Down Over a year ago

One final thing: this answer isn't entirely correct. The behaviour has nothing to do with either declaration being in a "more specific scope": the scope is the same for all the declarations.

|

danben · Accepted Answer · 2010-01-15 15:39:01Z

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".

Eric Mickelsen · Accepted Answer · 2010-01-15 15:38:02Z

0

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.

answered Jan 15, 2010 at 15:38

Eric Mickelsen

10.4k2 gold badges33 silver badges41 bronze badges

Comments

YOU · Accepted Answer · 2010-01-15 15:46:52Z

0

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");
})();

answered Jan 15, 2010 at 15:46

YOU

124k34 gold badges191 silver badges222 bronze badges

Collectives™ on Stack Overflow

Ambiguous function declaration in Javascript

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related