[06-01] JavaScript 기본 - 2 변수 선언과 스코프

1. JS 변수 선언 방법

: ES6를 기점으로 let , const 추가

	재선언	재할당	호이스팅 시	스코프
var	O : 재선언 시, 덮어쓰기	O	기본 값 할당(undefined)	함수
let	X	O : 가변 변수	초기화 X -> 초기화 전 접근 시, Reference Error	블록
const	X	X : 불변변수	초기화 X -> 초기화 전 접근 시, Reference Error	블록

---

2. 호이스팅(Hoisting)

: JS에서 변수 선언과 함수 선언이 실행 코드가 실행되기 전에 JS 엔진에 의해 최상단으로 끌어올려지는 과정

: 코드에서 변수나 함수를 선언하는 위치와 관계없이 실행 시점에 선언이 끌어올려지는 것

1. 변수 선언과 호이스팅
   • var  : 호이스팅 시, 선언 및 기본 값 undefined 할당, 값의 초기화는 실제 구동 시,
   • const , let : 호이스팅 시, 선언만, 이후 값의 초기화는 실제 구동 시
2. 함수 선언과 호이스팅
   • 호이스팅 시, 선언과 정의가 모두 올라옴
   • But, 함수 표현식(변수에 할당된 함수)에서는 호이스팅 X, 변수와 같이 동작

console.log(foo());  // TypeError: foo is not a function

var foo = function() { // var에 할당된 표현식이므로 호이스팅 시, foo = undefined 
  return "Hello, world!";
};

---

2.1 일시적 사각지대(TDZ, Temporal Dead Zone)

: JS에서 let 과 const 로 선언된 변수가 초기화 되기 전까지 접근할 수 없는 구간을 의미(-> 블록 스코프를 갖기 때문에)

-> 변수 선언은 호이스팅에 의해 최상단에 머물지만, 초기화는 선언문의 실행 전까지는 X

-> 선언문의 실행을 통한 초기화 전에 접근 시, RefercenceError 발생

• 추가적인 이야기
  1. var 는 Compile Phase에서 선언과 초기화(= 기본 값- undefined 할당)
  2. let , const는 Execution Phase에서 초기화(or 할당)

---

3. 스코프(Scope)

: 변수와 함수가 유효한 범위

: 값과 표현식이 표현되거나 참조될 수 있는, 현재 실행되는 컨텍스트

: 계층적 구조이기 때문에 하위에서 상위 계층을 참조는 가능하지만 반대는 X

---

3.1 스코프의 종류 - 1

1. 전역 스코프(Global Scope)
   : 코드 어디서나 접근 가능
   : 모든 함수나 블록의 외부에서 선언
   • WB 환경의 전역 객체(Global Object) :  window
   • WS(Node.js) 환경의 전역 객체 :  global
2. 함수 스코프(Function Scope)
   : 함수 내에서의 선언된 변수/함수는 위치한 함수 내에서만 유효
   : 실행 컨텍스트를 포
3. 블록 스코프(Block Scope)
   : let과 const로 선언된 변수가 가지는 스코프
   : {} 로 둘러쌓인 블럭 내에서만 유효, 이외의 곳에서 접근 X
   : <=> var의 경우 블록을 무시하고 함수나 전역 스코프에서 접근 가능

---

3.2 스코프의 종류 - 2 : 함수 선언에 관한 스코프

// Lexical Scope Ex
let name = "Global";

function outer() {
  let name = "Outer";
  
  function inner() {
    console.log(name);
  }
  inner();
}

outer();  // "Outer" 출력

1. Lexical Scope
   : JS의 기본 스코프 설정 값(정적 - static)
   : 함수가 정의된 위치에서 스코프가 결정
   
   
2. Dynamic Scope
   : 함수가 호출된 위치에서 스코프가 결정

---

3.3 클로저(Closure)

: 함수와 그 함수가 선언될 때의 렉시컬 환경이 결합된 구조(-> 함수 생성 시마다 해당 인스턴스 생성)

: 외부 함수의 스코프에 있는 변수에 대한 내부 함수의 접근을 가능케 하는 개념

function makeAdder(x) {
  return function (y) {
    return x + y;
  };
}

const add5 = makeAdder(5); // add5 = function(y){ return 5 + y }
const add10 = makeAdder(10); // add10 = function(y){ return 10 + y }

console.log(add5(2)); // 7
console.log(add10(2)); // 12

---

3.4 스코프 체인(Scope Chain)

: 변수 위치 탐색 과정

: Execution 중 변수 선언이 안됐을 때, 함수 선언부 이전 실행 컨텍스트에서 변수 탐색

: 기본 값은 위와 같이 Lexical

1. JS에서 해당 변수에 접근할 때, 현재 함수 or 블럭 스코프 내에서 먼저 탐색
2. 없으면 상위 함수의 스코프를 순차적으로 탐색
3. 마지막으로 전역 스코프를 탐색
4. 전역 스코프에 할당된 Global Execution Context 에도 없다면 해당에 var 타입으로 변수 선언 및 할당 ...왜만드는거야!!

---

 

깨알 단어 사전

* 리터럴(Lateral) : 표현된 값 그 자체를 의미

 

---

참조

ASAC 수업내용

 

Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

클로저 - JavaScript | MDN

 

let, const | PoiemaWeb