변수 선언 : var, let, const

💫 var, let, const 차이점

1. 중복선언
2. 재할당
3. 스코프(scope)
4. 호이스팅(Hoisting) : 코드를 실행하기 직전에, 모든 선언문은 해당 스코프의 최상단으로 끌어올려져 동작하는 것 > 코드를 재배치함
5. 전역객체 프로퍼티 : 어디서나 사용할 수 있는 변수나 함수를 만들 수 있음

💫 스코프(Scope)

• 식별자(ex. 변수명, 함수명, 클래스명 등) 접근 규칙에 따른 유효범위
• 범위는 중괄호(블록) 또는 함수에 의해 나눠진다. > 그 범위를 스코프라고 부른다.
• 그래서 각각을 Block Scope와 Function Scope라고 부른다.
• 화살표 함수는 함수 스코프가 아니다.

🌞 스코프의 주요 규칙

👉 규칙1. 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만 반대는 불가능하다.

• 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용 가능하다.
• 반면, 안쪽에서 선언한 식별자는 바깥쪽 스코프에서는 사용할 수 없다.

👉 규칙2. 스코프는 중첩이 가능하다.

• 스코프는 마치 중첩된 울타리와도 같다.

👉 규칙3. 전역 스코프와 지역 스코프

• 가장 바깥쪽의 스코프를 전역 스코프(Global Scope)라고 부른다.
• 전역이 아닌 다른 스코프는 전부 지역 스코프(Local Scope)이다.

👉 규칙4. 지역 변수는 전역 변수보다 우선순위가 더 높다.

💫 var

• ES6 이전
• 상수 선언 불가능

1. 중복선언 O
2. 재할당 O
3. 스코프(scope) : function-scope
4. 호이스팅(Hoisting) : undefined로 변수를 초기화
5. 전역객체 프로퍼티 : 전역객체(브라우저 환경에서 window)의 프로퍼티(속성)로 할당

// foobar함수 내부에서 선언된 foo변수는 함수 내부에서만 선언이 가능하며, 
// 외부에서 선언 시 에러가 발생한다.
function foobar() {
		var foo = 5;
		console.log(foo);
}

foobar();   // 5

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

// 함수를 제외한 영역에서 var로 선언한 변수는 전역변수로 간주된다. 
if(true) {
		var a = 5;
		console.log(a); // 5
}

console.log(a);  // 5

💫 let

• ES6

1. 중복선언 X
2. 재할당 O
3. 스코프(scope) : block-scope
4. 호이스팅(Hoisting) X
5. 전역객체 프로퍼티 X

// 모든 코드 블록(함수, if문, for문, while문 등)에서 선언된 변수를 지역변수로 인정한다.
let hello = 1;

{
    let hello = 10;
    let world = 20;
}

console.log(hello);    // 1
console.log(world);    // ReferenceError: world is not defined

if(true) {
    let hello = 123;
    console.log(hello);    // 123
}

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

💫 const

• ES6
• 상수 선언(final)

1. 중복선언 X
2. 재할당 X : 내용물 변경은 가능하다.
3. 스코프(scope) : block-scope
4. 호이스팅(Hoisting) X
5. 전역객체 프로퍼티 X

// 블록 내에서 변수가 선언되었기 때문에 지역변수의 개념으로 인정된다. 
// 해당 변수는 block 내에서만 유효하며, 외부에서 접근(=참조)할 수 없는 상태가 된다.
if(true) {
    let hello = 123;
    console.log(hello);    // 123
}

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

💫 var, let, const 정리

	중복선언	재할당	스코프 (Scope)	호이스팅 (Hoisting)	전역객체 프로퍼티
var	가능	가능	함수레벨 스코프 (Function-level)	호이스팅 시 undefined로 변수 초기화 (호이스팅 수행)	할당
let	불가능	가능	블록레벨 스코프 (block-level)	선언 단계-TDZ-초기화 단계-할당 단계로 분리되어 진행 (호이스팅 수행)	undefined
const	불가능	불가능	블록레벨 스코프 (block-level)	초기화 이전 접근 시 ReferenceError발생 (호이스팅 수행)	undefined

참고 자료
🔗 JavaScript 핵심 개념
🔗 JavaScript 스코프(Scope)