자바스크립트에 대해 아마 가장 자주 쓰는 코드를 물어본다면,

단언코 var , let, const 일것이다.

컴퓨터를 예로 들면, 컴퓨터를 부팅하고 실행하기 위해 각종 메인부품 외 부속 부품들을 조합하고 연결하여

실행하여야 한다.

​

그런데 이와 같은 과정을 하기 위해선 쉽지 않다. 각 부품별 최적의 회로와 사이즈, 전력량 등을 효율적으로 짜임새

있게 구성하여야 컴퓨터를 효과적으로 사용하고 오래 사용할 수 있는 컴퓨터를 구성할 수 있기 때문이다.

​

프로그래밍도 이와 마찬가지로 여러 변수 및 상수들을 효율적으로 구성하여야 프로그램을 실행하는 데 있어

방해가 되는 버그 사항을 사전에 식별할 수 있어야 하고, 가급적 자주 사용하는 부품들을

공유하여 같이 사용할 수 있게끔 효율적으로 짜는 행위가 필요하다.

서론이 길었으나, 반드시 기억하고 있어야 하는 내용이라고 생각하고 비단 자바스크립트 뿐만 아니라

다른 모든 프로그래밍 언어에도 공통적으로 적용되는 사항이라고 생각한다.

  1. 호이스팅의 개념

호이스팅이란, 변수와 함수의 메모리 공간을 선언 하기 전에 미리 할당하는 것을 의미한다.

​

이게 무슨 말이냐 ? 필자도 무슨 말인지 이해하기 힘들었지만, 다시 풀어서 설명해보면

#선언

var name;
console.log('결과 : ',name); // 결과 : undefined
 

위와 같은 코드는 선언을 하는 코드이며, 프로그램 작성자가 초기화를 하지 않았기에

name이라는 용어가 어떤 행위를 하거나 어떤 역할을 하는지

컴퓨터에서는 알 수가 없으므로 프로그램에서 에러로 식별될 수있다.

그러나 그것을 자바스크립트에서 사전에 잡아주는 행위를 하는데,

var 의 경우에는 초기화를 하지 않았을 경우 undefined로 할당된다.

​

자 그럼, 호이스팅을 왜 하는지 궁금할 것이다. 그냥 실행해도 되지 않나? 라고 생각할 수 있지만

자바스크립트는 컴파일러가 아닌 인터프리터로 실행한다.

# 컴파일러의 역할

원시코드를 기계어로 번역하여 실행 프로그램으로 만든다.

# 인터프리터의 역할

프로그램의 소스코드를 직접 실행하는 프로그램 및 환경이다.

​

쉽게 설명하자면, 컴파일러의 경우 소스코드를 전부 다 읽은 다음에 번역하여 실행 프로그램으로 만든다.

즉, 한국말처럼 모든 내용을 끝까지 다 듣고 판단한다는 것이다.

​

그러나 인터프리터의 경우 소스코드를 한 줄 단위로 읽고 실행한다.

한 줄 단위로 실행하는 기준에 있어 첫 줄부터 순차적으로 읽고 실행하는데,

사전에 선언하지 않았을 경우 그 다음 실행코드에서 인지하지 못하고 에러를 발생할 수도

있는 것이다. 결국 그것을 방지하기 위해서 호이스팅 처리를 하는 것이다.

​따라서 아래와 같은 코드도 에러가 발생하지 않는 것이다.

# 변수 예제

console.log(dog); // 호이스팅한 var 선언으로 인해 undefined 출력
var dog; // 선언
dog = '똘똘이'; // 초기화
 

# 함수 예제

dogName("똘똘이");
function dogName(name) {
	console.log("제 강아지 이름은 " + name + "입니다"); // 제 강아지 이름은 똘똘이입니다
}

 

const 와 let 의 경우, 호이스팅 대상이지만 var와는 다르게

undefined로 초기화하지는 않아서, 코드 실행 시 에러가 발생한다.

정리하자면, 호이스팅은

인터프리터에 의해 자바스크립트 코드가 실행할 때 나중에 선언된 변수나 함수에 대해

호이스팅 처리를 하여 에러를 방지하기 위해 하는 행위라고 볼 수 있겠다.

​

# 참고 문헌

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

​

'JS' 카테고리의 다른 글

[JS] Date 함수에 대해서 알아보자  (1) 2025.02.10
[JS] var , const , let 에 대해 알아보자  (0) 2025.02.10
[JS] String(문자열)에 대해 알아보자  (1) 2025.02.10
[JS] null , undefined 타입에 대해 알아보자  (0) 2025.02.10
[JS]천원단위 콤마(,)정규 표현식  (0) 2025.02.10

흔히 자바스크립트에서 사용하는 자료구조에서 선언하는 변수 및 상수의 경우,

제목과 같이 var, const , let 으로 사용할 것이다.

필자의 경우 이것들에 대해 잘 모르는 경우가 많았어서, var 만 사용한 경우가 훨씬 많았다.

아니, 사실 var 이외의 것들이 존재하는 지도 잘 몰랐다.

시간이 흐르고 이것에 대해서 헷갈려 하는 분들이 있을 수 있어 자료를 남긴다.

1. var

사실 자바스크립트 프로그래밍을 하다보면 아마 제일 많이 쓸 것이다.

왜냐하면 var로 선언할 경우 전역 변수이기 때문에 어디에서 사용하던 간에

어지간하면 타입 에러나 쓰는 순서를 잘못 써서 생기는 에러가 거의 없기 때문이다.

* 사용법

1) 2개 이상 변수 한번에 선언 및 초기화

