[자바스크립트] - 변수 선언(var, let, const)

kang gicheon·2023년 7월 16일

JavaScript

목록 보기
3/7
post-thumbnail

자바스크립트에서 변수를 선언하는 방식에는 var, let, const 세 가지가 있습니다. 이들의 차이점을 이해하고 올바른 변수 선언 방식을 선택하는 것은 자바스크립트 개발에서 중요한 부분입니다. 이 글에서는 var, let, const의 차이점과 let을 더 많이 사용하는 이유에 대해 알아보겠습니다. 또한, 예시 코드를 통해 개념을 명확히 이해할 수 있도록 하겠습니다.

var

var는 ES5 이전의 자바스크립트에서 사용되던 변수 선언 키워드입니다. var로 선언된 변수는 함수 스코프를 가지며, 호이스팅(hoisting)이 발생합니다. 호이스팅은 변수 선언문을 해당 스코프의 맨 위로 끌어올리는 동작을 말합니다. 또한, var로 선언된 변수는 중복 선언이 허용되며, 값의 재할당이 가능합니다.
예시 코드:

javascript
Copy code
function example() {
  var x = 10;
  if (true) {
    var x = 20; // 동일한 변수 x를 재선언
    console.log(x); // 출력: 20
  }
  console.log(x); // 출력: 20
}

example();

let

let은 ES6에서 도입된 블록 스코프를 가지는 변수 선언 키워드입니다. let으로 선언된 변수는 중복 선언이 허용되지 않으며, 블록 내에서만 유효한 범위를 가집니다. 또한, 호이스팅은 발생하지 않습니다. let은 var와 비교하여 더 엄격한 변수 선언 규칙을 가지고 있으며, 가독성과 유지보수성을 향상시킵니다.
예시 코드:

javascript
Copy code
function example() {
  let x = 10;
  if (true) {
    let x = 20; // 새로운 변수 x를 선언
    console.log(x); // 출력: 20
  }
  console.log(x); // 출력: 10
}

example();

const

const는 상수를 선언하는 키워드로, let과 마찬가지로 블록 스코프를 가집니다. const로 선언된 변수는 재할당이 불가능하며, 선언과 동시에 초기화해야 합니다. const는 객체나 배열의 경우에도 재할당이 불가능하지만, 객체나 배열 내부의 속성이나 요소는 변경할 수 있습니다.
예시 코드:

javascript
Copy code
function example() {
  const x = 10;
  if (true) {
    const x = 20; // 새로운 변수 x를 선언
    console.log(x); // 출력: 20
  }
  console.log(x); // 출력: 10
}

example();

+) let의 선호 이유

let은 블록 스코프를 가지고 있으며, 호이스팅이 발생하지 않기 때문에 변수의 범위와 생명 주기를 명확하게 파악할 수 있습니다. 또한, 중복 선언을 방지해주기 때문에 실수로 같은 이름의 변수를 재사용하는 문제를 방지할 수 있습니다. 이러한 이유로 let은 가독성과 유지보수성을 향상시키는 데에 더 적합한 변수 선언 방식입니다.

자바스크립트에서 변수를 선언할 때는 var, let, const 중 어떤 키워드를 사용할지 결정해야 합니다. var는 호이스팅과 중복 선언을 허용하는 반면, let과 const는 블록 스코프를 가지며 중복 선언이 불가능합니다. let은 var보다 엄격한 규칙을 가지고 있고, 가독성과 유지보수성을 향상시키기 때문에 더 많이 사용됩니다. 앞으로는 let을 활용하여 변수를 선언하는 것을 권장합니다.

profile
느리지만 깊게 개발을 공부합니다

1개의 댓글

comment-user-thumbnail
2023년 7월 17일

저도 개발자인데 같이 교류 많이 해봐요 ㅎㅎ! 서로 화이팅합시다!

답글 달기