let x = 30;
function get () {
return x;
}
let result = get(20); // result = 30;함수 get은 x를 반환합니다. 따라서 전역 스코프 x 를 바라봅니다. 하지만 get 함수에 x라는 변수가 별도로 선언되어 있지 않기 때문에 result에 30이 할당됩니다.
get(20)은 아무 필요가 없습니다. 20이라는 인자를 받아 함수에 전달했지만 get 함수에는 어떤 변수에도 할당된 적 없습니다.
Scope 를 볼때는 함수 매개변수를 잘 확인해야 한다.
let x = 30;
function get(x) {
return x;
}
let result = get(20);1번 문제와 달리 get 함수에 매개변수 x가 선언되어 있습니다. 즉 get함수가 반환하는 x는 전역 스코프의 x가 아니라 get 함수 스코프에 선언된 별도의 매개변수 x 입니다.
result의 값은 전역 변수 x에 할당된 30이 아닌 get 함수의 인자 20을 가지고 옵니다.
Scope 함정 문제
let x = 30;
function get () {
return x;
}
function set (value) {
let x = value;
}
set(10);
let result = get(20); // 30을 출력합니다.get함수는 전역에 선언된 x 를 반환하고, set 함수는 value라는 매개변수를 통해 받은 값을 x에 할당합니다.
하지만 get과 set의 x는 다릅니다.
get의 x는 전역 변수 x를 가리킵니다. set x는 value 키워드를 통해 별도로 선언된 변수 입니다. (set 안에서 별도로 선언된 상태입니다.)
따라서 set(10)과 관계없이 result 값은 전역 변수 30의 영향을 받아 result가 30을 출력하게 됩니다.
scope에서 var를 주의하자
let x = 30;
function get () {
return x;
}
function set (value) {
x = value;
}
set(10);
let result = get(20);set함수는 매개변수 value 를 통해 전달받은 x에 할당됩니다. 따라서 set(10)을 실행할 경우 x에 할당된 30은 10으로 변경됩니다.
주의 사항은 get(20) 을 통해 x 값을 변경하려 했지만, get() 매개 변수가 빠져있는 상태이기 때문에 result값에 아무 영향을 미치지 않습니다.
scope에서 우선순위
let x = 30;
function get (x) {
return x;
}
functionn set (value) {
x = value;
}
set(10);
let result = get(20); // 출력은 20;set(10)을 통해서 매개변수 value를 통해 10으로 변경됩니다.
하지만 set(10) 밑에 get(20)에서 매개변수 x를 통해 return 20 후 x는 다시 20으로 돌아오게 됩니다.
outer, inner 우선순위
let x = 10;
function outer () {
let x = 20;
function inner () {
return x;
}
return inner();
}
let result = outer();outer 이내에 x 가 선언되어 있습니다. outer는 inner 함수를 실행시킨 값을 반환합니다.
inner 함수는 x를 반환합니다. x라는 변수가 별도로 없기 때문에 x는 바로 윗 단계인 outer 함수에 선언된 x가 됩니다. 따라서 result 값은 20이 됩니다.
스코프가 위계적으로 겹칠 경우 순차적인 스코프 체이닝이 일어납니다.
let 과 var 가 선언된 우선 순위
let x = 10;
function outer() {
let x = 20;
function inner() {
x = x + 10; // inner 매개 변수가 없고 아무말없이 선언했을 경우 자동으로 var가 됩니다.
return x; // var 우선 순위로 x = x + 10 을 통해 x = 10;
}
inner();
}
outer();
let result = x; outer 함수를 실행하면, outer 함수 스코프 내에서 Inner 함수가 호출됩니다.
(중요한 점은 outer()가 실행될 때 Inner 함수가 작동된다.)
따라서 result에 선언된 x 의 값은 outer에 선언된 let x = 20; 과 관계없이 10이 됩니다.
영향을 받지 않는 scope
let x = 10;
function outer() {
x = 20;
function inner() {
let x;
x = x + 40;
return x;
}
inner();
}
outer();
let result = x;outer 함수는 전역 변수 20을 x에 할당합니다. 하지만 inner 이내에 let 함수는 바깥 스코프 x 에 영향을 미치지 않습니다.
따라서 outer 함수가 실행된 후에도 result = x 의 값은 20입니다.
var로만 선언된 함수 scope의 결과
let x = 10;
function outer() {
x = 20;
function inner() {
x = x + 20;
}
inner();
}
outer();
let result = x; // 40을 반환합니다.
outer, inner 함수 모두 전역에 선언된 x 값을 변경하는 함수 입니다.
outer 함수가 실행되면서 전역 x 는 20이 됩니다. 이 때 inner 함수가 호출되면서 전역의 x(20)값에 또 다시 20을 더해서 x는 40이 됩니다.
따라서 x 는 40을 반환합니다.