What is the difference between function hoge() and hoge=function()?

I think the essential difference between the two is the expression (Expression) or statement (Statement).

The way pattern 2 is written is called the function definition expression.

var hoge=function(a,b){
    ...
}

JavaScript has a unique winding specification, and the above description is actually broken down as follows:

//var declaration is made at the beginning of a line of a script or function (winding up)
varhoge;
// Accessing hoge at this point undefined
hoge=function(a,b){
    ...
}

Also, the action being taken here is to substitute the anonymous function to the variable hoge, which can be done with hoge(), but does not itself have the name hoge.

To have a name, you must declare:

var hoge=function fuga(a,b){
    // Among them, recursive processing can be written with fuga().
    ...
}
// On the outside, hoge has the name fuga, but uses hoge() when calling.
hoge.name//=>"fuga"

In contrast, the way pattern 1 is written is called the function declaration statement.

 function hoge(a,b){
    ...
}

Winding up a statement is characterized by the that occurs in the function definition itself, and as a result, it can be invoked from anywhere within the scope.

Also, functions defined in the function declaration statement are characterized by always having a name.

Mozilla explained the timing differences defined.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function

This will be done though :

 hoisted(); // logs "foo"

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

This will not be done:

notHoisted();// TypeError: notHoisted is not a function

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

Also, if you want to recurs, you might name it even if it's pattern 2:

 varmath={
  'factor': function factor(n){
    if(n<=1)
      return1;
    return n*factorial(n-1);
  }
};

The difference is when it is defined.In the following example, functionOne is defined at runtime, while functionTwo is defined at parsing.

<script>
  // Error
  functionOne();

  var functionOne=function(){
  };
</script>

<script>
  // No error
  functionTwo();

  functionTwo(){
  }
</script>

Also, the definition of functionTwo is that it cannot be used with a conditional clause in strict mode.

<script>
  "use strict";
  if(test){
     // Error
     functionfunctionThree() {doSomething();}
  }
</script>

If there is no "use strict" in this example, it will not be an error, and the functionThree will be defined regardless of the test value.

This answer is a simple translation of @Greg's correct answers to similar questions in English.

javascript-var functionName=function(){}vs function functionName(){}-Stack Overflow

Pattern 2 is primarily used for callback.
Functions can be substituted for variables as well as numbers and strings, which means functions can be passed as arguments.
If you want to do something like asynchronous processing and let me know when you're done, you can call back as follows:

var hoge=function(a,b){
   alert("Completed.");
};

call(hoge);

function call(callback){
    // There's a lot of things like asynchronous...
    callback(100,200); // Callback
}

Hoge() is acceptable when running.Both can be treated as the same function.

The difference is そのFunction is defined when running that line ファイル or ですFunction is defined when reading a file (perth).

 function hoge(a,b){
    // This function is defined when Javascript is read
}

var hoge=function(a,b){
    // This function is defined only when the statement of the variable hoge is executed.
}

The javascript writing method recommends that in this question "don't define a function in a loop".
This is one of the reasons.In the loop,

for(i=0;i<100;i++){
    var hoge=function(a,b){
        ...
    }
}

When defined as , the function is defined 100 times for the first time at runtime, so it tends to be more loaded than pattern 1.

Note: var functionName=function(){}vs functionName(){}

If you add 3100 from another answer in the same English version, pattern 1 declares a function named hoge, but pattern 2 declares an unknown function and puts it in the variable hoge.The difference that can be made in practical use is

var hoge=function(){};

The scope is local, but

hoge=function(){};

can be defined globally.
By using variables, you can clearly see where the scope is even if you use it in eval(), so debugging is easy and compatible between browsers (it seems that function declarations within eval have different locations for each browser…).

Also, since pattern 2 is an unknown function, Function.name (nonstandard, IE not supported) is empty as follows:

function hoge1(){};
varhoge2 = function(){};
console.log (hoge1.name); // "hoge1"
console.log(hoge2.name);//"

Although the behavior is small and substantially interchangeable, there is a difference in meaning.
For example, if you put various things in an object and return them, that is, if you want to generate a function as a value, it will be written in pattern 2.
On the other hand, if you want to use the function within the function, that is, if you want to install the function as a function, it will be written in pattern 1.
Well, there's not much difference in behavior, so there may be many people who change their moods or try to unify themselves as much as possible.

By the way, in addition to winding up, the behavior difference is that pattern 1 is a block scope.

(function(){
  "use strict"
  varfn = function() {return1}
  {
    function fn() {return2}
    console.log(fn()//2
  }
  console.log(fn()//1
})()