자바스크립트 변수 선언 방법과 스코프 – var, let, const의 차이와 사용 사례

자바스크립트 변수 선언

변수 선언 방식과 범위에 대한 이해는 자바스크립트 개발에서 필수입니다.
이 글에서는 자바스크립트에서 변수를 선언할 때 사용하는 명령문(Statement)인 var, let, const의 차이와 각각의 유효 범위(스코프)에 대해 설명하며, 실제 코드 예제를 통해 어떤 상황에서 어떤 변수를 사용해야 하는지 알아봅니다.

자바스크립트 변수에 대한 개요 및 소개

자바스크립트 변수의 중요성과 변수 선언 방법은 개발 과정에서 중요한 역할을 합니다. 간단하게 설명하면 다음과 같습니다.

자바스크립트 변수의 중요성

변수는 데이터를 할당하고 참조하기 위해 사용됩니다. 자바스크립트 변수는 값을 할당하고 해당 값을 다른 부분에서 사용할 수 있도록 해줍니다.
변수를 사용하면 데이터를 유연하게 다룰 수 있으며, 계산, 조건부 로직, 데이터 처리 등 다양한 작업을 수행할 수 있습니다.
변수는 코드의 가독성을 높이고 유지보수를 용이하게 만들어 줍니다. 변수를 사용하면 의도를 명확히 표현하고 코드를 조직화할 수 있습니다.

변수 선언 방법의 역할

변수를 선언할 때 사용하는 명령문(Statement)은 var, let, const 세 가지가 사용됩니다.
var는 오래된 변수 선언 방식으로, 함수 스코프를 가지며 호이스팅 현상이 발생합니다.
let은 블록 스코프를 가지는 블록 레벨 변수를 선언하는 데 사용됩니다. 재할당이 가능하며, 호이스팅은 발생하지 않습니다.
const는 상수로서 값을 할당하는 변수를 선언하는 데 사용됩니다. 한 번 할당한 값을 변경할 수 없으며, 블록 스코프를 가집니다.
변수 선언 방식을 적절하게 선택하면 변수의 범위, 재할당 가능성, 값의 변경 가능성 등을 조절할 수 있습니다.

자바스크립트 변수의 중요성과 변수 선언 방법은 코드의 가독성, 유연성, 유지보수성을 향상시키고 버그를 줄이는 데 도움을 줍니다. 올바른 변수 선언 방식을 선택하여 자바스크립트 코드를 작성하는 것은 좋은 개발 습관의 일부입니다.

`var`, `let`, `const` 의 차이점

아래는 var, let, const의 차이점을 비교할 수 있도록 항목별로 만든 표입니다.

var, let, const의 차이점을 비교할 수 있도록 항목별로 만든 표
비교 항목	`var`	`let`	`const`
선언 방식	var 키워드	let 키워드	const 키워드
선언 예	`var a = variable;`	`let a = variable;`	`const a = variable;`
초기화	상관 없음 `var a;`	상관 없음 `let a;`	반드시 초기화해야 함 `const a = variable;`
유효 범위(스코프)	함수 스코프 (Function scope)	블록 스코프 (Block scope)	블록 스코프 (Block scope)
재선언 가능	동일한 유효 범위(스코프) 내에서 여러 번 재선언이 가능	동일한 유효 범위(스코프) 내에서 중복해서 선언할 수 없음	동일한 유효 범위(스코프) 내에서 중복해서 선언할 수 없음
재할당 가능	가능	가능	불가능 * 재할당이 불가능할 뿐, '불변'을 의미하지 않음. 원시 값이 아닌 객체(참조) 타입의 값은 할당된 값의 변경이 가능함(변수에 할당된 참조 값이 변경된다는 의미는 아님)
`this`와의 바인딩	가능 * 함수 내에서만 가능함	불가능 * 함수 내에서 `this`를 바인딩하기 위해서는 `bind()`, `call()`, `apply()` 메서드 등을 사용해야 함	불가능 * 함수 내에서 `this`를 바인딩하기 위해서는 `bind()`, `call()`, `apply()` 메서드 등을 사용해야 함
호이스팅	발생	발생 안 함	발생 안 함

`var` 변수 선언 방식의 문제점

var 변수 선언 방식은 자바스크립트에서 오래된 방식으로 사용되어 왔습니다.
let과 const가 도입되기 전인 ES5까지 변수의 선언 방식은 유일하게 var 변수 선언 방식 뿐이었습니다. var 변수 선언 방식은 몇 가지 문제점을 가지고 있습니다.

함수 스코프에서의 문제점

var로 선언한 변수는 함수 스코프를 가지며, 함수 내부 어디에서든지 참조할 수 있습니다. 이로 인해 변수의 범위가 예측하기 어렵고, 의도하지 않은 변수 덮어쓰기나 값의 변동이 발생할 수 있습니다.
다음은 var 변수 선언 방식에서 함수 스코프의 문제점을 실제 사례를 통해 설명해드리겠습니다.

