Differences between javascript function expressions and function declarations

Differences between javascript function expressions and function declarations

There are two methods for declaring functions in javascript: function declaration and function expression.

The differences are as follows:

1). For a function defined by a function declaration method, the function name is required, and the function name of the function expression is optional.

2). A function defined by a function declaration method can be called before the function declaration, while a function of a function expression can only be called after the declaration.

3 ). functions defined using function declaration methods are not real declarations. They can only appear in the global or nested in other functions, but they cannot appear in loops, condition or try/catch/finally, while

Function expressions can be declared anywhere.

The following two methods are used to define functions:

// Function declarative function greeting () {console. log ("hello world");} // function expression var greeting = function () {console. log ("hello world ");}

The following is an interesting javascript:

Function f () {console. log ('I am outside! ');} (Function () {if (false) {// repeatedly declare the evaluate function f () {console. log (' I am inside! ') ;}} F ();}());

What will be output? The first response should be "I am outside". The result is "I am inside" in chrome, and IE11 directly reports an error. firefox outputs "I am outside" in a lower version "...

The results output by chrome clearly reflect the features of functions declared using function declarative statements-functions can be called before they are declared.

The error reported by IE indicates that the object is missing because the function declaration is in the condition and violates the function declaration principle.

Function expression scope:

If a function declared by a function expression has a function name, the function name is equivalent to a local variable of the function and can only be called within the function. For example:

var f = function fact(x) {         if (x <= 1)           return 1;        else           return x*fact(x-1);        };        alert(fact());  // Uncaught ReferenceError: fact is not defined

Fact () can be called within the function. If it is called outside the function, an error is reported: fact is not defined.
Fact

Let's take a closer look.

Function Declaration

Function declaration sample code

The Code is as follows:

Function fn () {console. log ('fn function execution... '); // code ..}

In this way, we declare a function named fn. Let's think about it. Do you think it will be executed if you call this function? Or will an error be reported?

The Code is as follows: fn (); // call the declared fn function fn () {console. log ('fn function execution .. '); // code ..}

Console output result:

Yes, the fn function can be called at this time. Here we will summarize the cause.

Summary:

1: At this time, the fn function is the result of the variable, which is stored in the Global Context variable by default (it can be verified by window. function name)

2: This method is a function declaration. They are available in the Global Context stage creation and code execution stage. Ps: javaScript initializes the Context Environment (from global to local) every time it enters the method)

3: it can affect variable objects (only the variables stored in the context are affected)

Function expression

Function expression sample code

The Code is as follows:

Var fn = function () {console. log ('fn function [expression] declares execution... ') // code ..}

In this way, we declare an anonymous function and point its reference to the variable.Fn?

The function declared in the expression is called every time in the upper and lower sides to view the output result of the console.

The Code is as follows:

// To clearly view the output of the console, we make a mark before and after each call to increase readability. Console. log ('call started before .. '); fn (); console. log ('call ended before .. '); var fn = function () {console. log ('fn function [expression] Declaration execution .. ') // code ..} console. log ('and call start .. '); fn (); console. log ('and call start .. ');

Result printed on the console:

The Code prompts fn is not a function (fn is not a method) when calling the fn () function for the first time and terminates the operation when an error occurs.

This indicates that when fn () is called for the first time, the var fn variable does not exist as an attribute of the global object, and the anonymous function context referenced by fn is not initialized, so the call failed before him.

The Code is as follows:

// Now, comment out the previous call logic and view the output in the console. // console. log ('call started before .. '); // fn (); // console. log ('call ended before .. '); var fn = function () {console. log ('fn function [expression] Declaration execution .. ') // code ..} console. log ('and call start .. '); fn (); // call the console after the expression. log ('and call start .. ');

Result printed on the console:

We can see that it is okay to call the expression function after the expression function. To sum up, why?

Summary:

1: first, the variable itself does not exist as a function, but is referenced by an anonymous function (value type does not belong to reference)

2: In the code execution phase, when initializing the global context, it does not exist as a global attribute, so it will not cause variable object pollution.

3: This type of declaration is generally common in Plug-in development. It can also be used as a callback function call in the closure.

Therefore, function fn () {} is not equal to var fn = function () {}. They are essentially different.

The above is all the content of this article. The ideas are clear and the comparison is clear. It is a very good article. You must carefully study it.

Articles you may be interested in:

• Function declaration and function expressions in Javascript)
• Differences between javascript function declaration and function expressions
• Javascript learning notes: Functions (1): function declaration and function expressions
• Difference between javascript function declaration and function expression
• Function declaration and function expression in js