자바스크립트 let, var, const 장단점, 차이점, 쓰는 곳

자바스크립트에서 변수를 선언하는 방법으로는 let, const, var 세 가지가 있습니다. 각각의 차이점과 장단점을 알아보겠습니다.

var

var은 ES5까지 사용되던 변수 선언 방법입니다. var로 변수를 선언하면 함수 스코프(function-scoped)를 갖게 됩니다. 이는 해당 변수가 선언된 함수 내에서만 접근할 수 있고, 함수 외부에서는 접근할 수 없다는 것을 의미합니다. 또한 var로 선언된 변수는 중복 선언이 가능합니다.

장점

• 호이스팅(Hoisting)에 대한 개념을 이해하면 변수 선언 전에 사용할 수 있어서 편리합니다.
• ES6 이전의 브라우저에서도 모두 호환됩니다.

단점

• 함수 스코프를 갖기 때문에 블록 스코프(block-scoped)에서는 사용할 수 없습니다.
• 중복 선언이 가능하기 때문에 변수의 값이 예기치 않게 변경될 수 있습니다.
• 전역 스코프(global scope)에서 선언한 변수는 암묵적으로 window 객체의 프로퍼티가 되어 전역 변수의 문제가 발생할 수 있습니다.

let

let은 ES6에서 도입된 블록 스코프(block-scoped) 변수 선언 방법입니다. let으로 변수를 선언하면 해당 변수는 블록 스코프 내에서만 접근할 수 있습니다.

장점

• 블록 스코프를 갖기 때문에 코드의 가독성이 좋아집니다.
• 중복 선언이 불가능하기 때문에 변수의 값이 예기치 않게 변경될 가능성이 줄어듭니다.

단점

• 호이스팅(Hoisting)으로 인한 변수 선언 전 사용 문제가 있습니다.
• 변수의 값이 변경될 수 있기 때문에 상수(Constant)의 개념이 필요합니다.

const

const는 let과 마찬가지로 ES6에서 도입된 블록 스코프(block-scoped) 변수 선언 방법입니다. let과 달리 const로 선언된 변수는 상수(Constant)로 간주되어 재할당이 불가능합니다.

장점

• 값이 변경되지 않아야 하는 변수를 상수(Constant)로 지정하여 코드의 신뢰성을 높일 수 있습니다.
• 재할당이 불가능하기 때문에 실수로 변수의 값이 변경될 가능성이 줄어듭니다.

단점

• 상수(Constant)로 지정되었기 때문에 값의 변경이나 재할당이 불가능하기 때문에 선언과 동시에 초기화해야 합니다.
• 객체나 배열을 상수(Constant)로 선언하면 해당 객체나 배열의 내부 요소는 변경할 수 있습니다.

 

let, const, var 각각의 적절한 사용 시기

• 변수의 값이 변경되는 경우: let을 사용합니다.
• 상수(Constant)로 사용되는 경우: const를 사용합니다.
• var는 호이스팅(Hoisting)으로 인한 문제가 있기 때문에 ES6 이전의 브라우저에서 호환성을 고려해야 할 때나 블록 스코프가 필요하지 않은 경우에만 사용합니다.

// var 예시
function exampleVar() {
  var a = 1;
  if (true) {
    var a = 2;
    console.log(a); // 2
  }
  console.log(a); // 2
}
exampleVar();

// let 예시
function exampleLet() {
  let b = 1;
  if (true) {
    let b = 2;
    console.log(b); // 2
  }
  console.log(b); // 1
}
exampleLet();

// const 예시
function exampleConst() {
  const c = 1;
  // c = 2; // Error: Assignment to constant variable
  const arr = [1, 2, 3];
  arr.push(4);
  console.log(arr); // [1, 2, 3, 4]
}
exampleConst();

 

위 코드에서 var로 선언한 변수 a는 중복 선언이 가능하기 때문에 블록 내에서의 선언이 전역 변수 a를 덮어써서 마지막에는 값이 2가 출력됩니다. 반면 let으로 선언한 변수 b는 블록 스코프를 갖기 때문에 블록 내에서의 선언이 전역 변수 b에 영향을 주지 않아서 값이 1과 2가 출력됩니다. 마지막으로 const로 선언한 변수 c는 상수(Constant)로 간주되어 재할당이 불가능하며, 배열 arr은 const로 선언했지만 배열의 내부 요소는 변경할 수 있습니다.

따라서 변수를 선언할 때는 변수의 사용 용도에 따라 let, const, var 중에서 적절한 것을 선택하여 사용해야 합니다.

 

var, let, const 각각을 좀 더 자세하게 예시와 함께 설명하면 아래와 같습니다.

 

자바스크립트 var 변수 선언(할당) 예시

function exampleVar() {
  var a = 1;
  if (true) {
    var a = 2;
    console.log(a); // 2
  }
  console.log(a); // 2
}
exampleVar();

위 코드에서 변수 a는 var로 선언되어 있습니다. 그리고 if 문 안에서 변수 a를 다시 선언하여 값이 2로 변경되고, 그 다음에 전역에서 다시 변수 a를 출력하면 값이 2로 출력됩니다.

이와 같이 var로 선언한 변수는 블록 스코프를 갖지 않고, 함수 스코프를 갖기 때문에 변수의 중복 선언이 가능합니다. 따라서 var는 변수의 범위를 제어하는 데에 어려움이 있고, 코드의 가독성과 유지보수성이 떨어지는 단점이 있습니다.

 

 

자바스크립트 let 변수 선언(할당) 예시

function exampleLet() {
  let b = 1;
  if (true) {
    let b = 2;
    console.log(b); // 2
  }
  console.log(b); // 1
}
exampleLet();

위 코드에서 변수 b는 let으로 선언되어 있습니다. if 문 안에서 변수 b를 다시 선언하여 값이 2로 변경되었지만, 그 다음에 전역에서 변수 b를 출력하면 값이 1로 출력됩니다.

이와 같이 let으로 선언한 변수는 블록 스코프를 갖기 때문에 변수의 중복 선언이 불가능하며, 블록 안에서 선언된 변수는 블록 밖에서 영향을 주지 않습니다. 따라서 let은 코드의 가독성과 유지보수성을 높일 수 있는 장점이 있습니다.

 

 

자바스크립트 const 변수 선언(할당) 예시

function exampleConst() {
  const c = 1;
  // c = 2; // Error: Assignment to constant variable
  const arr = [1, 2, 3];
  arr.push(4);
  console.log(arr); // [1, 2, 3, 4]
}
exampleConst();

위 코드에서 변수 c는 const로 선언되어 있습니다. 변수 c는 선언과 동시에 값이 할당되어 있으며, 그 이후에 재할당이 불가능합니다. 따라서 c = 2;와 같이 재할당을 시도하면 에러가 발생합니다.

이와 같이 const로 선언한 변수는 상수(Constant)로 간주되어 재할당이 불가능합니다. 그러나 배열이나 객체를 const로 선언하면 해당 배열이나 객체의 내부 요소는 변경할 수 있습니다. 따라서 const로 선언한 변수는 불변의 상태를 유지할 필요가 있는 값에 사용하는 것이 좋습니다.