[04.27] Scope & Closures

목차

• Scope
• Closures

---

📌 스코프(Scope)

: 변수에 접근할 수 있는 범위!/ 변수 접근 규칙에 따른 유효 범위

• 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능!
  [예시 : greeting 변수는 바깥에 정의되어 있으므로 함수 안쪽에서 사용 가능]
  

• 안쪽 스코프에서 선안한 변수는 바깥쪽 스코프에서 사용 불가능!
  [예시 : firstName 변수는 함수 안쪽에 정의되어 있으므로 접근 불가능 (ReferenceError)
  
  

스코프의 규칙

1. 안쪽 스코프에서 바깥쪽 스코프로는 접근 O/ 반대(바깥쪽→안쪽)는 불가능
2. 중첩이 가능
   1. Local scope(지역 스코프)에서 선언한 변수 = Local 변수
   2. Global scope(전역 스코프)에서 선언한 변수 = Global 변수
   

스코프의 종류

1. 블록 스코프 (block scope) : 중괄호 기준으로 범위가 구분
   
   [예시]
   1) 블록스코프 안에서 정의된 변수 i는 블록 범위를 벗어나게 되면 접근 x
   
   2) 1번의 선언을 let 대신 var를 이용하면 출력이 됨
   ⇒ var 키워드는 for문이 만들어낸 블록 스코프를 무시
   

2. 함수 스코프 (function scopt) : function 키워드가 등장하는 함수 선언식 및 함수 표현식
   ❗️ 화살표 함수는 블록 스코프로 취급
   

3. var,let,const 키워드
   - var : 블록 스코프를 무시하고, 함수 스코프만 따름/ 화살표 함수의 블록스코프는 무시 x
   - let : 블록 단위로 스코프를 수분햇을때는 훨씬 더 예측이 가능한 코드를 작성할 수 있음 (재선언을 방지)
   - const(상수) : let키워드와 동일하게 블록스코프를 따름/
   재할당이 불가능 ⇒ 의도치 않은 값의 변경을 막을 수 있음

변수선언시 주의

1. 전역 변수 최소화
   - 전역변수 : 어디서든 접근 가능한변수
   → 편리하지만 다른 함수 혹은 로직에 의해 의도되지 않은 변경이 발생할 수 있음 (side effect) 발생
   💡side effect : 모두가 똑같은 이름으로 전역 변수를 선언하려고 하면 문제가 발생함
2. let, const 주로 사용
   : var는 블록 스코프를 무시하고 재선언을 해도 에러를 내지 않음
   → 전역 변수를 var로 선언하는 경우 중요 전역 변수의 기능을 덮어씌워서 내장 기능을 사용할 수 없게 만들 수 있음
   
3. 선언없는 변수 할당금지
   : 선언키워드 (var, let, const)없이 변수를 할당하면 해당 변수는 전역 변수로 취급됨
   
4. ‘use strict’; 모드 사용 : 에러를 판단해줌

---

📌 클로저

: 외부 함수의 변수에 접근할 수 있는 내부 함수, 함수와 그 함수가 접근할 수 있는 변수의 조합

1. 내부함수와 외부함수
   - 내부 함수 : 함수 안의 또 다른 함수
   → 외부함수의 지역 변수에 접근할 수 있음
   

2. 외부 함수 : 제일 바깥에 있는 외부 함수
   [예시]
   1) 함수 outerFn과 outerFn에서 접근할 수 있는 globalVar
   2) 함수 innerFn과 innerFn에서 접근할 수 있는 globalVar, outerFnVar
   

3. 클로저가 중요한 이유 : 클로저의 함수는 어디에서 호출되느냐와 무관하게 선언된 함수 주변 환경에 따라 접근할 수 있는 변수가 정해짐
   [예시]
   innerFnOnGlobal은 innerFn 밖에 있기 때문에 outerFnVar에는 접근하지 못할거라고 판단하지만 실제론 접근이 가능하다
   ➡️ 아래 그림처럼 innerFn 함수가 최초 선언되었던 환경에서 outerFnVar에 접근가능하기 때문!