Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money.

preface

This afternoon, in our wechat group, students suddenly sent out a picture like this:

So let’s see, this is a function declaration and a function expression. I read about it a while ago.

After a few glances, I said: The first output should be the last function declaration

And then what? No and then, really, hesitation means I can’t at this time.

Looks like it’s not enough!

Post the answer first, and if you’re as indecisive as I am, study it again with me.

Start reviewing

First, identify the problem: the difference between a function expression and a function declaration, and the priority issues that have plagued us

The difference between function declarations and function expressions

Function declaration

The first thing to remember is that when a function declaration conflicts with a variable name, the function declaration takes precedence

fn();
function fn () {
    console.log (" fn "); }var fn = 2;
Copy the code

For example, fn will be printed without an error.

If you don’t know why a function can be called before a function declaration, see here

Because javascript code is preloaded segment by segment, function declarations are executed in front of the segment after it is preloaded so that it can be called anywhere in the segment, so the previous code is faultless

What about multiple function declarations with the same name? So let’s see

fn();
function fn () {
    console.log ('1'); }function fn () {
    console.log ('2'); }Copy the code

The output is 2. This is because when there are multiple function declarations, the last one replaces the previous one

That’s why I read the code above and said the first output is the last function declaration!

Functional expression

fn();
var fn = function () {
    console.log('fn');
}
Copy the code

Fn is not a function. Fn is not a function. Fn is not a function.

What is the reason for this? That’s one of the differences between a function declaration and a function expression

Because function expressions are equivalent to assigning a function as a value to a variable that can’t be used if it’s not declared

The correct function expression:

var fn = function () {
    console.log('fn');
}
fn();
Copy the code

Review back, fight again!

First post the code for easy reading:

// What does the following code output
function method(foo){
	console.log(foo)
	var foo = 'A'
	var foo = function () {
		console.log('B')
	}
	foo()
	function foo() {
		console.log('C')
	}
	foo()
}
var foo = 1
method(foo)
Copy the code

After reviewing the above, we know that JavaScript will declare functions earlier, so let’s tidy up this code:

function method(foo){
	function foo() {
		console.log('C')}console.log(foo)
	var foo = 'A'
	var foo = function () {
		console.log('B')
	}
	foo()
	foo()
}
var foo = 1
method(foo)
Copy the code

Now, use what we have just learned to analyze what data is printed:

First of all, the first print is the function foo that we printed C, and the second and third calls to function foo are already declared! So function overrides, and now foo is foo that prints B.

Now let’s sort out the results:

function foo() {
    console.log('C')
}
B
B
Copy the code

Did you learn? Did not learn to look at the relevant knowledge point!

The last

But hesitation is not, can not take once learned as an excuse, the encounter of every problem you can not understand, in order to gradually make yourself stronger!