자바스크립트에서 사용가능한 변수형에는 3가지가 있다.
ES6 전까진 모두 var로 선언했었고, ES6가 등장하면서 var는 사용하지 않고,
let과 const 사용을 권장한다.
그렇다고 var가 완전히 삭제된 것은 아니다.
그동안 자바스크립트 파일에서 사용된 변수는 모두 var로 생성했기에, 갑자기 var를 삭제하면 감당안될 오류가 쏟아질 것이기 때문이다.
그렇다면 왜 let과 const가 등장했는지와, var와의 차이점을 살펴보자.
스코프
스코프란 간단히 변수에 접근할 수 있는 범위를 의미한다.
JS뿐만 아니라 다양한 언어에서도 적용되는 개념이다.
자바스크립트에는 전역/지역 스코프가 존재한다.
전역(Global Scope)으로 선언한 변수는 코드의 어느 곳에서든지 접근 가능하지만,
지역(Local Scope)으로 선언한 변수는 해당 지역(블록 단위)에서만 접근 가능하다.
아래의 예시를 보자.
var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
var a = 111;
console.log(a);
}
print();
console.log(a);print()를 통해서는 111이 출력된다.
그리고 console.log()를 통해서는 1이 출력된다.
지역 스코프는 전역 스코프보다 우선순위가 높기 때문에,
print()를 통해서는 블록 단위(중괄호 안쪽)에 선언된 지역 스코프를 갖는 111을 불러온다.
하지만 111은 해당 함수 내에서 선언한 값이기 때문에 함수 밖에서는 유효하지 않다.
따라서 console.log()를 통해서는 1이 출력된다.
var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
console.log(a);
}
print();
console.log(a);이렇게 지역 스코프 내에서 찾아봤더니 없으면,
다음 순위인 전역 스코프로 해당 변수를 찾으러 간다.
따라서 위 코드에서는 1이 출력된다.
이를 Scope Chain 이라고 한다.
var / let / const
그렇다면 이 세 선언법의 차이는 무엇일까?
- var
- 함수 스코프만을 갖는다. 즉, 함수 내에서 선언하지 않는다면 전역 스코프를 갖는다.
- 재정의/재선언 모두 가능하다.
- let
- 블록 스코프를 갖는다. 즉, 중괄호만 잘 써주면 제어 가능하다.
- 재정의 O / 재선언 X
- const
- 블록 스코프를 갖는다.
- let의 상수 버전임. 재정의/재선언 모두 불가능
자, 근데 이러면 크게 이유도 없는거 같은데 왜 var를 버린거임? 이라는 의문이 들 수 있다.
아래 예시를 보자.
var name = 'josuncom';
...
var name = 'joeun';
function printName(){
var age = 25;
var name = 'notjoeun';
console.log(name, age);
}
console.log(name);
greet();이 예시에서는 오류가 발생하지 않고 joeun => notjoeun, 25 순으로 출력될 것이다.
name처럼 쉽게 쓸만한 변수를 재정의/재선언 할 수도 있고,
함수 스코프만 갖기 때문에 어마어마한 자유도를 갖는다.
근데 이렇게 오류를 내뱉어야할 때 오류가 나오지 않으면 골치아파진다...
하지만 저 위의 코드를
let name = 'josuncom';
...
let name = 'joeun';
function printName(){
let age = 25;
let name = 'notjoeun';
console.log(name, age);
}
console.log(name);
greet();var 대신에 let을 쓴다면, 오류가 바로 출력돼서, 어느 부분을 고쳐야하는지 알 수 있다.
이 개념은 호이스팅으로도 이어지니까 나중에 이어서 쓰겠다
