var, let, const(변수 선언 방식, scope, 호이스팅)

변수 선언 방식 요약

구분	중복 선언	재할당	scope	호이스팅
var	O	O	함수 레벨 스코프 (function-level scope)	초기 값 undefined 할당한 것을 호이스팅한 후 해당 코드에서 작성한 값 할당
let (ES6)	X	O	블록 레벨 스코프 (block-level scope)	호이스팅시 초기값 할당 X
const (ES6)	X	X	블록 레벨 스코프(block-level scope)	호이스팅시 초기값 할당 X

var

• 중복 선언과 재할당이 가능하며 마지막에 할당된 값이 변수에 저장된다.
• 이런 특징으로 자율성이 생기만 어떤 부분에서 값이 변경되었는지 파악하기 힘들어지게 될 수있다.
  

    var greeting = 'hello';
    console.log(greeting);  // hello
    
    var greeting = 'hi';
    console.log(greeting);  // hi
    
    greeting = 'how are you?';
    console.log(greeting);  // how are you?

• function-level scope
  • 함수 내에서 선언된 변수는 함수 내에서만 유효하다.
  • 함수 내에서는 블록 내외부에 관계 없이 유효하다.
  • 함수 외부에서는 참조 할 수 없다.

    function func() {
      if (true) {
        var a = 'a';
        console.log(a); // a
      }
      console.log(a); // a
    }
    
    func();
    
    // console.log(a); // ReferenceError: a is not defined

let

• 중복 선언 불가, 재할당 가능
• block-level scope
  • 함수 , if문, for문 등의 모든 코드 블록 내부에서 선언된 코드 블록 내에서만 유효
  • 코드 블록 외부에서는 참조할 수 없다.

// 중복 선언 불가, 재할당 가능
let greeting = 'hello';
console.log(greeting);  // hello

// let greeting = 'hi';  // 오류 발생 : 중복 선언 불가

greeting = 'how are you?';
console.log(greeting);  // how are you?

function func() {
  if (true) {
    let a = 'a';
    console.log(a); // a
  }
  // console.log(a); // ReferenceError: a is not defineds
}

func();

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

const

• 중복 선언 불가, 재할당 가능
• block-level scope

// 중복 선언 불가, 재할당 불가
const greeting = 'hello';
console.log(greeting);  // hello

const greeting = 'hi';  // 오류 발생 : 중복 선언 불가

greeting = 'how are you?';  // 오류 발생 : 재할당 불가
console.log(greeting);  // how are you?

호이스팅(Hoisting)

• 호이스트(Hoist)의 뜻은 무언가를 들어 올리거나 끌어 올리는 동작을 설명합니다.

• 자동차를 강에서 올린다(Hoist)라고 할 수 있습니다.

• JS에서 호이스팅은 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우를 설명한다.

var 선언문 호이스팅

• 위로 호이스팅되고, undefined 값 할당

console.log(greeting);  // undefined
var greeting = 'hello';

• 위의 예에서 콘솔로그에 undefined가 반환되는 이유는 호이스팅 때문이다.
• JS 인터프리터는 변수 생성의 선언(var greeting) 단계 및 할당(= ‘hello’) 단계를 분할한다.
• 선언 부분은 코드가 실행 되기 전에 현재 범위의 맨 위로 호이스팅되고 초기에 undefined 값이 할당 된다.
• 즉, 초기화 되기 전에 greeting 변수를 사용할 수 있다.

함수 선언문 호이스팅

• 함수 선언전에 호출하면 올바로 출력이 된다.

func(); // hoisting test

function func() {
  console.log('hoisting test');
}

let / const 선언문 호이스팅

• let 또는 const로 변수를 선언하면 실제로 변수는 여전히 호이스팅 된다.
• var 와 차이점은 var는 실제 할당 값이 할당되기 전까지 undefined 값이 할당 된다.
• 하지만 let / const 는 변수 초기에 어떤 값도 할당되지 않는다.
  • 초기화 되지 않음

console.log(greeting);  // ReferenceError: Cannot access 'greeting' before initialization
let greeting = 'hello';