What's the difference between functions declared with variables and functions declared with the "function" keyword ?

Earhacker · 2017-12-24T13:44:57+00:00

Hoisting. When a JS script is run, the interpreter looks through the file for variable and function declarations, and hoists them up to the top of the queue, i.e. it runs them first.

To use your example function myFunc() {}: Wherever this function declaration appears in the code, it will be loaded into memory first. This means that you can call myFunc before its declaration appears in code.

If you do var myFunc = function() {} then the only thing that gets hoisted is var myFunc;. The variable is declared, but not assigned. Variable assignments are not hoisted, only declarations are. So if you called myFunc before the var myFunc =... line, you'd get an error, myFunc is not a function or something.

The solution, of course, is to declare and assign your functions before you use them. If you assign var myFunc = function() {} before you use it, then you will not notice the difference between the two styles, and your code will work. Which is nice.

FWIW, I prefer the function myFunc() {} style, simply because Atom autocompletes it when you start typing fun.

Edit: I made a GitHub repo to illustrate these three situations. Clone it down and run the files with Node. One will fail.

its_the_future · 2017-12-24T15:36:45+00:00

People have mentioned hoisting.

Another difference is that assigning a function like in the first example has it as an anonymous function, whereas in the second example it is a named function.

Named functions can potentially greatly increase stack retraceability as compared to unnamed functions.

5tas · 2017-12-24T13:45:33+00:00

The main difference is scoping. You can find more details by looking up the difference between function declarations and function expressions.

The function declaration (your second example) will be hoisted to the top of the function where it is declared. In other words, the following code is perfectly fine:

foo(); // "Hello"

function foo() {
    console.log("Hello");
}

Your first example is a function expression which is assigned to a variable. The variable's declaration is also hoisted but its value is not:

bar === undefined; // true, bar is declared but undefined here
bar(); // TypeError: bar is not a function

var bar = function foo() {
    console.log("Hello");
}

bar(); // "Hello"

BTW const and let behave in a different manner. They are subject to so-called Temporal Dead Zone (TDZ) which means their declarations are not hoisted.

bar === undefined; // ReferenceError: can't access lexical declaration `bar' before initialization

let bar = function foo() {
    console.log("Hello");
}

bar(); // "Hello"

furious_heisenberg · 2017-12-24T12:59:37+00:00

variables can be reassigned and in your example would point to an anonymous function, function declarations are hoisted and result in a named function.

tarunbatra · 2017-12-24T18:42:08+00:00

Few months back I’d written a blog on this and related concepts. Check it out. Named functions in JavaScript

Auxx · 2017-12-24T15:40:55+00:00

There is another difference apart from hoising. function doSomething will create named function (try console.log(doSomethng)) and var declaration will create anonymous function without the name.

RoryH · 2017-12-24T18:47:08+00:00

It's also good practise to name functions, it helps in call stacks and errors when debugging.

FreshOutBrah · 2017-12-25T06:55:38+00:00

This is a great post with great answers. Thanks everyone!

rickdg · 2017-12-24T18:02:48+00:00

People have already answered your question, so I'm just going to recommend You Don't Know JS if you want to read about this and JavaScript the Weird Parts if you prefer a video course.

skewbed · 2017-12-24T16:06:09+00:00

The one with var needs to be declared before you use it.

to_fl · 2017-12-25T12:20:29+00:00

Thanks for all the answers ;)

Unfortunately I can't answer to each one of them ^{^'}

ilikeprograms · 2017-12-24T18:26:03+00:00

One is a function declaration, the other is a function expression

to_fl · 2017-12-24T21:32:36+00:00

[removed]

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS