자바스크립트 변수의 지역 설정 방법
자바스크립트에서 변수를 선언할 때, 변수의 범위(scope)는 매우 중요한 개념입니다. 변수의 범위를 올바르게 설정하는 것은 코드의 가독성과 유지보수에 큰 영향을 미칩니다. 이번 블로그 포스트에서는 자바스크립트에서 변수의 지역(scope)을 설정하는 방법에 대해 알아보겠습니다.
var, let, const
자바스크립트에서 변수를 선언하는 키워드로는 var
, let
, const
가 있습니다. 이들 키워드는 변수의 범위를 결정하며, 지역 변수를 선언하기 위해 사용됩니다.
var
: ES5 버전부터 사용되었으며, 함수 스코프(function scope)를 가집니다. 함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다.
function example() {
var x = 10;
console.log(x); // 10
}
example();
console.log(x); // ReferenceError: x is not defined
let
: ES6 버전부터 도입된 키워드로, 블록 스코프(block scope)를 가집니다. 블록 내에서 선언된 변수는 해당 블록 내에서만 접근할 수 있습니다.
function example() {
if (true) {
let x = 10;
console.log(x); // 10
}
console.log(x); // ReferenceError: x is not defined
}
example();
const
: 역시 ES6 버전부터 도입된 키워드로,let
과 마찬가지로 블록 스코프(block scope)를 가집니다. 하지만const
로 선언된 변수는 상수로 취급되어, 재할당이 불가능합니다.
function example() {
const x = 10;
console.log(x); // 10
x = 20; // TypeError: Assignment to constant variable.
}
example();
함수 내부의 지역 변수
함수 내부에서 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다. 함수 외부에서는 해당 변수에 접근할 수 없습니다. 이는 var
, let
, const
키워드로 지역 변수를 선언함으로써 가능합니다.
function example() {
var x = 10;
console.log(x); // 10
}
console.log(x); // ReferenceError: x is not defined
example();
블록 내부의 지역 변수
함수 내부뿐만 아니라, {}
로 묶인 블록 내에서도 변수의 지역 범위(scope)를 설정할 수 있습니다. 이때 사용되는 키워드는 let
과 const
입니다.
function example() {
if (true) {
let x = 10;
console.log(x); // 10
}
console.log(x); // ReferenceError: x is not defined
for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
console.log(i); // ReferenceError: i is not defined
}
example();
전역 변수와 지역 변수의 충돌
전역 변수(global variable)와 지역 변수(local variable)는 이름이 같을 경우 충돌할 수 있습니다. 이때에는 가장 가까운 스코프에 정의된 변수가 우선적으로 사용됩니다.
var x = 10;
function example() {
var x = 20;
console.log(x); // 20
}
example();
console.log(x); // 10
결론
변수의 지역 범위(scope)를 정확히 설정하는 것은 좋은 코드를 작성하는 데 있어서 중요한 요소입니다. 자바스크립트에서 var
, let
, const
키워드를 사용하여 함수 스코프와 블록 스코프를 활용하여 변수의 범위를 제한할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.