[JS] - 스코프 (scope)

Scope ?

🌟 각 상수나 변수 등의 요소들이 허용된 영역, 범위

• 변수의 접근성을 관리하는 개념이며, 전역 (global) 과 지역 (local), 2개의 범위가 존재한다

1️⃣ 전역 (global) 스코프

• 변수가 전역 범위에서 선언된 경우
• 어떤 블록에서도 접근이 가능하다

let name = "hyelin"; 
function print(){
	console.log(name); // hyelin
}
print();
console.log(name); // hyelin

• name 이라는 전역 변수를 선언
• print 함수 블록 안에서 출력한 값과 블록 바깥에서 출력한 값이 동일하게 나온다
  👉🏻 전역 스코프로 선언된 변수는 모든 범위에서 사용 가능하다

2️⃣ 지역 (local) 스코프

• 블록 내부에서 변수가 선언된 경우
• 따라서 블록 내부에서만 접근이 가능하다

const color = 'blue'
const returnColor = () => {
  const color = 'red'
  return color;
};
console.log(returnColor()); // red

• 전역 변수가 따로 있지만, 가장 가까운 변수를 따르기 때문에 함수 내부에 있는 선언 값을 출력
• 만약 함수 내에 변수가 없으면, 전역에서 변수를 찾는다
• 따라서 되도록이면 전역 변수를 지양하고 지역 변수를 사용하는 것이 좋다
  👉🏻 전역 변수는 어디서나 접근이 가능하고, 수정할 수 있기 때문에

🌟 전역 변수를 최소한으로 사용하는 방법

1️⃣ 전역 변수 객체를 만들어 사용

const MYAPP = {};

MYAPP.student = {
  name: 'Lee',
  gender: 'male'
};

console.log(MYAPP.student.gender);

2️⃣ 즉시실행함수 (IIFE, Immediately-Invoked Function Expression) 사용

• 이 방법을 사용하면 전역 변수를 만들지 않고, 함수가 즉시 실행된 후 전역에서 바로 사라진다

3️⃣ 함수 스코프

• 기본적으로 자바스크립트는 함수 스코프를 따른다.
• 새로운 함수가 될 때마다 새로운 스코프가 생긴다는 것을 의미한다.

if (true) {
  var num = '12345';
}

num; // '12345'

• 위 코드와 같이 함수 선언을 하지 않으면 새로운 스코프가 생기지 않는다.
• 스코프가 형성되지 않으므로, 글로벌 실행 컨텍스트에 존재하기 때문에 어디에서나 num 이라는 변수에 접근이 가능하다

• 실행 컨텍스트 (context) : 코드가 실행되기 위한 환경. 함수가 호출 될 때마다 생성된다
  
  

function newNum () {
  var num = '12345';
}

num; // error

• 함수 안에서 정의된 변수들은 그 함수 안에서만 접근이 가능하다

4️⃣ 블록 스코프

• 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 해당 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.
• 코드 블록 내부에서 선언한 변수는 지역 변수이다
• let, const로 선언된 변수가 블록 스코프 방식을 따른다.

function myName () {
// "if" block scope

    let name = "hyelin";
    console.log(name); // "hyelin"
}

// console.log(name)

if (true){
// "if" block scope
    const name = "hyelin";
    console.log(name); // "true"
}

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

Lexical Scope

• 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다.
• 자바스크립트는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다. 함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미를 주지 않는다.
• 함수가 중첩되어 있을 시, 내부 함수에 호출 대상이 없다면 상위스코프에서 찾는다. (스코프 체인 특성)

const variable = 'world';
function A(){     
  const variable = 'test';       
  B();
}
function B(){     
  console.log(variable);
}
A();

//output = 'world'

Scope Chain

• 자바스크립트 엔진은 변수(식별자)를 찾을 때 일단 자신이 속한 스코프에서부터 찾아보고, 그 스코프에 찾는 변수가 없으면 상위 스코프를 타고 올라가며 차례차례 찾아 나간다
  👉🏻 이를 스코프 체인 이라고 한다
• 스코프가 중첩되어있는 모든 상황에서 발생한다.

📌 단, 상위 스코프에서 하위 스코프에 선언된 변수로는 접근할 수 없다
- 실행문의 위치를 기준으로 하위 스코프부터 시작하여 원하는 값을 찾을 때까지 상위 스코프를 타고 올라가며 탐색해나가는 것이 Scope Chain의 가장 기본적인 작동방식