var, let, const

var의 문제점

• var는 중복 선언이 가능하다.

var x = 1; // 변수 선언

var x = 100;

console.log(x); // 100 // 먼저 선언 된 변수 값이 변경 되는 부작용.

• 함수 레벨 스코프 - 함수 외부에서 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.

var x = 1;

for(var i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

console.log(i) // 4

• 변수 호이스팅 발생 - 렉시컬 환경에 의해 변수 식별자를 등록한다. 그래서 변수 선언문 이전에 변수 참조가 된다. var는 암묵적으로 “선언 단계", “초기화 단계"가 한번에 진행 된다.

// q변수 호이스팅에 의해 foo 변수 선언 (선언 단계)
// 선언, 초기화 단계 한번에 진행
console.log(x); // undefined

// 할당
x = 123;

console.log(x);

// 런타임 이전에 식별다 등록
var foo;

let 키워드

• 중복 선언을 허용하지 않는다.

let x = 123; 

let x = 44; // syntax error 중복 선언 허용 x

• 블록 레밸 스코프

// var
function foo() {
  var i = 100;

  for (var i = 0; i < 3; i++) {
     console.log('for loop', i);
  }

  console.log('i is ', i);
}

foo(); // i is 2 
// 함수 레밸 스코프 : 함수 외부에서 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다. 

// let
function foo() {
  let i = 100;

  for (let i = 0; i < 3; i++) {
    console.log('for loop', i);
  }

  console.log('i is', i);
}

foo(); // i is 100
// 블록 레밸 스코프 : 코드 블록을 지역 변수(지역 스코프)로 인정 한다.

• 변수 호이스팅이 발생하지 않는다. let 키워드는 “선언 단계", “초기화 단계" 분리되어 진행 된다. 변수 선언 이전에 변수에 접근하려고 하면 참조 에러가 발생한다.

console.log(foo) // referenceError 참조 에러 발생

let foo; // 변수 선언 → 변수 접근

// 모든 선언(let, cons, class 등등)은 호이스팅이 발생하지만,
// 호이스팅이 발생하지 않는 것처럼 동작한다. 

const 키워드

• 선언과 초기화

const foo = 1; // 동시에 선언, 초기화

const foo; // syntaxError

• 재할당 금지

const x = 1; // immutable value 변경 할 수 없는 값

x = 2; // typeError

// TIP : 일반적으로 상수의 이름은 대문자로 선언해 상수임을 명확히 한다.
const TAX_RATE = 0.1;
let preTaxPrice = 100;
let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE); 

• 블록 레밸 스코프, 변수 호이스팅 x
• 객체의 경우, 값은 변경 할 수 있음. 재할당은 불가하지만, “프로퍼티 동적 생성, 삭제, 프로퍼티 값의 변경”을 통해 객체를 변경하는 것은 가능하다.

const person = {
  name: 'Sally'
};

// 객체 변경 가능
person.name = 'kiko';

console.log(person); // {name: 'kiko'}

실무 적용

• 변수 선언문에는 재할당이 필요한 경우에 let을 사용. 변수의 스코프는 최대한 좁게 만든다
• 원시 값과 객체는 const 키워드를 사용한다.

Quiz

• var, let, const에 대해 설명 해주세요.
• a와 b는 console에서 어떻해 나올까요?

let a;
console.log('a', a); 
a = 1;

var b;
console.log('b', b);
b = 3;

let a;
console.log('1번 문제', a); // 선언이 되었으며, 초기화 단계로 undefined
a = 1;
console.log('2번 문제', a); // 할당 이후 참조로 1
a = 1;
console.log('3번 문제', a); // 재할당 1 
console.log('4번 문제', b); // 선언/초기화 등록으로 undefined
var b;
console.log('5번 문제', b); // undefined
b = 1; 
console.log('6번 문제', b) // 1

그 외 용어

코드 블록: “함수, if, for, while, try/catch” 이다.

일시적 사가지대: 선언 단계, 초기화 단계까지 변수를 참조할 수 없는 구간.

let x; // 변수 선언문에서 초기화 단계 실행
console.log(x); // undefined
x = 1; // 할당 단계
console.log(x); // 1