JavaScript

function example() {
    for (var i = 0; i < 5; i++) { // var 변수를 사용했습니다.
        setTimeout(function() {
            console.log(i);
        }, 1000);
    }
}

example();

위의 예제에서는 함수 내에서 for문을 사용하여 반복하고, 각 반복마다 setTimeout()을 통해 1초 후에 콘솔에 i 값을 출력하도록 설정했습니다. 하지만 결과는 예상과 다르게 동작합니다.

예상한 결과는 0부터 4까지 순서대로 출력되어야 하지만, 실제로는 5가 5번 출력됩니다. 이는 var로 선언한 변수 i가 함수 스코프를 가지기 때문에, setTimeout()의 콜백 함수가 실행될 때 i의 값이 이미 5로 변경되어 있기 때문입니다.

즉, setTimeout()의 콜백 함수가 실행되는 시점에는 반복문이 이미 종료되었고, i의 값은 5가 되어 있습니다. 그래서 5가 5번 출력되는 결과가 나타나는 것입니다. 이는 함수 스코프로 인해 변수 i가 전역으로 공유되어 의도하지 않은 결과를 초래하는 예시입니다.

이러한 문제는 let이나 const를 사용하여 블록 스코프를 가지도록 변수를 선언하면 해결될 수 있습니다. 이 경우 각 반복마다 새로운 변수가 생성되어 클로저(closure)를 형성하게 되어 예상한 결과를 얻을 수 있습니다.

JavaScript

function example() {
    for (let i = 0; i < 5; i++) { // let 변수를 사용했습니다.
        setTimeout(function() {
            console.log(i);
        }, 1000);
    }
}

example();

중복 선언 허용의 문제점

var로 선언한 변수는 같은 스코프 내에서 중복하여 선언할 수 있습니다. 이로 인해 의도치 않게 변수를 덮어쓰는 문제가 발생할 수 있습니다.
다음은 var 변수 선언 방식의 문제점을 실제 사례를 통해 설명해드리겠습니다.

위의 예제에서는 var 키워드를 사용하여 변수 name을 두 번 선언하고 각각 다른 값을 할당했습니다. JavaScript에서 var로 선언한 변수는 같은 스코프 내에서 중복 선언이 허용됩니다.

결과적으로 첫 번째 선언은 무시되고, 두 번째 선언이 유효하게 됩니다. 이로 인해 변수를 중복으로 선언할 경우 의도치 않게 변수의 값을 덮어쓰게 됩니다. 코드를 읽는 사람이나 유지 보수를 담당하는 개발자에게는 혼란을 줄 수 있는 상황이 발생할 수 있습니다.

협업이 필요한 프로젝트가 있다고 합니다. 중복 선언이 허용되기 때문에, 다른 개발자가 이미 선언한 변수와 동일한 이름을 사용하면 변수의 값이 덮어쓰여질 수 있습니다. 이는 예기치 않은 동작을 초래하고, 의도하지 않은 변수 값 변경으로 인해 버그가 발생할 수 있습니다.

위와 같은 문제점으로 인해 중복 선언 허용은 예기치 못한 오류를 발생시킬 수 있으며, 코드의 가독성과 유지보수성을 저하시킬 수 있습니다. 이를 방지하기 위해 let과 const를 사용하여 변수를 선언하면 중복 선언 문제를 사전에 방지할 수 있고, 코드의 안정성과 가독성을 높일 수 있습니다.

호이스팅이 발생하는 문제점

var로 선언한 변수는 선언부가 스코프 상단으로 끌어올려지는 호이스팅 현상이 발생합니다. 이로 인해 변수 선언 전에 변수를 참조할 수 있게 되는데, 이는 예기치 않은 동작을 초래할 수 있습니다.
다음은 var 변수 선언 방식의 문제점을 실제 사례를 통해 설명해드리겠습니다.

호이스팅(Hoisting)이란 JavaScript에서 변수 및 함수 선언이 스코프의 상단으로 "끌어올려지는" 동작을 말합니다. 즉, 코드의 실행 단계에서 변수나 함수 선언이 실제로 작성된 위치와 상관없이 스코프의 최상단으로 끌어올려지는 현상입니다.
호이스팅은 변수 선언과 함수 선언의 동작에서 약간의 차이가 있습니다. 변수 선언(var)은 선언 단계와 초기화 단계가 분리되어 선언 단계가 끌어올려지는 반면, 함수 선언은 전체 함수가 끌어올려집니다.

위의 예제에서는 변수 name을 선언하기 전에 해당 변수를 출력하려고 시도했습니다. 예상한 결과는 ReferenceError가 발생해야 하지만, 실제로는 undefined가 출력됩니다.

자바스크립트 undefined 값

이는 var 변수 선언 방식에서 호이스팅이 발생하여 변수가 선언되기 전에도 참조할 수 있다는 특징 때문입니다. JavaScript에서 var로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 선언 단계가 최상위로 끌어올려지는 것을 호이스팅이라고 합니다.

