묵혔다가 꺼낸 JS - 스코프의 효용성, 블록 스코프, 호이스팅

스코프의 효용성

먼저 이전 시간까지 스코프의 특성과 역할에 대해서 학습을 하였는데 이번엔 효용성에 대해서 알아보겠다.

 

(스코프가 없다는 가정하에) 1만줄 가량되는 길고 장황한 코드를 모두 읽을 시간은 없고 일은해야한다는 가정하에 내가 특정 함수를 하나 생성하였다고 치자. 그런데 이전에 선언된 줄 모르고 내가 이미 선언된 함수의 이름을 한번 더 선언 하였고, 로직 또한 이미 다 구현한 상태인데 실행해보니 기존의 동작과는 다른 완전히 이상한 프로그램이 되어버린 것이었다.

 

위의 케이스가 스코프가 가장 필요한 이유 중 하나일 것이다.

A라는 함수를 기존에 만들어 놓았지만, 다시 밑에서 A라는 함수를 이전과는 다른 로직으로 한번 더 선언하여 기존의 A함수와 충돌이 생겨버린 것이다.

이럴 때일수록 스코프가 필요할 것이다.

왜냐? 스코프는 코드의 영역을 나눌 수 있어 같은 이름의 함수들을 다른 공간에 분리 시킬 수 있는 일이 가능하기 때문이다.

 

 

함수 뿐만아니라 스코프는 변수에도 접근을 할 수 있다는 것도 알고있을 것이다. 만약 스코프에 변수가 없다면 특정 변수를 계속해서 조리돌려 사용하게 되므로 이를 결과로써 작성된 프로그램에 큰 치명타를 야기하게 된다.

 

 

 

블록 스코프

 

먼저 블록 스코프의 단어부터 한번 알아보자.

프로그래밍에서 블록이라는 명칭은 중괄호 ({ }) 단위를 블록이라고 한다.

그러면 이해 할 수 있는 부분이 이러한 블록 단위마다 스코프가 존재 할 수 있다는 것이다.

그런데 들어보면 너무나 당연한데, 왜 여기서 굳이 이런 이야기를 하는가 알아 볼 필요가있다.

 

위의 코드의 실행 예상으로 전역 스코프에는 아무런 변수 할당도 없으니 사실 a,b 모두가 undefined로 출력 될 것같지만, 실행을 해보면 a에는 'a'값이, b에는 undefined로 출력이 되어 마치 스코프의 영역이 없는 듯한 느낌을 받게된다.

 

 

실제로 ES6이전까지만해도 var변수의 사용 범위가 매우 넓어 if, for, while등등의 블록 스코프라는 개념이 자바스크립트에는 존재하지않았다.

 

그렇다면 ES6 이후에는 어떠한 변화가 생겼을까?

우리가 처음 자바스크립트를 배울 때 변수 선언자가 var만 존재한다는 얘길 들었던가? 아니다. let 과 const 라는 키워드도 함께 들었을 것이다.

그러면 let과 const의 접근성이 var 와 다르게 어떤 부분의 차이가 있는지 알아보자 

 

확실히 var키워드와는 다르게 이 키워드들을 통해서 각각의 블록에서만 변수를 사용할 수 있다는 것을 확인 할 수 있다.

 

호이스팅

호이스팅이란?

컴파일레이션때 각 스코프 내부에 선언된 변수를 스코프의 가장 위로 끌어올라가는 동작을 호이스팅이라고한다.

 

이러한 코드를 작성하였다고 보자.

보통같으면 첫번째 라인에서 ReferanceError가 발생할 것 같지만 컴파일레이션 단계에서 아래와 같이 코드가 바뀐다고 생각하면 된다.

 

이와 같은 방식으로 동작한다고 생각하면 편할 것이다.

 

호이스팅은 변수뿐만이 아니라 함수 또한 적용된다.

 

함수또한 컴파일레이션 단계의 시각에서 보면

 

 

이런 식으로 함수는 선언과 동시에 내부 로직또한 같이 호이스팅이 된다.

 

하지만 함수 중 호이스팅이 안되는 케이스도 존재한다.

 

위와같은 코드를 아래와 같은 동작으로 볼 수 있다.

 

결국 변수 fn만 호이스팅이 되어 fn이라는 변수에는 undefined라는 값이 들어있는데, 이것을 함수 호출로 동작시키려니 오류가 발생하는 것이다.

 

 

위의 예시들을 통해서 알 수 있는 점은 대입 연산자를 이용해서 변수에 함수나 값을 주입시 해당 함수와 값까지 주입되어 호이스팅되지않고, 변수만 호이스팅이 되는 것을 볼 수 있다.

 

같은 이름을 함수를 선언 할 일은 없지만 이름이 같은 함수 여러개가 호이스팅이 될 시 마지막 함수가 이전의 함수를 덮어 씌우게 된다.

 

 

정리.

스코프가 없으면 코드가 뒤죽박죽되어 프로그램에 위험을 야기 할 수 있다. 스코프에게 감사해야겠다.

블록 스코프를 이용 할 때는 var가 아닌 let이나 const를 사용하자.

호이스팅은 선언된 변수들을 컴파일레이션 단계에서 변수선언을 우선적으로 스코프 맨위로 올려 실행한다.