Chapter 7 of Advanced programming, the difference between function declarations and function expressions

in Chapter 7 of advanced programming, it is mentioned that there are examples of the difference between function declarations and function expressions.
Why does the following code belong to invalid code? Will js try to correct the error?
most browsers will return the second declaration, ignoring condition;Firefox will return the first declaration when condition is true?
I tried under chrome and didn"t ignore it. What does that mean?

  if(conditon){
    function sayHi(){        
        alert("hi");
    }
  } 
  else{
    function sayHi(){        
            alert("yo");
        }
   }
Mar.07,2021

now mainstream browsers will correct your mistakes and put the first one back, just like the function expression, the second one will be put back under ie8.

var conditon = true;
     if(conditon){
    function sayHi(){        
        alert('hi');
    }
  } 
  else{
    function sayHi(){        
            alert('yo');
        }
   }
    sayHi();
var conditon = true;
    sayHi();
      if(conditon){
    function sayHi(){        
        alert('hi');
    }
  } 
  else{
    function sayHi(){        
            alert('yo');
        }
   }

ie8 below is the prompt that 'yo', calls sayhi (), he will first look for the declaration of sayhi, of course, to find the last function that declares sayhi.


JS executes by scanning one side of the code, defining all variables and functions according to the declaration, and then removing the declaration to execute the code.
I remember that the standard does not seem to say whether the function declaration can be placed in if , but it is generally believed that according to the above, it is not possible to define different functions according to conditions in if , because the value of condition is unknown when scanning the code before execution, and the browser cannot determine which declaration to use. For things that are not written in the standard, what the browser does depends on the mood. For functions, the standard says that if there is a function with the same name, the code starts execution with the latter (because the value of the function can be changed in the code). Refer to http://zonxin.github.io/post/. here. So if the browser does not handle this situation and follows the standard, then the lower function will be used.

function expressions have two grammars, one is anonymous function, the other is function fn () {} , this form is the same as function declaration in syntax, but in general, we probably write the function expression var f = function fn () {} , if it is written directly as function fn () {} , it will be regarded as function declaration by the browser.

function a()
{
    var variable = 0;
    function fn() {}
    fn();
}
// 
function a()
{   // ,
    variable = 0;
    fn();
}


function b()
{
    var f = function fn() {};
    fn();
}
//  function fn() {} 
f = ; //  `function fn() {}` 

the above example may not be appropriate, just to illustrate that although the syntax of a function declaration is the same as that of one of the function expressions, it is still possible to semantically distinguish between a function declaration and a function expression.


The

function declaration is mentioned above, so it is not recommended to declare (define) multiple times, let alone in logical statements such as if, while function expressions are essentially assigned values after anonymous function object definitions, so there is no problem in if.

  if(conditon){
    sayHi=function(){        
        alert('hi');
    }
  } 
  else{
    sayHi=function(){        
            alert('yo');
        }
   }

then there will be no problem


using function declarations, all declared functions are mentioned at the top of the code to be defined, so it can be executed normally as follows:

fn();
// hi

function fn(){ console.log("hi") }

if you use a function expression, the function will not be defined until that line of code is executed, so the following code will report an error:

fn();
// fn is not a function

const fn = function(){ console.log("hi") };

if you write the function declaration in the expression, some browsers will correct you and some will not

Menu