The scope of a function

One thing to note about functions is that if the default value of an argument is a variable, the scope of that variable is the same as that of any other variable: the scope of the current function is first followed by the global scope.

var x = 1;
function f(x, y = x) {
console.log(y);
}
f(2) // 2
Copy the code

In the above code, the default value of the parameter y is equal to x. When called, y equals the parameter x, not the global variable x, because the variable x inside the function scope has already been generated.

If the variable x inside the function scope is not generated when called, the result is different.

let x = 1;
function f(y = x) {
let x = 2;
console.log(y);
}
f() // 1
Copy the code

In the above code, when the function is called, the default value of y variable x has not been generated inside the function, so x refers to the global variable.

If the global variable x does not exist, an error will be reported.

function f(y = x) {
let x = 2;
console.log(y);
}
f() // ReferenceError: x is not defined
Copy the code

If I write it this way, I’ll also get an error.

var x = 1;
function foo(x = x) {
// ...
}
foo() // ReferenceError: x is not defined
Copy the code

In the above code, the default value of the argument x to function foo is also x. In this case, the default value x is scoped to function scope, not global scope. Because in the scope of the function, there is a variable x, but

The default value is executed before x is assigned, so this is a temporary dead zone (see chapter “Let and Const commands”), and any operation on x will report an error.

If the default value of an argument is a function, the scope of the function is the scope in which it was declared. Look at the following example.

let foo = 'outer';
function bar(func = x => foo) {
let foo = 'inner';
console.log(func()); // outer
}

bar();
Copy the code

In the above code, the default value of func for function bar is an anonymous function that returns the variable foo. When this anonymous function is declared, the scope of the bar function has not yet been formed, so the function is anonymous

Foo in the outer scope points to foo in the outer scope, output outer.

If I write it like this, I get an error.

function bar(func = () => foo) {
let foo = 'inner';
console.log(func());
}
bar() // ReferenceError: foo is not defined
Copy the code

In the above code, foo in the anonymous function refers to the outer layer of the function, but the outer layer of the function does not declare foo, so an error is reported.

Here’s a more complicated example.

var x = 1;
function foo(x, y = function() { x = 2; }) {
var x = 3;
y();
console.log(x);
}
foo() // 3
Copy the code

In the above code, the default value of the parameter y to function foo is an anonymous function. When the function foo is called, its argument x has the value undefined, so the x inside the function y starts with undefined, then

To be reassigned 2. However, the function foo internally redeclares an x with the value 3. The two x’s are different and do not affect each other, so 3 is printed.

So if you subtract the var of x equals 3, the two x’s are the same, and you end up with 2.

var x = 1;
function foo(x, y = function() { x = 2; }) {
x = 3;
y();
console.log(x);
}
foo() // 2
Copy the code