Difference between function expression in global scope and function declaration

Question

I'm puzzled by something in my js. Normally I define functions like this:

function f(){
    // do stuff
}

but I can also define functions like this:

f = function(){
    // do stuff
}

I always thought there is no difference between them, but I now found that this is working:

f = function(){
    alert('IT WORKS!!');
}

function createCallback(request){
    request.done(function(data){
        var html = '';
        data['result'].forEach(function(bill){
            html += "<tr onclick=\"f();\"><td>" + bill.title + "</td></tr>";
        });
        $("#someId").html(html);
    });
}

but when I define f as follows:

function f(){
    alert('IT WORKS!!');
}

and I click on the row, it gives a ReferenceError: f is not defined.

So I wonder: what is actually the difference between function f(){} and f = function(){}?

I suggest to read stackoverflow.com/questions/336859/…

Nehal
– Nehal

2015-01-24 11:59:02 +00:00
Commented Jan 24, 2015 at 11:59 — Nehal
– Nehal, Commented Jan 24, 2015 at 11:59

Community · Accepted Answer · 2020-06-20 09:12:55Z

When you define a function without using var statement, by default the function will be defined as a property in the global scope.

Quoting MDN documentation on var,

Assigning a value to an undeclared variable implicitly creates it as a global variable (it becomes a property of the global object) when the assignment is executed. The differences between declared and undeclared variables are:

Declared variables are constrained in the execution context in which they are declared. Undeclared variables are always global.

Declared variables are created before any code is executed. Undeclared variables do not exist until the code assigning to them is executed.

Declared variables are a non-configurable property of their execution context (function or global). Undeclared variables are configurable (e.g. can be deleted).

Because of these three differences, failure to declare variables will very likely lead to unexpected results. Thus it is recommended to always declare variables, regardless of whether they are in a function or global scope. And in ECMAScript 5 strict mode, assigning to an undeclared variable throws an error.

So, when you define with function function_name(...){...} syntax, it will be in the current scope.

Since the second function definition is in the global scope tr's onclick can find f. Try using var statement like this

var f = function(){
    alert('IT WORKS!!');
}

you will get the same ReferenceError: f is not defined.

Community · Accepted Answer · 2017-05-23 11:43:30Z

2

You forgot the var statement. The function is defined globally when using f = function(){ }. This is why it’s accessible from the onclick handler and the other is not.

Please also read var functionName = function() {} vs function functionName() {} as suggested by @Nehal.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Jan 24, 2015 at 12:04

aaronk6

2,8412 gold badges22 silver badges28 bronze badges

1 Comment

Ben Voigt Over a year ago

I don't see how "forgot" is a valid way to describe "chose not to use".

Collectives™ on Stack Overflow

Difference between function expression in global scope and function declaration

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related