JavaScript- 변수와 스코프

var와 let/const의 차이

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

console.log(title); // undefined
var title = '강아지';

위 코드 실행시 에러가 발생하지 않는다.

(로그는 undefined가 찍힌다. 선언부만 호이스팅되므로)

 

console.log(title); // error
let title;

위 코드는 실행시 reference에러가 발생한다.

let으로 선언된 변수는 에러를 발생시켜서 문제 해결을 쉽게한다.

 

2. 중복선언 가능 여부의 차이

var title = '강아지';
var title = '고양이';

위 코드는 에러가 발생하지 않는다.

중복선언 가능한 것이 왜 문제되냐면,

이 두 줄의 코드 사이에 수많은 코드가 끼어있다는 가정 하에, 두 값 모두 사용되어야하는 상황이 오면, 중복선언시 원래의 값을 잃어버리기 때문이다.

 

let title = '강아지';
let title = '고양이';

위 코드는 syntax에러가 발생한다.

 

3. 변수의 유효범위(scope)의 차이

var

• 함수 스코프를 가진다.
• 함수 단위로만 스코프가 구분되기 때문에 조건문과 반복문에서 사용된 변수들이 모두 전역변수가 된다.
• 심지어 재할당도 가능하니까 처음 작성된 값을 잃어버리기 쉽겠다.

var x = 3;

if(x < 4) {
	var y = 10;
}

for(var i = 0; i < 5; i++){
  var x = i + y;
  
}

console.log(x); // 14
console.log(y); // 10
console.log(i); // 5

let / const

• 블럭 스코프를 가진다.
• 코드블럭(중괄호)단위로 스코프가 구분된다.
• 조건문, 반복문, 코드블럭에서 생성된 변수들은 외부에서 사용불가능하다.