javascript var, const, let 차이점 +(클로저)

항공데이터 서버 개발을 위해 node.js에서 자바스크립트 언어를 사용해 개발하고 있었다.

예전에 수업들은 기억상 var를 사용해 변수 선언을 하는 것이 떠올라 var로 선언해서 사용했었다.

그러다 개발 과정에서 var를 사용하지말고 let을 사용하라는 것이였다.

상수로 사용할 때는 또 const를 사용했는데...

결국 이 세개에 차이가 정확히 궁금해서 공부해보았다. 

 

우선 자바스크립트에 특징에 대해서 설명해볼까 한다.

다른 언어와 다르게 소스 코드 순서상 아래나 밖에서 사용했지만 어디서든 사용할 수 있는 점이다.

이는 자바스크립트는 변수 선언이 런타임 과정에서 실행되는 것이 아니라 그이전 단계에서 선언 되기 때문이라고 한다.

먼저 선언과 관련된 코드를 찾아내 실행한후 코드를 한줄 씩 순차적으로 읽는것이다.

그리고 이 실행방법을 호이스팅 이라는 용어로 부르는 것 같다.

 

자바스크립트는 이러한 특징으로 var로 사용할시 함수레벨 스코프로 인해 전역변수처럼 변수나 상수를 어디서든 사용할 수 있다.

이러한 점은 코딩을 할 때 헷갈리게 할 수 있다.

그래서 무작정 사용하다간 코드흐름상 undefined 값을 받을수도 있는 것이다.

또한 var는 중복 선언이 가능하여

var name

var name

이러한 식으로 적어도 오류가 나지않는다. 

 

 var의 이러한 점을 해결하기 위해 const와 let 을 사용하는 것이다.

const는 상수라서 선언과 동시에 초기화를 해야하며 재정의를 할 수 없다.

let의 경우는 var의 문제점인 scope내에서만 사용가능, 중복 선언 방지가 가능하며

선언과 초기화단계가 분리되서 진행되기 때문에

선언만 되고 초기화가 되어 있지 않으면 접근할 시 에러가 나게 된다.

 

정리하면 var의 상위호환이 let, const

let 과 const는 각자의 용도에 맞게 사용

var는 사용하지 않는 것이 좋다고 생각하면 될 것 같다.

 

++

var 를 사용할 때에 문제점으로 클로저 이슈가 있다는 사실을 알게 되었다.

클로저는 어떤 함수가 함수 외부에 변수에 접근 하는것을 의미한다.

 

for (var i=0; i<10; i++){
    setTimeout(function(){
        console.log(i);
    }, i*10);
}

위와 같은 코드에서 0~9 까지 나올거라 예상할 수 있다.

하지만 실제로는 10이 10번 나오게 된다.

 

이는 setTimeout 함수로 시간마다 i 값을 출력하기전에

i는 이미 반복문을 마쳐 10이 되었기 때문이다.

 

이러한 문제를 해결하기 위해서는 let을 사용하면 되는 것이다.

 

이러한 클로저는 보통 현재 상태를 기억하고 변경된 최신 상태를 유지하는 데에 주로 사용이 된다.