Function

1. Definition of function

   In JavaScript, a function is a reusable piece of code that can be called multiple times. It can accept inputs (called parameters), process these inputs, and return a result (output). Functions can be defined once and called in multiple places, helping to modularize code and reduce duplication.

   
   

2. Formal Parameters and Actual Arguments

   Formal parameters are variable names listed when the function is defined. They exist as local variables inside the function body and receive the values of the actual parameters passed when the function is called. Actual parameters are specific values passed to the function when it is called. These values are assigned to the corresponding formal parameters when the function is executed.

   greet('Hello', 'Alice'); // 'Hello' and 'Alice' here are the actual parameters
      
   function greet(message, name) { // message and name here are formal parameters
     console.log(message + ', ' + name + '!');
   }

   Notice

   1. Number of parameters: In JavaScript, the number of actual parameters of a function call may not match the number of formal parameters defined by the function. If there are more actual arguments than formal parameters, the additional arguments are ignored. If there are fewer actual arguments than formal parameters, the missing arguments are assigned the value undefined.

   2. arguments object: Within the function body, you can use the special arguments object to access all the actual parameters passed to the function. This was especially useful in ES5 and earlier, but now in most cases we prefer to use ES6’s spread operator to handle variable numbers of arguments.

   3. Default parameters: In ES6, you can provide default values for function parameters, so that when the corresponding actual parameters are not provided or are undefined, the formal parameters will be assigned this default value.

      function greet(name = 'Guest') {
        console.log('Hello, ' + name + '!');
      }
            
      greet(); // Output: Hello, Guest!
      greet('Alice'); // Output: Hello, Alice!

   4. Expand Operator: As mentioned earlier, ES6 introduces the spread operator (...), which allows you to handle a variable number of actual parameters when defining or calling a function.

   
   

3. Definition of function

   A function definition usually consists of a name (unless it is an anonymous function), a set of parameters (which may or may not be none), and a function body. A function definition usually consists of a name (unless it is an anonymous function), a set of parameters (which may or may not be none), and a function body.

   1. General function declaration

      function greet(name) {
        return "Hello, " + name + "!";
      }

   2. Function expression

      const greet = function(name) {
        return "Hello, " + name + "!";
      };

      A function is a special variable, and the upper and lower methods are completely equivalent. The function name is used as the variable name, and the function body is used as the variable value. The data type of this variable is object.

   3. Arrow Functions (ES6)

      const greet = name => "Hello, " + name + "!";

   
   

4. return

   A function is a pure process with no result. In the example, the result is undefined because the function has no result. If you want to return a result, you need to add the keyword return to the function.

   function fn(a, b){ var c = a + b }
   var box = fn(3, 5);
   console.log(box) //undefined
      
   function fn2(a, b){ return a + b }
   var box = fn2(3, 5);
   console.log(box0) //8

   return value: The original meaning of return is to exit the function. If you write code after return, the code will not be executed. The return+ value is to exit and return a result at the same time. Therefore, a function cannot contain two returns.

   
   

5. Scope of var

   Variables declared with var have so-called function scope. This means that when you declare a variable using var inside a function, that variable is visible throughout the function body, no matter where the declaration occurs.

   function example() {
     if (true) {
       var x = 5;
     }
     console.log(x); // Output 5. Although the variable x is declared within the if block, it is accessible throughout the example function due to var's function scope.
   }

   var has no block-level scope. Only let and const have block scope.

   
   

6. Local variables and global variables

   Global variables are variables declared in the global scope; local variables are variables declared in the local scope. **Global variables can be used in the local scope, but local variables cannot be used in the global scope. **

   var a = 5
   function fn(){
       a = 100 //In the example, a is a global variable (there is only one a), but it is reassigned in the local scope.
   }

   var a = 5
   function fn(){
       var a = 100 //There are two a in the example, one global variable and one local variable. These two a's are completely independent. When a is used locally, the local variable a (i.e. 80) is used.
   }

   
   

7. Situation when variables are directly assigned without declaration

   In any case, if a variable is directly assigned without declaration, JS will automatically declare it for you in the global scope.

   function fn(){
       a = 5 //In this example, although a is not declared and assigned within the function, a is automatically declared as a global variable.
   }

   If the variable is not declared, it cannot directly participate in operations and logical processing (rather than assignment), and an error will be reported.

   
   

8. Example

   function fn(){
       a=3;
       console.log(a)
       var a;
       console.log(a++)
       function fn1(){
           console.log(a)
           var a=5
           console.log(a)
       }
      
       fn1();
       fn();

   The judgment of this code is prone to errors. First call fn1(). Because there is var a=5, a in fn1() is a local variable. The function declaration is promoted to the top of the scope, so var a is promoted to the top of fn1() at this time. However, only the function declaration is promoted, but the assignment is not promoted, so the first log(a) result is undefined. Other results are readily available. undefined 5 3 3 is the result.