javascript - Problem setting parameter default value by function

Question

var x = 1; 

function foo(x,y=function(){x=2;}){
    var x = 3;
    y();
    console.log(x); 
}
foo();

This code appears in the es6 book written by teacher Ruan Yifeng. The final output is 3. The text description says that the x in y and the x in var x = 3; are not the same x. I don’t understand it here.
Then remove the var of var x= 3, and you can output 2, which is even more incomprehensible. . . Hope there is an answer

Answer 1

This actually involves an intermediate scope introduced by ES6 default parameters. Ruan Yifeng also missed this issue at the beginning, but of course it is correct here.

The purpose of the intermediate scope is to prevent default parameters from being polluted by variables in the function. The original intention of default parameters is to allow parameters to have default values. If the variables inside the function can be increased, then the default parameters are meaningless. See the article for specific explanations and examples.

So looking back at the question,

var x = 1; 

function foo (x2, y = function () { x = 2; }) {
    var x = 3;
    y();
    console.log(x); 
}
foo();

There are three scopes here. Mark x from outside to inside:

var x1 = 1; 

function foo (x2, y = function () { x2 = 2; console.log(x2); }) {
    var x3 = 3;
    y();
    console.log(x3); 
}
foo();
console.log(x1);

If there is no parameter x, then the mark is:

var x1 = 1; 

function foo (y = function () { x1 = 2; console.log(x1); }) {
    var x2 = 3;
    y();
    console.log(x2); 
}
foo();
console.log(x1);

Answer 2

y() modifies the parameter x of the foo function, not the global x. (Here you can console.log(x) after calling y() to find that the global x is still 1.)
The problem is simple: 1) When using var x = 3, console.log(x in foo ) prints the local variable x in foo, and y() only modifies the parameter x, so the final output is the local variable x = 3
2) When var is not used, all x in foo point to the parameter x, and y is used () Change parameter x to 2, and finally output 2

Answer 3

The default value of

y changes the x of the global variable;
Remove the var of var At this time it has been assigned a value of 2

Answer 4

This is the difference between the life cycle of local variables and global variables. var x = 3; in the method is a local variable. The two variables have the same name. Local variables will be used in the method body, but global variables will not be used, so the output is var x = 3; the value of x; when you remove the var of var x = 3;, it means that there is no other local variable defined in the method, but the global variable So the output is 2;

Answer 5

First of all, you need to understand the definition of the var operator. A variable defined with the var operator will become a local variable in the scope in which the variable is defined. That is to say, if you use var to define a variable in a function, then this variable belongs to the function. A local variable will be destroyed when the function exits, and variables directly defined without using var will become global variables.
Another concept you need to understand is the issue of scope chain. When the program searches for a variable, it will first search within the current scope. If it is not found, it will search upwards along the scope chain. If it is not found after traversing, it will report undefined.
Back to the above code, first use var to define x=1 in the global scope; x belongs to the global variable, and then define the local variable var x=3 inside the function foo; Execute the y function and modify and assign the value to the global variable x. At this time, x becomes 2. Remember that the global variable x is modified at this time and not the local variable The value of x is searched internally. After finding x=3, the value is output, so the result is 3. If the var of var x=3 is removed, x becomes a global variable. Modifying x is just like assigning a value to x in the y function. At this time There is only one global variable x. According to the order of code execution, the global variable Search in the global scope. At this time, X is 2, so the result is 2

Answer 6

var x = 1;

function foo(x, y = function () { x = 2; }) {
    var x = 3;
    eval(`(${y.toString()})()`);
    console.log(x);
}

foo();

Answer 7