위의 예제에서 변수 name은 호이스팅에 의해 선언 단계에서 메모리에 할당되었지만, 초기화 단계에서 값이 할당되기 전이므로 undefined로 초기화됩니다. 따라서 변수를 선언하기 전에도 참조할 수 있지만, 실제로 값이 할당되는 시점은 선언문 이후이기 때문에 undefined가 출력됩니다.

이러한 호이스팅 동작은 코드의 가독성을 저하시키고, 예기치 않은 동작을 초래할 수 있습니다. 변수를 사용하기 전에 선언해야 하는 원칙에 맞게 코드를 작성하고, var 대신 let이나 const를 사용하여 호이스팅 문제를 방지할 수 있습니다.

전역 변수 오염의 문제점

var로 선언한 변수는 전역 스코프에서도 선언할 수 있습니다. 이로 인해 변수의 범위가 예상치 못하게 전역으로 퍼질 수 있고, 다른 스크립트나 라이브러리와 변수 이름 충돌이 발생할 수 있습니다.

JavaScript

var name = "John"; // 전역 변수로 name을 선언

function greet() {
    console.log("Hello, " + name + "!");
}

function changeName() {
    name = "Jane"; // 전역 변수 name의 값을 변경
}

greet(); // "Hello, John!"
changeName();
greet(); // "Hello, Jane!"

위의 예제에서는 전역 변수로 name을 선언하고, 함수 greet()을 통해 해당 변수를 사용합니다. 그리고 changeName() 함수에서는 전역 변수 name의 값을 변경합니다.

문제는 여러 함수에서 전역 변수를 공유한다는 점입니다. changeName() 함수에서 전역 변수 name의 값을 변경하면, greet() 함수에서도 변경된 값을 사용하게 됩니다. 이는 의도하지 않은 부작용을 초래할 수 있습니다.

만약 다른 부분에서도 name이라는 변수를 사용한다면, 변수의 값이 예기치 않게 변경될 수 있으며 코드의 의도와 일치하지 않을 수 있습니다. 특히 큰 규모의 프로젝트에서 다수의 개발자가 함께 작업할 경우, 전역 변수의 오염으로 인한 충돌이 발생할 가능성이 높아집니다.

이러한 문제를 방지하기 위해 var 변수 선언 방식보다는 let이나 const를 사용하여 변수를 블록 스코프로 제한하는 것이 좋습니다. 이렇게 하면 변수의 범위를 명확하게 지정하여 전역 변수의 오염 문제를 방지할 수 있습니다.

요약 및 마무리

각 변수 선언 방식은 다른 유효 범위와 규칙을 가지고 있으며, 적절한 상황에서 사용되어야 합니다. let과 const는 블록 스코프를 지원하고 변수의 범위를 명확히 정의할 수 있어서 코드의 가독성과 유지 보수성을 높이는 데 도움이 됩니다. var는 호이스팅과 중복 선언이 가능하다는 특징으로 인해 예기치 않은 결과를 초래할 수 있으므로 사용에 주의해야 합니다.

자바스크립트 변수 선언 방법과 스코프의 중요성

올바른 변수 선언 방법과 스코프의 이해는 코드의 정확성과 안정성을 보장하는 데 중요합니다.
변수의 범위를 명확히 지정하고, 변수의 충돌을 방지하여 예기치 않은 동작을 방지할 수 있습니다.
스코프를 제어함으로써 변수의 가시성과 생명주기를 관리할 수 있습니다.
변수 선언 방법과 스코프의 올바른 사용은 코드의 가독성, 유지 보수성, 재사용성을 향상시킵니다.
효율적인 변수 관리는 개발자의 생산성을 향상시키고 디버깅을 용이하게 만들어줍니다.

따라서, 변수 선언 방법과 스코프에 대한 이해는 자바스크립트 개발에서 필수적이며, 올바르게 활용함으로써 안정적이고 효율적인 코드를 작성할 수 있습니다.

효율적인 자바스크립를 사용하려면 `var` 변수 선언 방식은 사용하지 마세요!

기본적으로 변수의 선언은 const 선언 방식을 사용하고,
변수에 재할당이 필요한 경우에만 let 선언 방식으로 사용하시기 바랍니다.

ES6 이상의 자바스크립트를 사용하는 경우에는 var 변수 선언 방식을 피하고 let과 const 를 사용하여 변수를 선언하는 것이 좋습니다. 이를 통해 코드의 가독성과 유지 보수성을 향상시키고 변수 관리에 더욱 신중하게 접근할 수 있습니다.

명세서

자바스크립트 변수 선언에 대한 명세서
명세서 사양
`var`	ECMAScript Language Specification #sec-variable-statement
`let`	ECMAScript Language Specification #sec-let-and-const-declarations
`const`	ECMAScript Language Specification #sec-let-and-const-declarations