클로저란

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

• JS는 함수가 호출되는 환경과 별개로 , 기존에 선언되어 있더 환경 - 어휘적 환경을 기준으로 변수를 조회하려고 한다.

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

Acievement Goals

• 클로저 함수의 정의와 특징에 대해서 알아야한다.

• 클로저가 갖는 스코프 범위를 알아야한다.

• 클로저를 이용해 유용하게 쓰이는 몇 가지 코딩 패턴을 알아야한다.

클로저 함수의 특징

화살표 함수를 이용한 간단한 덧셈 함수

const add = (x,y) => x = y;
add(5, 7); // 12

const adder = x => y=> x + y;
add(5)(7); // 12
앞의 코드와는 다르게 화살표를 두 번 사용했다.
그래서 함수의 호출이 두번 발생했다.
typeof adder(5) // 'function' >>
adder(5) // y => x(5) + y  >> 리턴값이 함수의 형태이다.
이 말은 adder(5) 의 리턴값이 함수의 형태임을 의미한다.
즉, adder는 함수를 리턴하는 함수이다. 
화살표 함수로 작성된 함수 표현식을 function 키워드를 사용해서 표현해보자 

특징(1) 함수를 리턴하는 함수

// const adder = x => y => x + y
// 위의 코드와 동일하게 작동한다
const adder = function (x) {
  return function (y) { // 리턴값이 함수의 형태이다.
    return x + y;
  }
}
함수를 리턴하는 함수가 클로저의 형태를 만든다.

클로저 함수는 위와 비슷한 모양을 갖고 있다. 이를 통해 알 수 있는 첫번째 특징은

• 클로저 함수는 "함수를 리턴하는 함수" 라는 것이다.
  • 함수를 리턴하는 함수가 클로저의 형태를 만든다.

특징(2) 어휘적환경

mdn에서 closure를 찾아보면, "함수와 함수가 선언된 어휘적 환경의 조합" 이라고 나와 있다.
특징(1)에서 클로저 함수가 "함수를 리턴하는 함수" 임을 확인했다. 즉 , 함수와 함수가 선언된 상태이다. 그렇다면 어휘적 환경 (lexical environment) 은 무슨 말일까? 단순하게 "변수 및 함수의 선언의 형태" 로 이해하고 넘어가면 되겠다.

특징(3) 외부함수와 내부함수

리턴하는 함수에 의해 스코프(변수의 접근 범위) 가 구분됨

closure는 리턴하는 함수에 의해 스코프가 구분된다. 클로저의 핵심은 스코프를 이용해서 변수의 접근 범위를 닫는 (closure: 폐쇄) 데에 있다. 따라서, 함수를 리턴하는 것만큼이나, 변수가 선언된 곳이 중요하다.

const adder = function (x) { // x = 외부함수의 변수 x
  return function (y) { // y = 내부 함수의 변수 y
    return x + y;
  }  // 두번째 function ~ 여기까지 => 내부 함수 
} // 첫번째 function ~ 끝까지 => 외부 함수
이 예제에서는 변수 x와 y가 선언된 곳이 각기 다르다. x가 선언된 함수는 바깥쪽에 
있으니 외부 함수라고 부른다.
그리고 y가 선언된 함수는 보다 안쪽에 있으니 '내부 함수' 라고 부른다. 따라서, 
  이 클로저 함수는 스코프가 분리 되어 있다.

특징(3) 질문 Question

const adder = function (x){ // 외부함수
  return function (y) { // 내부함수
    return x + y;
  }
}

• 외부 함수는 y에 접근이 가능한가? 내생각 =>바깥에서 안쪽으로는 안될것 같다.

• 내부 함수는 x에 접근이 가능한가? 내생각 =>안쪽에서 바깥쪽으로는 될 것 같다.

특징(3) 질문에 대한 해답

• 외부 함수는 y에 접근이 가능한가?
  • 바깥 스코프에서는 안쪽 스코프로의 접근이 불가능하다.
• 내부 함수는 x에 접근이 가능한가?
  • 안쪽 스코프는 바깥 스코프에서 선언된 변수에 접근이 가능하다.

특징(4)

클로저 함수 : 외부 함수의 변수에 접근 가능한 내부 함수

이를 통해 알아볼 수 있는 두번째 특징은 , 클로저 함수는 "내부 함수는 외부 함수에 선언된 변수에 접근 가능하다" 는 점이다.