JavaScript 변수 선언 위치, 반복문 밖 vs 안? var와 let의 스코프 차이 완벽 이해

JavaScript 변수는 반복문 외부에 선언해야 할까?

ECMAScript(JavaScript)는 var 키워드로 선언된 모든 변수를 함수의 최상단으로 끌어올리는 호이스팅(hoisting) 특성을 가지고 있습니다. 그 이유는 JavaScript가 많은 C 계열 언어와 달리 블록 스코프(block scope)가 아닌 함수 스코프(function scope)를 사용하기 때문입니다.

var로 선언한 경우

function() {
    for(var a = 0; a < 7; a ++) {
        var b = 100;
    }
}

위 코드는 사실 아래 코드와 완전히 동일하게 동작합니다.

function() {
    var b;
    for(var a = 0; a < 7; a ++) {
        b = 100;
    }
}

즉, var로 선언된 변수 b는 반복문 내부에 작성되었더라도 실제로는 함수 시작 부분으로 호이스팅되어 함수 전체에서 접근 가능합니다. 따라서 var를 사용할 때는 반복문 안과 밖 어디에 선언하든 결과에는 차이가 없습니다.

let으로 선언한 경우

반면 ES6(ES2015)에서 도입된 let은 상황이 다릅니다. let은 렉시컬 스코프(lexical scoping), 즉 블록 스코프를 따르기 때문에 선언된 중괄호({}) 블록 내에서만 유효합니다.

따라서 다음 두 경우를 제외하고는 변수를 실제로 사용되는 범위 내에서 선언하는 것이 바람직합니다.

• 반복문 종료 후에도 동일한 변수를 루프 외부에서 사용해야 하는 경우
• 각 반복(iteration)이 이전 반복에서 해당 변수에 수행한 연산 결과에 의존하는 경우

정리

• var: 함수 스코프 + 호이스팅 → 선언 위치와 무관하게 함수 전체에서 접근 가능
• let(및 const): 블록 스코프 → 필요한 블록 내에서 선언하는 것이 가독성과 유지보수 측면에서 유리

현대 JavaScript 개발에서는 예측 가능한 스코프 관리를 위해 var 대신 let과 const를 사용하는 것이 일반적인 권장 사항입니다.