이전 게시글에서 스코프에 대해 알아보면서 전역 변수에 대한 이야기를 잠깐 했었고 변수 선언 게시글에서도 잠깐 언급했지만 var와 같은 변수 선언 방식은 추후에 의도치 않은 결과를 초래 할 수도 있다고 간략하게 만 짚고 넘어갔었는데, 이번 게시글에서는 var의 문제점과 그걸 해결하기 위해 ES6 이후 등장한 LET 과 CONST에 대해서 설명해보고자 한다.
그 전에 전역 변수와 지역 변수에 대해서 다시 설명하자면 다음과 같다.
- 전역 변수 : 전역 스코프를 갖는 변수 - 프로그램이 종료될 때 까지 자신의 역할이 살아 있다.
- 지역 변수 : 지역 스코프를 갖는 변수 - 일정 스코프 내에서만 작동된다.
그리고 변수 개념 이외에 한 가지 알아두면 좋을 것이 바로 변수 호이스팅이다.
변수 호이스팅이란 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 뜻한다.
⇒ 전역 변수 선언문인 var의 경우 프로그램이 실행되는 동시에 호이스팅 된다.
전역 변수의 경우, 위에서 설명한 것과 같이 전역에서 가용 될 수 있게 하기 위해서 사용하는 것인데, 그럴 경우 다음과 같은 의도치 않은 문제가 생길 수 있다.
✍ 전역 변수의 문제점
📝 암묵적 결합
전역 변수가 선언 된 곳 어디서든 이 변수에 접근 할 수 있기 때문에 (암묵적 결합), 코드의 가독성이 떨어지고 의도치 않게 변수가 재할당 되어 바뀔 수 있다.
📝 긴 생명 주기
전역 변수의 경우 위에서 언급되었듯 프로그램이 종료 될 때 까지 자신의 역할이 살아 있기에, 메모리 리소스도 오랜 기간 소비한다.
📝 스코프 체인 상 종점에 존재
스코프 체인 상 전역 변수는 종점에 존재하기 때문에 전역 변수의 검색 속도가 가장 느리다.
📝 VAR 키워드 한정 중복 선언 및 함수 스코프
전역 변수 선언 키워드 중 하나인 var의 경우 다음과 같이 중복 선언이 가능하며, 블록 스코프도 함수 스코프만 인정을 해 for문과 if문에서 문제가 발생 할 수도 있다.
var x = 100;
// ~~~~ 여러가지 코드 실행 후
------
var x = 10
console.log(x) // 10 / 100은 사라진다. 이러한 전역 변수의 문제점을 보완하기 위해 선언된 전역 변수를 바로 실행하거나, 네임스페이스 객체를 생성하는 방법도 있지만 ES6에 추가된 문법으로 인해 많이 해결되었다.
✍ let~~!
전역 변수 선언 키워드인 var를 대체하기 위해 나온 ES6 문법 중 하나로 다음과 같은 특징을 가진다.
📝 중복 선언 금지
변수를 중복 선언 시 다음과 같은 에러를 발생 시킨다.
let x = 100
let x = 5 // SyntaxError : Identifier 'x' has already been declared📝 블록 레벨 스코프 인정
var와는 다르게 함수, if 문, for 문, while 문 등을 전부 지역 스코프로 인정하여 지역 변수로도 쓰일 수 있다.
{
let example = 10;
}
console.log(example) // exmaple is not defined📝 변수 호이스팅
var와는 다르게 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작하지만 선언은 되었을 뿐, 초기화 단계는 진행 되지 않는다.
⇒ 초기화 단계는 선언 시 진행되지만 실제로 현업에서는 선언 및 할당을 동시에 쓰기 때문에 초기화가 거의 생략된다고 봐도 무방하다.
📝 재할당 가능
let으로 선언된 변수의 경우 재선언은 불가능하지만 재할당은 가능하다.
let x = 100;
x = 50✍ CONST
CONST 선언 키워드의 경우 let 키워드와 거의 동일하기에 차이점만 짚고 넘어 갈 예정이다.
📝 선언과 초기화
const로 선언한 변수는 반드시 선언과 동시에 할당을 해줘야 한다.
📝 재할당 불가능
const로 선언한 변수는 let과는 다르게 재할당이 불가능하다. 한 마디로 constant = const 의 의미 그대로 상수 변수로써 변경이 불가능하다.
이렇게 var 키워드를 대체해서 나온 만큼 추후에 코딩할 일이 생기면 되도록이면 let 과 const 를 사용하도록 하자.
