Why does calling my JavaScript function throw an error when I call it like this

wysiwyg2();

var wysiwyg2 = function()
{
    alert(1);
}

but work when I do this?

wysiwyg2();

function wysiwyg2 ()
{
    alert(1);
}

Why does calling my JavaScript function throw an error when I call it like this

wysiwyg2();

var wysiwyg2 = function()
{
    alert(1);
}

but work when I do this?

wysiwyg2();

function wysiwyg2 ()
{
    alert(1);
}

• javascript

• 3 This question needs a better title. – cletus Commented Dec 11, 2009 at 3:32

5 Answers 5

You need to define your function variable first, i.e.

var wysiwyg2 = function()
{
    alert(1);
}

wysiwyg2();

For a good explanation of the difference, see Why can I use a function before it’s defined in Javascript?

In the first snippet, you're trying to invoke a variable before the variable is defined.

You'd get the same problem from the following code:

test.toString();
var test = new Date;

In the second snippet, you're declaring the function without assigning it to a variable, and this results in a global declaration that is usable in earlier code.

You can think of your javascript as though it's evaluated in two passes. The first pass builds all the objects and names (and remember: functions are objects), and places them "in scope", so to speak. It's kind of like a pilation step. Then the second pass executes the code.

So your second sample works because the first pass built and "scoped" the function before execution. The first sample does not work because the function object is created as part of a variable assignment, and so it's not in scope yet when you try to call it.

You mention another situation in the ments, where the function call and definition are separated into two script blocks. That doesn't work because the engine pletes both steps of one block before moving on to the next, and you tried to call the function in a block that is executed before the block where it's defined. You can call function across script blocks, but not until they are defined.

In the first one, you're declaring a function and assigning it to a variable. Thus you won't be able to call it through that variable until it's actually assigned to it.

In the second, you're declaring a named function. And can call that function from wherever (as long as it's in scope).

When entering a new execution context (which is either a function call or global code), JavaScript first goes through a variable instantiation phase during which all variable declarations and function declarations within the global code or function body are examined and create as properties of the current variable object, which is effectively a collection of all the objects that are in the current scope. In particular, any function declaration such as

function wysiwyg2 ()
{
    alert(1);
}

... is fully created during this phase, while any variable declaration such as

var a = 2;

... only leads to the creation of a variable called a with a value of undefined during this phase. This is also true of a variable declaration with an assignment to a function expression, such as

var wysiwyg2 = function()
{
    alert(1);
}

Only the variable instantiation takes place at this point. Once this phase is plete the rest of the code (including variable assignment) is executed sequentially.