함수의 이야기를 하고 잠시동안 변수로 돌아가는 일이 되지만, 오늘은 스코프(scope)에 대해 알아보려 한다.
Scope란?
scope는 유효범위라는 뜻을 가진 개념으로, 그 말 그대로 변수, 함수명의 유효범위를 뜻한다.
부연 설명을 하자면, 특정 변수가 선언 되었을때, 이 함수를 어디까지 적용할것인가를 scope에 따라 나누게 되는것이다.
함수에서 변수를 만들때를 생각해보도록 하자.
함수 안에서 만들어진 변수는 기본적으로 함수 안에서만 사용되고, 함수 바깥에서는 사용이 불가능하다고 하였다.
이 규칙이 바로 scope인것이다.
scope의 레벨이 다르기때문에, 함수 안에서의 함수는 함수 안에서만 사용되고, 함수 밖에서의 변수명과 함수 안의 변수명이 중복 되어도 충돌이 일어나지 않는것이다.
스코프의 레벨에는
전역스코프(Global Scope) : 어디에서나 참조(사용)이 가능한 스코프
지역스코프(Local Scope or Function Level Scope) : 함수 블록 안에서만 사용 가능한 스코프. 자신 혹은 하위 스코프만 사용 가능
으로 나눌 수 있다.
물론 변수도 마찬가지로 나눠지는데,
전역변수(Global Variable) : 전역에서 사용 가능한 변수
지역변수(Local Variable) : 함수(지역)내에서 선언된 변수로, 해당 지역 혹은 하위 지역에서만 사용이 가능하다
조금더 알기 쉽게 예를 들어보자면,
국가에서 법률등을 제정해서 선포하는것을 전역스코프적인 일로 본다면, 광역시등에서 자체적으로 만든 규칙등은 지역스코프에 해당 된다.
국가에서 제정한 법률은 모든 광역시에 예외 없이 영향을 미치지만, 광역시등에서 자체적으로 만든 규칙은 그 광역시 안으로 범위가 한정된다.
자바스크립트에서도 비슷한 일이 일어난다고 생각하면 된다.
.js라는 문서가 국가(전역)에 해당할때, 함수에 해당하는것이 광역시(지역)에 해당하게 되는것이다.
Block Scope란?
그렇다면 block scope란 것은 무엇일까?
Block이란 함수등을 형성할때 사용하는 {...} 바로 이 코드블럭을 뜻하는것이다.
이 block scope는 local scope가 그랬듯이 코드블럭 안에서만 사용 할 수 있다.
그렇다면 local scope와 block scope의 차이는 무엇이며, 우리가 왜 알아야 할까?
얼핏 들었을때 local scope와 block scope는 차이점이 별로 없어 보일수도 있다.
하지만 엄연히 차이점이 존재하는데, 이 둘은 함수에선 둘다 사용 할 수 있지만, local scope(function level scope)는 함수에서만 사용이 가능하고,
block scope는 코드블럭이 존재하는 if문에서도 사용이 가능하다는점이다.
자바스크립트는 function level scope를 따르고 있다.
그렇다면 자바스크립트에서 block scope를 사용 할수는 없을까?
자바스크립트도 block scope의 변수를 선언 할 수 있다.
그것이 바로 let이다. 기존에 있던 var는 local scope(function level scope)의 범위를 가지고 있기에, 블록 레벨에서 변수를 선언 했을때 원하지 않게 호이스팅(hoisting : {}에 상관 없이 변수를 가장 위로 끌어올려서 처리)되는 현상이 발생하기도 했기에,
ES6부터는 let과 const라는 새로운 변수 선언이 나오게 되었다.(호이스팅에 관해선 추후 TDZ에서 한번더 다루기로 하겠다)
