script - 스코프, 호이스팅

Scope 개념

var : 함수 기반 스코프 (로컬/글로벌 스코프)
let, const : 블록 기반 스코프

if(true){
   var myAge = 31; // global scope
   console.log(myAge);
}

function foo() {
   var foo = 'a' // local scope
}

console.log(myAge);

👉 위처럼var 의 경우 블록 내부 스코프에 선언이 되어있어도 블록 스코프 밖에서도 접근이 가능해 31이 두번 출력됨

if(true){
   let myAge = 31; // block scope
   console.log(myAge);
}

console.log(myAge);

👉 위처럼let, const 의 경우 블록 내부 스코프에 선언이 있으므로 외부에서는 접근 불가능함

const foo = 'a' // block scope
console.log(foo);

👉 위의 foo 변수도 block 스코프임
(글로벌 스코프와 유사하게 행동하는 것임)

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

👉 위의 경우도 i는 let 선언이므로 block 스코프 => 에러 발생함
⚠️ var 인 경우는 10 출력됨

파일간에는 블록스코프가 적용되지 않으므로 파일별로 글로벌하게 선언된 변수들이 다른 파일에 영향을 줄 수 있음

따라서 나온 개념이 모듈화
require, export, import 사용해서 모듈화 및 모듈의 값들을 사용할 수 있게 함

Hoisting 개념

변수의 선언과 초기화 시점 차이로 선언 순서에 상관없이 참조가 가능해지는 것
( ⚠️ hoisting : 감아 올리기라는 뜻 )

foo();

funciont foo(){
   ...
}

위처럼 함수를 선언 방식(declaration)으로 구현하면 호출이 정상 동작함 (반대 : 표현 방식 expression)

var userName = 'max';

function userName () {
   console.log('My username func');
}

console.log(userName)

위의 겨우 max가 출력됨
변수를 초기화하는 선언이 되어있으므로 함수 호출 시점에는 초기화된 값을 참조하게됨.

foo();

const foo = () => {
   ... 
}

위는 함수 표현식으로 구현하였으므로 정상 동작하지 않음

var와 let, const 호이스팅 차이점

• var 의 경우 초기화되지 않은 경우 호이스팅 시도시undefined 를 출력
• let, const 는 초기화되지 않은 경우 호이스팅 시도시 참조 에러 발생함
  👉 es에 추가된 기본 동작

따라서 함수 구현시에 var 사용하지 않아야 에러 발생해 호이스팅으로 인한 버그 잡기 쉽고, 호이스팅 구현 방식 줄일 수 있음