[JS] 스코프 간단 정리

이채현

💡 Javascript Scope

전역 스코프 (Global)

• 그냥 가장 바깥쪽
• 언제 어디서나 접근 가능하기 때문에 재정의가 가능하다 ← 큰 문제
  • 그 결과, 프로그램의 실행 결과 때 내가 만든 변수들의 결과를 예측하기 어려워짐 → 팀 단위로 개발할 때 최악

지역 스코프

함수 스코프

블록 스코프

{
// 블록
}

function func() { // 함수 스코프 블록
}

if (true) { // 블록 스코프 블록
}

전역 객체

브라우저

⇒ window

NodeJS

⇒ Global

// this

• 브라우저에서 호출하면 window불러옴

호이스팅 (Hoisting)

function foo() {
    console.log(hoist); // undefined

    var hoist = '호이스팅';

    console.log(hoist); // 호이스팅
}

foo();

• 첫번 째 console.log가 오류나지 않는 이유는
  • 변수 선언을 직접적으로 끌어올림
  • 그래서 위 코드와 아래 코드랑 같다.

  function foo() {
      var hoist; // 1. 변수 선언
      console.log(hoist); // undefined // 2. 실행
  
      hoist = '호이스팅'; // 3. 재할당
      console.log(hoist); // 호이스팅
  }
  
  foo();

애초부터 var를 안쓰면 된다.

function foo() {
    console.log(hoist); // Cannnot access 'hoist' before initialization

     let/const hoist = '호이스팅';

    console.log(hoist); // 호이스팅
}

foo(); // Cannnot access 'hoist' before initialization

• 임시적 사각지대 (TDZ)가 생긴다.
• 내부적으로 호이스팅이 일어나지만, 사용자에게는 보이지 않는것처럼 에러를 준다.

IIFE (즉시 실행 함수 표현)

function func() {

}

func();

==>

(function () {
    
})();

(function (num) {
    console.log(num); // 1
})(1);

함수를 괄호안에 넣고 바로 실행

• 함수 공간을 완전히 분리할 수 있기 때문에 사용한다.
  • 그래서 let/const가 없을 때에 사람들이 외부에서 접근할 수 없게 블록스코프를 흉내내게 사용했다.