자바스크립트 스코프에 대해 아주쉽게 이해하기
스코프를 어려운 코드, 용어나 도식 없이 초간단하게 이해하는 꿀팁을 소개합니다
여기에 변수가 하나 있다
let box;
이렇게 또 같은 이름으로 만들면 에러가 날 것이다
에러가 나는 이유는 한 공간에 같은이름의 변수가 이미 존재하기 때문이다
let box;
let box;
에러가 안나게 하는 방법은 간단하다
공간을 분리해주면된다
다음과 같이 {}로 공간을 나눠주면 된다
{} 안에서 let이나 const로 만들어진 변수 이름은 {} 안에서만 유효하다
{
let box;
}
{
let box;
}
그러하다면 다음의 경우는 불가능할것이다
5번라인에서 문제가 생길것이다
왜냐하면 box는 참조를 시도한 공간인 4번~6번라인 안이 아닌 1번~3번의 별도의 다른공간에 있기 때문이다
{
let box;
}
{
console.log(box);
}
그렇다면 변수는 어디에 만들어야할까?
다음과 같이 위치를 같은 공간으로 이동시켜주면 된다
{
let box;
console.log(box);
}
또한 아래의 경우도 참조를 할 수 없다
box 변수 이름은 { } 안에서만 유효하기 때문이다
{
let box;
}
console.log(box);
자 아래와 같은 상황이 있다
아래의 결과는 각각 콘솔에 1이 2회 찍힐것이다
{} 를 이용해 두개의 공간을 만들어주었고 각각의 공간에 box 변수를 만들어주었다
두개의 공간을 만들었으므로 각각 별개의 두개의 box 변수를 만든 셈이된다
{
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가 찍힐것이다
let box = 0;
{
box = box + 1;
console.log(box);
}
{
box = box + 1;
console.log(box);
}
만약 상황이 아래와 같다고 하자.
변수는 "같은공간"에 같은이름이 존재할수 없다.
아래의 경우는 같은공간이 아니라 상위공간에 같은이름의 변수가 있는 경우이다.
이 경우는 문제없다.
7번라인에서 box 를 참조하고자 할때 box변수가 어디있는지 참조하고자 하는 라인이 속한 공간에서 부터 찾아나간다
찾아보니 6번라인에 있다. 그래서 3을 출력할것이다
{
let box = 1;
{
let box = 2;
{
let box = 3;
console.log(box);
}
}
}
6번라인을 주석처리 해보자
7번라인에서 box를 참조하기위해 box를 찾아볼것이다.
일단 참조하고자 하는 라인이 속한 공간에서 box를 찾아봤는데 없다.
그러면 상위공간을 찾아보게된다. 4번라인에 있네~! 그래서 2를 출력하게된다
이렇게 탐색범위를 상위로 넓혀가는것을 스코프체이닝이라고 부른다
물론 스코프체이닝이라는 말을 몰라도 이해하고 사용하는데는 아무 문제가 없다
{
let box = 1;
{
let box = 2;
{
// let box = 3;
console.log(box);
}
}
}