[JavaScript] scope(스코프)와 hoisting(호이스팅)를 알아보자

자바스크립트로 프로젝트를 진행하거나 여러가지 프레임워크를 사용하다보면 꼭 얘기나오는 것이 scope와 hoisting인데

이번 포스트는 두가지 개념을 정리하고자 한다. 

Scope(스코프) 란?

자바스크립트에서 Scope란 한국어로 번역하자면 범위 정도로 할 수 있다.

그럼 자바스크립트에서 말하는 Scope란 무엇일까?

변수의 유효범위 혹은 변수 생존범위 정도로 말할 수 있다.

var라는 키워드를 이용하여 자바스크립트는 변수를 선언하고 있지만, 다른 프로그래밍 언어와는 다르게

블럭-수준(block-level)의 범위가 아닌 함수-수준(function-level)의 범위를 가지고 있다.

아래의 예시를 보면서 알아보면

var name = "David Kwon";      // 전역 변수를 선언
function showName(){
  var name = "Yunhak Kwon";   // 지역 변수를 선언
  if(true) {
    var name = "권윤학";
    console.log(name);
  }
  console.log(name);
}
showName();                   
console.log(name);

결과는 아래와 같이 출력된다.

권윤학
권윤학
David Kwon

보통의 프로그래밍 언어의 경우 if문의 {}(블럭)에서 변수를 선언시 해당 블럭안에서만 유지되지만 자바스크립트는 그렇지 않고

해당 함수 전체의 영향을 준다. 

이 결과가 당연하게 여겨진다면 이미 자바스크립트의 Scope에 익숙한 사람인것이다.

Hoisting(호이스팅) 이란?

Hoisting을 번역하면 들어올려 나르기, 끌어 올리기로 해석된다.

자바스크립트에서 말하는 호이스팅도 비슷한 의미로 사용되고 있다.

Hoisting의 경우 무의식적으로 사용하고 있었을 경우가 많은데, 예시를 들자면 아래와 같다.

showName();

function showName(){
  console.log(name);
  var name = "David Kwon";
  console.log(name);
}

해당 예제에는 호이스팅의 특징 2가지가 포함되어있다.

- 변수 호이스팅

- 함수 호이스팅

일단 실행결과를 보면 아래와 같다.

undefined
David Kwon

변수 호이스팅

해당 코드는 다른 프로그래밍 언어였으면 첫번째 console.log(name);에서 레퍼런스 에러가 발생되어야 하지만

자바스크립트의 경우 자바스크립트 엔진에서 아래와 같이 해석을 한다

showName();

function showName(){
  var name;
  console.log(name);
  name = "David Kwon";
  console.log(name);
}

변수 선언문 및 초기화시 해당 함수안에서 최상단으로 올라가게 된다. 이게 변수 호이스팅이다.

조금 말이 어려울 수 있는데 쉽게 생각하면 변수 선언문, 초기화는 무조건 함수 최상단으로 먼저 읽혀진다고 생각하면된다.

함수 호이스팅

함수 호이스팅도 같은 맥락이다. 변수 호이스팅이 변수 선언문 및 초기화였다면 함수는 함수 선언문 방식일때만 호이스팅이 된다.

함수 표현식, new 키워드를 통한 함수 정의시에는 호이스팅이 안된다는점만 기억하면된다.

//함수 선언문 (호이스팅 됨)
showName();
function showName(){
  console.log(name);
  var name = "David Kwon";
  console.log(name);
}
//함수 표현식 (호이스팅 안됨 -  에러발생)
showName();
var showName = function(){
  console.log(name);
  var name = "David Kwon";
  console.log(name);
};
//new Function 객체 생성 (호이스팅 안됨 - 에러발생)
showName();
var showName = new Function("", console.log("David Kwon"));

호이스팅 또한 익숙하시다면 자바스크립트가 익숙하신 개발자라는 얘기입니다.

Scope와 Hoisting을 알고나면 클로저(closure)를 이해하기 조금 더 수월해지는데

클로저에 대해서는 다음 포스트에 올리도록 하겠습니다.