[JavaScript] 스코프(Scope)와 클로저(Closure)

jee-woo·2022년 7월 13일

자바스크립트

목록 보기

4/8

Scope의 한국어 뜻은 "범위"인데, 컴퓨터 공학과 자바스크립트에서도 Scope는 "변수의 유효범위"라는 의미이다.

블록 내에서만 사용 가능

{
  let me = "jeje";
}
// 여기서 작성되는 코드는 me 변수를 사용할 수 없다.

함수 내에서만 사용 가능

// 여기서 작성되는 코드는 phone 변수를 사용할 수 없다.
function myFunction() {
  let phone = "iphone 12 mini";
  // Function Scope
}
// 여기서 작성되는 코드는 phone 변수를 사용할 수 없다.

전역(전체 영역)에서 사용 가능

let phone = "iphone 12 mini";
// 여기서 작성되는 코드는 phone 변수를 사용할 수 있다.
function myFunction() {
// 여기서 작성되는 코드 또한 phone 변수를 사용할 수 있다.
}

mdn에서 자바스크립트의 Closure는 다음과 같이 정의된다.

"함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다."

다른 말로는 "외부 함수의 변수에 접근할 수 있는 내부 함수"를 클로저 함수라고 한다.

let  outer = function (plus) {
  let inner = function (num) {
      return plus + num;
  }
  return inner;
}

위의 예시에서 inner 함수는 클로저 함수이다.
inner 함수에서 outer 함수의 지역 변수인 secret 변수에 접근할 수 있기 때문이다.

Closure의 한국어 뜻은 "폐쇄"이다. 클로저는 스코프를 이용해서, 변수의 접근 범위를 폐쇄한다.

plusOne = outer(1);
console.log(plusOne(2));	//3
console.log(plusOne(3));	//4

outer(1)을 호출해서 plusOne 변수에 할당하는 것은
outer의 매개변수 plus에 1이라는 인자를 전달하여 plusOne에 저장해두는 것이다.

그 후 plusOne(2)를 호출하는 것은
outer의 매개변수 plus에 1이 할당된 환경 그대로 다시 inner함수의 매개변수 num에 2라는 인자를 전달하는 것이다.

w3schools - JavaScript Scope

mdn - JavaScript Closures

FE Developer