자바스크립트 스코프에 대해 아주쉽게 이해하기

스코프를 어려운 코드, 용어나 도식 없이 초간단하게 이해하는 꿀팁을 소개합니다

 

여기에 변수가 하나 있다

bGV0IGJveDs=
let box;

 

이렇게 또 같은 이름으로 만들면 에러가 날 것이다

에러가 나는 이유는 한 공간에 같은이름의 변수가 이미 존재하기 때문이다

bGV0IGJveDsNCmxldCBib3g7
let box; let box;

 

에러가 안나게 하는 방법은 간단하다

공간을 분리해주면된다

다음과 같이 {}로 공간을 나눠주면 된다

{} 안에서 let이나 const로 만들어진 변수 이름은 {} 안에서만 유효하다

ew0KICAgIGxldCBib3g7DQp9DQp7DQogICAgbGV0IGJveDsNCn0=
{ let box; } { let box; }

 

그러하다면 다음의 경우는 불가능할것이다

5번라인에서 문제가 생길것이다

왜냐하면 box는 참조를 시도한 공간인 4번~6번라인 안이 아닌 1번~3번의 별도의 다른공간에 있기 때문이다

ew0KICAgIGxldCBib3g7DQp9DQp7DQogICAgY29uc29sZS5sb2coYm94KTsNCn0=
{ let box; } { console.log(box); }

 

그렇다면 변수는 어디에 만들어야할까?

다음과 같이 위치를 같은 공간으로 이동시켜주면 된다

ew0KICAgIGxldCBib3g7DQogICAgY29uc29sZS5sb2coYm94KTsNCn0=
{ let box; console.log(box); }

 

또한 아래의 경우도 참조를 할 수 없다

box 변수 이름은 { } 안에서만 유효하기 때문이다

ew0KICAgbGV0IGJveDsNCn0NCmNvbnNvbGUubG9nKGJveCk7DQo=
{ let box; } console.log(box);

 

자 아래와 같은 상황이 있다

아래의 결과는 각각 콘솔에 1이 2회 찍힐것이다

{} 를 이용해 두개의 공간을 만들어주었고 각각의 공간에 box 변수를 만들어주었다

두개의 공간을 만들었으므로 각각 별개의 두개의 box 변수를 만든 셈이된다

ew0KICAgIGxldCBib3ggPSAwOw0KICAgIGJveCA9IGJveCArIDE7DQogICAgY29uc29sZS5sb2coYm94KTsNCn0NCnsNCiAgICBsZXQgYm94ID0gMDsNCiAgICBib3ggPSBib3ggKyAxOw0KICAgIGNvbnNvbGUubG9nKGJveCk7DQp9
{ let box = 0; box = box + 1; console.log(box); } { let box = 0; box = box + 1; console.log(box); }

 

상황을 다음과 같이 바꿔본다

각각의 공간에 각각존재하던 box 를 모두 지우고 밖에 box 변수를 만들었다.

이렇게 하면 box 변수를 참조하는 시점(3,4,7,8번라인)에 box 변수가 console.log 코드가 포함된 공간안에 만들어져있는지를 찾아본다.

하지만 아래의 코드에서는 없다. 없다면 한단계 위 공간에서 찾아본다. 위 공간에 box 가 있다.

위의 상황에서 box가 두개였던것과 달리 이번에는 box가 한개이고 두 공간에서 참조하는 모양으로 변한겻이다

결과는 콘솔에 1과 2가 찍힐것이다

bGV0IGJveCA9IDA7DQp7DQogICAgYm94ID0gYm94ICsgMTsNCiAgICBjb25zb2xlLmxvZyhib3gpOw0KfQ0Kew0KICAgIGJveCA9IGJveCArIDE7DQogICAgY29uc29sZS5sb2coYm94KTsNCn0=
let box = 0; { box = box + 1; console.log(box); } { box = box + 1; console.log(box); }

 

만약 상황이 아래와 같다고 하자.

변수는 "같은공간"에 같은이름이 존재할수 없다.

아래의 경우는 같은공간이 아니라 상위공간에 같은이름의 변수가 있는 경우이다.

이 경우는 문제없다.

7번라인에서 box 를 참조하고자 할때 box변수가 어디있는지 참조하고자 하는 라인이 속한 공간에서 부터 찾아나간다

찾아보니 6번라인에 있다. 그래서 3을 출력할것이다

ew0KICAgIGxldCBib3ggPSAxOw0KICAgIHsNCiAgICAgICAgbGV0IGJveCA9IDI7DQogICAgICAgIHsNCiAgICAgICAgICAgIGxldCBib3ggPSAzOw0KICAgICAgICAgICAgY29uc29sZS5sb2coYm94KTsNCiAgICAgICAgfQ0KICAgIH0NCn0=
{ let box = 1; { let box = 2; { let box = 3; console.log(box); } } }

 

6번라인을 주석처리 해보자

7번라인에서 box를 참조하기위해 box를 찾아볼것이다.

일단 참조하고자 하는 라인이 속한 공간에서 box를 찾아봤는데 없다.

그러면 상위공간을 찾아보게된다. 4번라인에 있네~! 그래서 2를 출력하게된다

이렇게 탐색범위를 상위로 넓혀가는것을 스코프체이닝이라고 부른다

물론 스코프체이닝이라는 말을 몰라도 이해하고 사용하는데는 아무 문제가 없다

ew0KICAgIGxldCBib3ggPSAxOw0KICAgIHsNCiAgICAgICAgbGV0IGJveCA9IDI7DQogICAgICAgIHsNCiAgICAgICAgICAgIC8vIGxldCBib3ggPSAzOw0KICAgICAgICAgICAgY29uc29sZS5sb2coYm94KTsNCiAgICAgICAgfQ0KICAgIH0NCn0=
{ let box = 1; { let box = 2; { // let box = 3; console.log(box); } } }