An introduction to the difference between var foo = function () {} and function foo() when defining a function in JavaScript (detailed tutorial)

This article mainly introduces the difference between var foo = function () {} and function foo() when defining a function in JavaScript. Friends who need it can refer to it

One day when I was writing code, I suddenly got this Question, let’s summarize a wave of

The "hoist" behavior of JavaScript function and variable declaration

Simply put, if we use anonymous functions

var a = {}

In this way, the variable declaration a will be "advanced" after compilation, but its assignment (that is, a) will not be advanced.

That is, the anonymous function is initialized only when it is called.

If you use

function a () {};

, the function declaration and its assignment will be advanced after compilation.

That is to say, the preprocessing of the function declaration process is completed before the entire program is executed, so as long as it is in the same scope, it can be accessed, even if it is called before definition.

Look at an example

function hereOrThere() { //function statement
  return 'here';
}
console.log(hereOrThere()); // alerts 'there'
function hereOrThere() {
  return 'there';
}

We will find that alert(hereOrThere) will alert('there') when the statement is executed! The behavior here is actually very unexpected. The main reason is the "early" behavior of JavaScript function declarations. In short, JavaScript allows us to use variables and functions before they are declared, and the second definition overrides the first. definition. In other words, after the above code is compiled, it is equivalent to

function hereOrThere() { //function statement
 return 'here';
}
function hereOrThere() {//申明前置了，但因为这里的申明和赋值在一起，所以一起前置
 return 'there';
}
console.log(hereOrThere()); // alerts 'there'

The behavior we expect

var hereOrThere = function () { // function expression
  return 'here';
};
console.log(hereOrThere()); // alerts 'here'
hereOrThere = function () {
  return 'there';
};

After this program is compiled, it is equivalent to:

var hereOrThere；//申明前置了
hereOrThere = function() { // function expression
 return 'here';
};
console.log(hereOrThere()); // alerts 'here'
hereOrThere = function() {
 return 'there';
};

The above is what I compiled for everyone , I hope it will be helpful to everyone in the future.

Related articles:

vue2.0 Method to implement page navigation prompt guidance

vue2.0 Change the style according to the status value Display method

How to implement a note-taking application using Vuex

The above is the detailed content of An introduction to the difference between var foo = function () {} and function foo() when defining a function in JavaScript (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!