#21 자바스크립트(JavaScript) - 스코프(Scope)

안녕하세요 여러분! 에이블디 입니다!

 

이번 시간에는 지난 시간에 배운 호이스팅(Hoisting)에 이어 스코프(Scope)에 대해 배워보도록 할게요!

 

스코프는 자바스크립트에서 식별자를 선언하고 사용할 때 식별자가 적용되는 범위를 말하는데요, 식별자는 지난 시간에 뭔지 풀어드려서 다들 아시죠? 아무튼 이 식별자가 선언된 위치에 따라 적용되는 범위가 달라집니다.

 

이번에도 변수를 이용하여 스코프에 대해 이해해보도록 하겠습니다!

지난 시간(자바스크립트 16번 글)에 지역 변수와 전역 변수에 대해 알려드린 것 기억나시나요?

 

전역 변수는 어디에서든지 참조가 가능했고, 지역 변수는 함수 내에서만 참조가 가능했었었죠?

위에서 스코프는 식별자가 적용되는 범위를 말한다고 했는데요, 그래서 전역에 선언된 변수는 전역 스코프를 갖고 지역에 선언된 변수는 지역 스코프를 갖습니다.

 

여기서 블록(Block)이라는 개념을 하나 더 알고 갈게요! 블록은 중괄호({})로 묶은 부분을 뜻합니다.

그래서 if, for, while, try/catch, function 등 중괄호로 코드를 묶는 예약어들이 다들 코드 블록을 가지고 있습니다.

 

자 지금부터 자바스크립트의 재미있는 특징을 알려드릴 텐데요! 자바스크립트의 모든 코드 블록에서는 지역 스코프를 만듭니다.

이러한 특성을 블록 레벨 스코프라고 말합니다.

그런데 var로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하는데요, 이를 함수 레벨 스코프라 합니다.

 

자바스크립트 16번 포스팅에서 지역 변수와 전역 변수의 차이를 함수를 사용해서 보여드렸죠?

기억이 잘 나지 않으신다면 아래의 지역변수와 전역 변수 포스팅을 확인해 주세요!

https://abled.tistory.com/62

#16 자바스크립트(JavaScript) - 지역 변수와 전역 변수

이번 시간에는 함수를 사용하지 않았을 때에 var로 선언한 변수의 스코프가 어떻게 적용되는지 예제를 통해 보여드리겠습니다.

var number = 1;

if(true) {
    var number = 10;
}

console.log(number);

function() 대신에 if문을 사용하여 코드를 작성해 보았는데요, var를 사용하여 변수의 이름을 number로 동일하게 전역에 하나, if문 안에 하나를 선언해 주었습니다.

 

지난 시간에 함수 안에 var 선언한 변수는 전역, 지역 변수가 잘 나누어져서 출력이 되었는데요, 이번엔 어떻게 출력되는지 확인해 볼게요!

 

 

당연히 1이 찍혀야 한다고 생각을 했지만, 위에서 설명한 것과 같이 var로 선언되는 변수는 오로지 함수의 코드 블록 안에서만 지역 스코프로 인정되기 때문에 if문의 코드 블록 안에서 var로 선언한 number 변수가 전역 변수로 취급되어 기존의 전역 변수로 선언했던 number변수와 중복 선언되면서 console.log()를 if문 밖에서 사용했음에도 10이 출력되는 것을 볼 수 있습니다.

 

이렇게 var로 변수를 선언할 시 위의 코드야 짧게 작성한 예제 코드여서 변수가 중복 선언되는 문제를 바로 해결할 수 있지만, 실무에서는 프로젝트의 코드가 방대하기 때문에 어딘가에서 동일한 이름을 사용하는 변수가 전역 스코프를 공유하여 전역 변수로 인해 값을 재할당받는 상황이 발생하는 등 예상치 못한 결과를 가져올 수 있게 됩니다.

 

위의 문제점을 해결하기 위해 ES6부터 변수를 선언할 때 함수 레벨 스코프가 아닌 블록 레벨 스코프를 지원하는 const와 let이 등장하게 되는데요! const와 let에 대해서는 다음 시간에 알아보도록 하겠습니다!

 

그럼 여러분 다음 시간에 만나요!