Javascript - 변수의 범위와 호이스팅(Variable scope and hoisting)

서론

지난 포스트에서 Javascript에서 변수를 선언하는 var, let, const 3가지의 특징과 사용 방법을 알아보았습니다.

이제 변수를 언제 선언할 것이며, 변수를 사용할 범위를 정확하게 지정해야만 효율적인 프로그램이 가능해집니다. 

본문에서는 이런 내용들을 알아보도록 하겠습니다.

 

변수의 범위 - Variable Scope 

C 나 Java와 같이 JavaScript에서도 변수를 사용하는 범위를 지정할 수 있게 됩니다. 

프로그래밍을 하는 과정에서 모든 데이터가 계속해서 변수의 형태로 메모리를 차지하고 있는다면, 매우 비효율적이기 때문입니다.

 

다른 말로는 변수의 생명주기(Variable of lifecycle)이라고도 불립니다.

즉, 변수가 존재하는 영역을 지정할 수 있다는 것입니다.

Javascript에서는 2가지의 형태로 변수의 생명주기를 정할 수 있습니다.

• 전역 변수(Global variable) - 프로그램과 생명주기가 같은 변수
• 지역변수(Local variable) - 블록 범위로 지정된 변수

블록 범위란?

이미 C나 Java 등의 언어를 사용했다면 { }로 범위를 지정합니다. 

이 범위를 블록 범위라고 합니다.

{
  //블록 범위
}

전역 변수(Global variable)

전역 변수는 프로그램과 생명주기가 같은 변수들을 의미합니다.

다르게 말한다면, 블록 범위가 없는 최 상위의 위치에서 선언된 변수를 전역 변수라고 합니다. 

이 전역 변수는 프로그램이 종료되기 전까지 모든 영역에서 사용할 수 있는 변수입니다.

 

지역변수(Local variable)

지역변수는 블록 범위 안에서만 존재하고 블록 범위가 끝나면 소멸되는 변수를 의미합니다.

즉, 지역변수는 선언된 변수가 포함된 블록 범위 안에서만 사용할 수 있는 변수입니다.

 

소스코드로 보는 전역 변수와 지역변수

아래 예제를 확인하면 보다 쉽게 차이점을 구분할 수 있습니다.

//전역변수
const name = '홍길동';

{
	//지역변수로
    //기본적으로 const name을 동일한 곳에서 사용하면 error지만
    //범위가 달라서 사용 가능하다.
	const name = '이순신';
    console.log(name); // 출력 : 이순신 (지역변수가 호출 우선순위 입니다.)
}

//또다른 지역변수 예제 함수 표현
function fun(){
	console.log(name); // 출력 : 홍길동 (전역변수가 호출됩니다.)
    const age = 10;
    {
    	console.log(age); // 출력 : 10 (age의 블록범위가 존재함으로 출력)
        const job = '연구원';
    }
    console.log(job); // error 발생! job의 생명주기는 이미 끝나 소멸되었기 때문입니다.
}

 

아마 다른 언어들을 접해봤다면 이해가 어렵지 않을 것이라 생각됩니다.

 

호이 스팅(Hoisting)?

C나 Java 등의 언어를 먼저 접하신 분들이 javascript를 접하면서 어렵게 만드는 개념 중 하나입니다.

또한 잘 이해하고 쓰면 좋을 경우도 있지만, 되도록이면 호이 스팅이 적게 되도록 소스코드를 작성하는 게 바람직하다고 생각합니다.

 

이 호이 스팅은 소스코드 상에 존재하는 변수 또는 함수의 선언을 해당되는 생명주기 가장 최 상단으로 끌러 올리는 개념.

일반적으로 C언어를 생각했을 때 아래의 소스코드를 보도록 합시다.

 

var a = 10 ;
console.log(a);

console.log(b); // 결과는 ?
var b = 20;

C와 같은 경우를 생각해보면 변수 b가 선언되지 않고 사용했기 때문에 Error가 발생해야 됩니다. 

하지만 Javascript에서는 호이 스팅은 소스코드 상에 존재하는 변수 또는 함수의 선언을 해당되는 생명주기 가장 최 상단으로 끌러 올리는 개념이 존재해서 때문에 정상적으로 작동할 수 있습니다.

 

이런 호이 스팅 때문에 javascript로 만드는 소스코드의 동작은 개발자의 의도와는 다르게 동작하는 경우가 대단히 많습니다. 

어떻게 본다면 아무 곳에서나 선언하고, 아무곳에서나 사용할 수 있는 편리한 기능이지만(물론 맞는 말입니다.)

이런 호이 스팅이 많아질수록 소스코드를 보기는 불편하고 예상하지 못한 오류를 발생시킬 가능성이 높아집니다.

 

let, const의 존재 의미 중 하나

let과 const 또한 javascript에서 호이스트의 개념이 적용됩니다. 

하지만, 호이 스팅은 소스코드 상에 존재하는 변수 또는 함수의 선언을 해당되는 생명주기 가장 최 상단으로 끌어올리는 개념이기 때문에 let과 const의 할당을 하지 않으면 사용하지 못한다는 조건과 다른 개념이 적용됩니다.

 

console.log(a);
const a = 10;

 이런 소스코드는 선언부 const a는 호이 스팅이 되지만 const의 특성상 할당이 되지 않으면 사용할 수 없어 error이 발생됩니다.

이런 할당이 되지 않은 문제를 TDZ(Temporal Dead Zone)이라고도 부릅니다.

 

개인적인 의견

호이 스팅의 개념을 적절히 활용한다면 Javascript를 이용한 프로그래밍에 도움이 되는 경우 또한 있을 것입니다.

그래서 Javascript를 개발하는 사람 들고 이런 개념을 적용시킨 체 사용을 제한할 수 있는 let, const 등의 개념을 추가한 것이 아닐까 싶습니다.

 

물론 저 같은 경우에는 논리적 순서대로 동작하는 것이 제 머릿속에서도 편하기 때문에 최대한 사용을 안 하기는 하겠지만, 필요에 의해 의도적으로 사용한다면 그것은 나쁜 것은 아니라고 생각합니다.