[자바스크립트] 클로저 (Closure) 함수&커링

 

우아한 테크러닝에서 리덕스에 대한 강의를 수강하면서, 같이 언급되었던 것이 클로저 함수와 커링 함수입니다.

리덕스에 이 클로저함수가 사용이 되는데요, 이번 포스팅은 클로저함수가 무엇인지에 대해 정리해보겠습니다.

---

💻 클로저(Closure)란?

클로저의 개념을 알아보기 전에 먼저 클로저 함수의 구조에 대해 간단히 살펴보면, 아래와 같습니다.

 

함수(outer)에서 함수(inner)를 반환해주는 형태입니다.

function outer(){
  const name = 'keeper';
  return function inner(){
    const greeting = 'hello!'
    console.log(greeting,name)
  }
}
const getKeeper = outer()
getKeeper() //hello!keeper

 

자바스크립트에서는 함수가 호출될때, 변수와 같은 lexical environment 값들이 생성되고, 함수가 종료되면서 같이 사라지기 때문에 이 값들은 함수 밖에서는 접근이 안됩니다.

(위의 예시 코드에서 name과 같은 함수의 변수값은 외부에서 따로 접근이어렵습니다.)

 

하지만, 클로저는 inner함수에게 outer함수의 lexical environment를 사용할 수 있도록 같이 묶어줍니다. 

(getKeeper를 통해 outer()함수를 호출 하면서, getKeeper는 inner()함수를 반환받고 name값에 접근할 수 있게됩니다.)

 

+ MDN에서는 "클로저는 주변의 상태 (lexical environment)의 참조와 함께 번들로 묶인 함수의 조합으로 이는, inner함수에서 outer함수의 스코프에 접근을 가능하게한다." 라고 정의했다고 합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

클로저 - JavaScript | MDN

---

💻 클로저(Closure)의 장점

이러한 클로저 사용의 장점은 정보은닉, 재사용성, 분리성, 표현성이 될 수 있습니다.

 

👉변수를 함수에 가두어 사용하기 때문에 정보은닉의 효과가 있어 캡슐화의 기능을 수행해줍니다.

👉함수 하나를 완전히 독립적인 부품 형태로 분리하여 모듈처럼 사용하기 때문에 함수의 재사용성을 극대화시킬 수 있습니다.

👉함수가 분리되어 있어 inner함수 호출 전에 이루어져야할 일들이 있다면 함수외부에서 편리하게 작성하여 원하는 곳에 호출할 수있습니다.

+커링함수(currying)

추가적인 개념으로 이러한 분리성에서 커링함수를 생각할 수 있습니다.

커링할 원래 함수 와 인수를 유지하는 클로저 를 만드는 방식으로 커링함수를 만듭니다.

let multiplyThree = x => y => z => console.log(x * y * z); // 커링 함수

multiplyThree(4)(5)(2); // 40

👉함수를 분리하여 사용하기 때문에, 여러가지 형태로 표현해낼 수 있어 표현성 또한 좋게 만들어줍니다.

 

---

이렇게 클로저 함수의 정의와 장점에 대해 정리해보았습니다. 다음에는 이러한 클로져 함수를 이용하는 리덕스에 대해 정리해보겠습니다 :-D🧡