[JS] 변수 선언 var와 let의 차이점, 호이스팅 및 중복 선언 등 - 자바스크립트

자바스크립트에서 변수를 선언하기 위해 let과 var 키워드를 사용할 수 있습니다. 그러나 이 둘은 몇 가지 중요한 차이점을 가지고 있습니다. 이 글에서는 let과 var의 개념과 차이점, 그리고 var 사용을 피해야 하는 이유에 대해 알아보겠습니다.

자바스크립트 변수 선언 var , let 차이점

let과 var는 모두 변수를 선언하는 데 사용되는 키워드입니다. 그러나 이 둘은 변수의 유효 범위, 호이스팅, 중복 선언 등의 측면에서 차이가 있습니다. let과 var의 차이점과 var 대신 let을 써야하는 이유에 대해서 알아보겠습니다.

 

let과 var의 차이점

유효 범위

let과 var는 유효 범위에서 차이가 있습니다. 아래 코드를 살펴보겠습니다. 

// 예시 1: 유효 범위(Scope) 비교
function example1() {
  if (true) {
    var x = 10; // 함수 범위 변수
    let y = 20; // 블록 범위 변수
  }
  console.log(x); // 출력: 10
  console.log(y); // 에러: y는 접근 불가
}

위에서는 var로 선언한 x와 let으로 선언한 y가 있습니다. 두 변수 모두 if 문 블록 안에서 선언되었는데 var로 선언된 x는 블록 외부에서도 사용이 가능하고, let으로 선언된 변수 y는 블록 밖에서는 사용이 불가능합니다.

 

이는 var를 사용하여 변수를 선언하는 것은 함수 범위이고, let으로 선언하는 것을 블록 범위이기 때문.

 

var의전역 객체 연결

var로 선언된 변수는 전역 객체에 속하게 됩니다. 브라우저에서는 window 객체를 전역 객체로 사용하며, Node.js에서는 global 객체를 전역 객체로 사용합니다. 따라서 var로 선언된 변수는 해당 전역 객체의 프로퍼티로 취급됩니다.

let의 전역 객체 연결 비교

반면에 let으로 선언된 변수는 전역 객체와 연결되지 않습니다. 이는 변수가 스코프에 종속되어 전역 객체에 직접적으로 접근할 수 없다는 의미입니다. 이를 통해 전역 변수의 남발을 방지하고 코드의 격리성을 높일 수 있습니다.

---

호이스팅

호이스팅(Hoisting)은 원래라면 변수를 선언하고 그 변수를 호출하는 순서가 일반적이지만, 호이스팅은 선언과 호출의 순서가 바뀌어도 동작하도록 지원하는 기능입니다.

// 예시 2: 호이스팅(Hoisting) 비교

// 1.
console.log(a); // 출력: undefined
var a = 10; // 변수 선언이 호이스팅되어 선언 이전에 접근 가능


// 2.
console.log(b); // 에러: b는 접근 불가
let b = 20; // 변수 선언이 호이스팅되지 않아서 선언 이전에 접근 불가

 

var로 선언된 변수는 호이스팅에 의해 선언 부분이 상단으로 끌어올려지기 때문에 코드의 흐름을 파악하기 어려울 수 있습니다. 또한 변수의 스코프가 함수 단위로 제한되기 때문에 코드의 의도를 명확하게 전달하기 어려울 수 있습니다. let을 사용하면 변수의 유효 범위를 블록 단위로 제한하여 가독성을 향상시킬 수 있습니다.

---

중복 선언

let으로 선언된 변수는 같은 스코프 내에서 중복해서 선언할 수 없습니다. 이미 같은 이름의 변수가 선언되어 있는 경우 에러가 발생합니다. 반면에 var로 선언된 변수는 같은 이름으로 여러 번 선언할 수 있습니다.

// 예시 3: 중복 선언 비교
function example3() {
  var x = 10;
  var x = 20; // 중복 선언 가능
  let y = 30;
  let y = 40; // 중복 선언 시 에러 발생
}

위 코드를 실행하면, var를 통해서 선언하는 것은 같은 이름 변수를 중복으로 선언하는 것이 허용되지만, let으로는 중복으로 선언되지 않습니다.

 

중복 선언이 허용된다면 변수의 값이 예기치 않게 변경될 수 있다는 의미가 됩니다. 반면에 let으로 선언된 변수는 재할당을 제한하여 변수의 상태를 더욱 안정적으로 유지할 수 있습니다.

---

var 대신 let을 사용해야 하는 이유

코드의 유지보수성이나 가독성을 위해서 var 보다는 let을 사용하는 것이 더 좋습니다. 위에서는 차이점으로 소개했지만 사실상 단점이나 다름없기 때문에 var 보다는 let을 사용하는 것을 추천드립니다.

 

질문과 답변
Q1. let과 var 중 어떤 것을 사용해야 할까요?
A1. 일반적으로 let을 사용하는 것이 좋습니다. let은 블록 범위를 가지고 있고 호이스팅 문제를 방지할 수 있어 코드의 유지보수성과 가독성을 높일 수 있습니다.

Q2. var를 사용하면 어떤 문제가 발생할까요?
A2. var는 함수 범위를 가지고 있고 호이스팅이 발생하기 때문에 변수의 접근 범위와 코드의 가독성이 저하될 수 있습니다. 또한 중복 선언이 가능하고 전역 객체와의 연결로 인해 의도치 않은 변수 변경이 발생할 수 있습니다.

Q3. let과 var의 호환성은 어떤가요?
A3. let과 var는 모던한 자바스크립트에서 모두 지원됩니다. 하지만 var는 과거 버전의 자바스크립트에서 주로 사용되었으며 호환성 문제가 있을 수 있으므로, 가능하면 let을 사용하는 것이 좋습니다.

---

함께 보면 좋은 글

ChatGPT의 장점과 단점 그리고 앞으로의 발전 방향은?

어쌔신 크리드 미라지 플레이타임, 맵 사이즈, 특징 자세히 알아보자