자바스크립트를 심도있게 공부하기 위하여 자료를 찾아 보던중에 정리하기 위해 포스팅한다.

var가 가진 문제

var의 첫번째 문제 : 함수 스코프

var는 함수 스코프, var키워드 없이 변수를 선언하면 전역변수

dfunction example() {
  var i = 1;
}
console.log(i); // ReferenceError: i is not defined

function example1() {
  i = 1;
}

function example2() {
  console.log(i);
}
example1();
example2(); // var 키워드 없이 변수를 선언 하면 전역변수가 된다.

이런 상황에서 명시적 에러가 발생하도록 하려면 파일 상단에 use strict를 선언 하면 된다.

for문을 벗어나도 변수가 사라지지 않는다.

for (var i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i); // 10

for 뿐만 아니라 while문, switch문, if문 등 함수 내부에서 작성되는 모든 코드는 이와 같은 문제를 안고 있다.

var의 두번째 문제 : 호이스팅

정의되지 않은 변수 사용

console.log(myVar);  // ReferenceError: myVar is not defined

변수가 선언된 시점보다 먼저 변수 사용하기

console.log(myVar); // undefined
var myVar = 1;

호이스팅의 결과

var myVar = undefined;
console.log(myVar);  // undefined
myVar = 1;

변수가 정의된 시점보다 먼저 변수에 값을 할당하기

console.log(myVar);  // undefined
myVar = 2;
console.log(myVar);	 // 2
var myVar = 1;

버그처럼 보이는 위의 코드들이 에러없이 사용될 수 있는 것이 단점이다.

var 의 기타 문제들

var변수는 재정의가 가능하다

var myVar = 1;
var myVar = 2;

변수를 정의 한다는 것은 이전에 없던 변수를 생성한다는 의미로 통용된다.

이러한 상황들은 직관적이지 않고, 버그로 이어질 수 있다.

또 다른 문제는 var가 재할당 가능한 변수로 밖에 만들 수 없다는 점이다. 상수처럼 쓸 변수도 무조건 재할당 가능한 변수로 만들어야 한다.

재할당 불가능한 변수(const, let)를 사용할 수 있다면 코드의 복잡도가 낮아지고 가동성은 높아진다.

이러한 var의 문제를 해결하는 const, let

const,let은 블록 스코프다

블록 스코프에서는 블록을 벗어나면 변수를 사용할 수 없다.

if (true) {
  const i = 0;
}
console.log(i);  // ReferenceError: i is not defined

이런 상황에서는 에러가 발생하는 것이 직관적이며 이해하기도 쉽다.

블록 스코프에서 같은 이름을 갖는 변수의 사용

let foo = 'bar1';
console.log(foo);
if (true) {
  let foo = 'bar2';
  console.log(foo);
}
console.log(foo);	// 같은 블록에서 정의된 변수를 참조하므로 'bar1' 출력

const, let에서의 호이스팅

변수가 정의된 시점보다 먼저 변수를 사용할 수 없다.

console.log(foo);  // ReferenceError: foo is not defined
const foo = 1;

이렇게 참조에러가 발생해야 직관적이고 버그를 찾기 쉽다.

const로 정의된 변수만 재할당 불가능

const bar = 'a';
bar = 'b';  // TypeError: Assignment to constant variable.

const로 정의해도 객체의 내부 속성값은 수정가능

const bar = { prop1: 'a' };
console.log(bar);  // { prop1: 'a' }
bar.prop1 = 'b';
bar.prop2 = 123;
console.log(bar);  // { prop1: 'b', prop2: 123 }