when should I put var in front of function in js?

Question

<script type="text/javascript"> 
var output = function() {console.log('result')}
output();
</script>  

If I changed to output = function() {console.log('result')}; it still shows the right result, so my question is:

what is the difference between them? when should I put var in front of function in js? is that the same principle as var in front of variable?

Answer 1

A function defined in a script tag is in the global scope (ie the window object in a browser context) so there is no difference in this case.

Inside a function block, however, is a different story. For example:

foo = function() {
    var foo = 1;
    console.log(foo);
}
foo();  // logs '1'
foo();  // logs '1'

But:

foo = function() {
    foo = 1;
    console.log(foo);
}
foo();  // logs '1'
foo();  // SyntaxError: Unexpected token function

Because foo wasn't defined locally, we overwrote the global object.

Answer 2

You're in the global window scope, so there's no difference.

It doesn't matter what the type of the variable is.

If this is declared in functions, then there is a difference:

function name(){
    var a=1;
}
alert(a);

Here a will be undefined, as var declares the variable in the scope of the function.

As an excercise:

var a=2;
function name(){
    var a=1;
}
name();
alert(a);

This alerts 2 instead of 1, since the middle var belongs in the scope of the function, which is separate from the global scope.

You can also modify global variables this way:

var a=2;
function name(){
    a=3;
}
name();
alert(a);

Also compare this with let, which limits it's scope to the block instead: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

Answer 3

"Is that the same principle as var in front of variable?"

Yes. output is a variable.

So I would suggest you use var in front of it when you define it. You could eventually change its value without using var. As in:

var A=1;
A=2;
A=A+1;

Consider the "script" of the funcion as the "value" of that variable.

var F=function() {console.log('one')};
// change it later
F=function() {console.log('two')};

(not suggesting you do this, but to show you it is 100% a var)

You are actually assigning to the variable named "output" a value of "function() {console.log('result')}" not as a string but as a script that gets executed. Note the semicolon at the end like in var A=3;

Now "inside" output there is the code that executes console.log('result'). (more or less, just to explain).

As you usually do not change that same function later (you can, and sometimes it is done) I really suggest you use var in front of it every time you define a function like this, even in cases when it is not strictly necessary, just to be safe you do not override an existing function.

This is a bit different from defining the function as:

function output() {console.log('result')}

Here there is no = sign, no assignment, no semicolon at the end. This is not a variable assignment but a function "definition" although results are similar, and you can call output() in both cases, there are differences. The main one I think is that function definitions are examined before executing the script line by line, while with assignment you really need to have the assignment line processed before you can use the function. So this:

output();

function output() {console.log('result')}

works. While this:

output(); // nope! output not defined yet!

var output=function() {console.log('result')}

doesn't. Variables are assigned or changed when the assignment instruction is read and interpreted.

// here A is undefined, B() prints 'ok'

var A=function() {console.log('first')};

// here A() prints 'first', B() prints 'ok' as usual

 A=function() {console.log('second')}; // change it

// here A() prints 'second', B() prints 'ok' as usual

function B() {console.log('ok')}

// same here A() prints 'second', B() prints 'ok'

Answer 4

Without var your variable will be declared as global variable which means it is available on other JS files too. In short If you declare a variable, without using var, the variable always becomes GLOBAL.

Answer 5

Generally there is no difference because you are in the global scope, but in ES5 there's a strict mode, which slightly changes the behavior of undeclared variables. In strict mode, assignment to an undeclared identifier (not putting var in front) is a ReferenceError.

For example:

"use strict";
myVariable = "foo"; // throws a ReferenceError

Answer 6

Function or not function, here's what MDN has to say about var:

The scope of a variable declared with var is the enclosing function or, for variables declared outside a function, the global scope (which is bound to the global object).

Using var outside a function is optional; assigning a value to an undeclared variable implicitly declares it as a global variable (it is now a property of the global object). The difference is that a declared variable is a non-configurable property of the global object while an undeclared is configurable.

And you could also read about the function statement here and the function operator here.

Cheers!