var 대신 let과 const 키워드 사용을 지향해야 하는 이유

aksen5240·2024년 9월 12일

목록 보기

12/15

💡 var 대신 let과 const 키워드 사용을 지향해야 하는 이유

javascript에서 변수를 만드는 방법은 ES2015를 기준으로 변화점을 맞았다. 그 중, 가장 큰 변화는 바로 let과 const 키워드의 등장이다. 과연 기존 var키워드의 문제는 무엇일까? 그리고 ES2015에서는 위 문제를 let과 const 키워드 도입을 통해 어떻게 해결하였을까? var과 let/const 키워드를 비교하며 이에 대해 알아보자.

📚 var vs let/const

1. 변수가 유효한 시점의 차이

var 키워드

var 키워드는 변수를 만들기도 전에 사용이 가능한 문제가 존재하였다.

예를 통해 이해를 높여보자. 아래와 같이 변수를 할당하기도 전에 console.log에서 name이라는 변수를 사용하였음에도 불구하고, console창에는 에러가 아닌, undefined값이 출력되는 모습을 확인할 수 있다.

console.log(name)
var name

cf> Hoisting(호이스팅)
스코프 안에 있는 선언들을 모두 스코프의 최상위로 끌어올라가는 현상을 Hoisting이라고 부른다. 위와 같이 코드상에서 선언이 나중에 되었지만, 마치 이 선언이 위로 올라간 듯한 현상이 Hoisting이 나타난 대표적 예이다.

let/const 키워드

let과 const 키워드는 var 키워드의 위와 같은 문제를 해결하기 위해, 변수 선언 이전에 접근을 제한해두었다.

이에, 아래 예와 같은 코드를 실행해보면, ReferenceError: Cannot access 'name' before initialization이라는 에러 메시지가 나타나는 모습을 살펴볼 수 있다.

console.log(name)
const name

2. 중복 선언의 차이

var 키워드

var 키워드의 경우, 중복 선언이 가능하다는 문제가 있다.
아래 예와 같이 name이라는 변수를 두 번 선언하여 코드를 실행하여도, var 키워드를 사용한 경우 에러가 발생하지 않는다.

var name = 'Tags of TT';
console.log(name)   // Tags of TT
var name = 'Tags of TT2'
console.log(name)  // Tags of TT2

let/const 키워드

반면, let/const 키워드는 중복 선언이 불가능하기 때문에, 아래 예와 같이 'name'이라는 변수를 두 번 선언하는 경우 Uncaught SyntaxError: Identifier 'name' has already been declared라는 에러 메시지가 출력되며 에러가 발생하는 것을 살펴볼 수 있다.

let name = 'Tags of TT';
console.log(name)   
let name = 'Tags of TT2'
console.log(name)

cf> 중복 선언이 왜 문제가 될까?
중복 선언은 개발 과정에서 편리하게 보일 수 있지만, 많은 위험성을 품고 있다. 먼저, 변수가 의도치 않게 변경될 가능성이 높다. 또한, 변수의 고유한 의미가 손상될 수 있으며, 해당 변수의 의도와 의미를 퇴색시킬 가능성이 높아진다.

3. 변수의 유효 범위 - 스코프(Scope)의 차이

var 키워드

var 키워드는 변수의 스코프가 함수 단위로만 구분이 된다. 이에, 조건문/반복문 안에서 var 키워드를 사용해 새로운 변수를 만들게 되더라도, 전역 변수로 평가가 된다.

var name = 'Tags of TT';

if (name === 'Tags of TT') {
  var name2 = 'Tags of TT2'
}

console.log(name) // Tags of TT
console.log(name2) // Tags of TT2

이로 인해, 어떤 조건문이나 반복문에서 고유하게 사용할 수 있는 지역변수를 만드는 것에 한계점이 존재하는 문제가 있었다.

let/const 키워드

let/const 키워드는 이와 같은 문제를 해결하기 위해 블록을 기준으로 변수의 스코프를 결정한다.

Javascript에서는 중괄호가 감싸진 블록을 코드 블록이라고 부른다. 이에 let/const 키워드가 블록을 기준으로 스코프가 결정된다는 것은, 중괄호가 사용되는 부분을 기준으로 변수의 유효 범위를 구분하게 된다는 것으로 더욱 쉽게 이해 가능하다.

예를 통해 이해를 더욱 높여보자. 위에 var 키워드에서 사용했던 예시에서, var 키워드를 const 키워드로 대체해보면, name2키워드는 블록 단위인 if문 안에서만 유효함으로, 블록 외부에서 name2에 접근하려고 하였을 때, ReferenceError: name2 is not defined라는 에러 문구와 함께 에러가 뜨는 모습을 살펴볼 수 있다.

const name = 'Tags of TT';

if (name === 'Tags of TT') {
  const name2 = 'Tags of TT2'
}

console.log(name) 
console.log(name2)

📚 Outro

let과 const키워드는 var키워드의 문제들을 해결하기 위해 ES2015 이후에 등장한 변수 선언 키워드이다. 기존 var키워드의 문제점들을 개선하기 위해 등장한 let과 const 키워드는 선언 부분이 호이스팅 되지도 않고, 중복된 이름으로 선언할 수도 없으면서, 코드 블록을 기준으로 스코프를 나누는 특징이 존재한다.

이와 같은 let과 const키워드의 등장은, 에러가 발생했을때 그 원인을 파악하기가 훨씬 수월하다는 장점을 가져다주었다. 따라서 값의 재할당이 필요한 경우에는 let을, 재할당이 필요하지 않은 경우에는 const를 사용하는 방식이 권장된다. let과 const가 제공하는 에러 메시지를 통해 변수를 보다 효율적으로 관리해보자.