var a = 0, b = 0; // 두가지 변수를 한번에 선언 가능함
console.log('a : ', a , 'b : ', b); // a : 0 b: 0

2) 다수 변수 초기화

var x = 0;
function f(){
  var x = y = 1; // x는 지역변수로 선언됩니다. y는 아닙니다!
}
f();
console.log(x, y); // 0, 1 // x는 예상대로 전역이다

그 외 호이스팅이란 기법도 있으나, 그 내용은 아래 링크를 참고바란다.

https://kwondol.tistory.com/3

2. let

let은 해당하는 블록 내에서 사용하는 지역 변수이다.

let은 var와 같은 전역 변수가 아니기 때문에 특정 구간에서만 사용되므로,

특정 함수내에서 주로 실행한다.

let x = 1;
if (x === 1) {
x = 2;
console.log(x); // expected output: 2
}
console.log(x); // expected output: 2

다음 코드를 보면, x = 1이므로 x에 2의 값을 할당하여

console.log()를 실행하여 2의 값이 나오는 것을 확인할 수 있다.

즉 x의 값이 2로 할당된 것이다.​

이와 다르게 다른 방식도 보겠다.

let x = 1;
if (x === 1) {
   let x = 2;
console.log(x); // expected output: 2
}
console.log(x); // expected output: 1

이 코드는 위에 선언된 x의 값을 바꾸는 것이 아니라 if 함수 내

let x 라는 지역변수를 새로 할당하여 값을 표기하는 것이다. 그러므로

제일 위쪽의 let x = 1 이라는 코드에 관여하는 것이 아니므로

블록을 벗어난 코드를 작성했을 경우 출력결과가 1인 것이다.

이러한 점을 들어, var 와 비교해보겠다.

function varTest() {
    var x = 1;
  if (true) {
       var x = 2; // 같은 변수!
       console.log(x); // 2
  }
console.log(x); // 2 }
function letTest() {
    let x = 1;
 if (true) {
    let x = 2; // 다른 변수
   console.log(x); // 2
 }
console.log(x); // 1
}

이제 차이가 보일 것이다.

var 의 경우 전역변수이기에 값이 변경될 때 위의 코드에서 참조하여 값을 재할당하지만,

let 의 경우 지역변수이기에 위의 코드에서 참조할 수 없어 새로운 변수를 만들어야 한다.

​

3. const

const는 상수로서 한번 선언하면 변경되지 않는 수이다. 게다가 const 의 경우 호이스팅의 대상이지만

undefined 로 정의되지 않고 초기화 에러가 발생한다. 다른 변수와 달리

'상수'는 변하지 않기에 차후 할당되지 않으므로 에러를 발생시키는 것이다.

const 의 경우 일반적인 표기방식은 대문자로만 표기하는 것을 관습으로 한다.

 

const MY_NAME = '겨울';
// 재할당
MY_NAME = '가을';
// 출력
console.log("my Name is: " + MY_NAME); // 에러발생

 

위와 같은 코드는 const 는 상수이기에 가을이란 이름을 넣었을 경우 할당이 되지 않는 것이다.

const MY_NAME = '겨울';
if (MY_NAME === '겨울') { // 블록 범위로 지정된 MY_NAME 이라는 변수를 만드므로 괜찮습니다
   let MY_NAME = '가을'; // MY_NAME은 이제 가을입니다
   console.log('my name is ' + MY_NAME);
}

이 방식은 기존의 상수인 const MY_NAME에 대해 간섭하는 것이 아닌,

새로운 지역변수 let MY_NAME 을 만드는 것이므로, 가능한 방식이다.

​자 그럼, 어떤 경우에 var 와 let , const 를 사용하여야 할까?

사실 var를 제외한 let,const는 ES6 에서 새롭게 추가된 것들 이므로,

기존 var의 역할을 대체하기 위해 만들어진 것들이다.​

기존 var 의 단점은 전역변수이면서 어디서나 많이 쓰이는 변수지만, 반대로 어디서나 쓰이기 때문에

디버깅할 때 어떤 변수에서 문제가 발생하는지 찾기 힘들다.

왜냐하면, var 의 경우 중복으로 변수 설정이 가능하여 프로그램 규모가 커질 경우 중복된 변수의 값을

찾기가 쉽지 않기 때문이다.​

또한, 중복으로 설정할 경우 해당 변수에 메모리를 할당하는 과정에 있어서 불 필요한 용량을

차지할 수 있기 때문이다.

그러나 let의 경우 지역변수이지만 중복으로 변수 선언이 불가능하고,

필요시 값의 변경이 가능하기 때문에 코드 가독성 측면과 메모리 관리 관점에서 유용하고,

​const 의 경우 상수지만 전역으로 사용할 수 있기 때문에 자주 사용하는 값을 const로 선언하여

사용하고, 필요시 let 으로 새로운 지역변수를 만들어 사용하는 것이 올바른 메모리 관리에 있어

더 좋은 방법인 것 같다.​

결론 !

그러므로 꼭 필요한 경우가 아니면 var 의 사용은 왠만하면 피합시다!

 

참고자료

​

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var

​

​

​

​

​

​

 

'JS' 카테고리의 다른 글

[JS] Date 함수에 대해서 알아보자  (1) 2025.02.10
[JS] 변수 및 상수에 관한 호이스팅에 대해 알아보자  (0) 2025.02.10
[JS] String(문자열)에 대해 알아보자  (1) 2025.02.10
[JS] null , undefined 타입에 대해 알아보자  (0) 2025.02.10
[JS]천원단위 콤마(,)정규 표현식  (0) 2025.02.10

+ Recent posts

티스토리툴바