해당 내용은 '코어 자바스크립트' 서적을 참고하여 작성되었으며, 초보 개발자에게 유익한 책을 지필해주신 지은이 정재남 님께 감사의 말씀을 드립니다.

클로저

기본정의와 이해

• 클로저란 어떤 함수 내부에서 선언되고 활용되는 변수가 해당 함수 외부에서도 쓰일 시,
  가비지 콜렉터로 넘어가지 않는 현상을 의미한다.
• 특정 함수의 내부 변수가 외부에서도 쓰인다고 한다면, 그 내부 변수를 활용하는 로직이 리턴값으로 넘어가거나
  윈도우 객체, 이벤트 리스너 등을 통해 등록되거나 하는 경우일 것이다.

활용 사례

• 이런 클로저 현상의 경우, 해당 함수가 종료 되었음에도 불구하고 사라지지 않기 때문에 메모리 누수가 발생한다. 그렇기에 해당 로직을 활용한 다음 null 값을 할당하여 메모리에서 차지하지 않게끔 처리하기도 한다.
• 그런데 이런 클로저 현상을 의도적으로 활용하는 경우가 있다.

콜백 함수 내부에서 외부 데이터를 사용하고자 할때

// 외부데이터를 인자로 받고, 그 인자를 활용하는 함수 자체를 리턴하여 클로저를 만듦.
const consoleFunc = (val) => {
  return function(){
    console.log(val)
  }
}

['a', 'b', 'c'].forEach((el)=>{
  var li = document.createElement('li');
  li.innerText = el;
  li.addEventListener('click', consoleFunc(el));
})

접근 권한 제어(정보 은닉)

const test = () => {
  const num1 = Math.random();
  const num2 = Math.random();
  return function(){
    console.log(num1 - num2);
  }
}

const instance = test();
instance();
// 이런식으로 하면 내부 로직을 활용하여 값을 볼 수는 있지만 활용된 변수 값은 알 수 없다.

부분 적용 함수

// 어떤 함수의 인자 중에서 몇개를 미리 지정해놓고 나머지 인자만을 받아서 실행시키는 함수
const test = (num3) => {
  const testRe = (a,b,c) => {
    console.log(a + b + c);
  }
  const num1 = Math.random();
  const num2 = Math.random();
  return testRe(num1, num2, num3);
}

커링 함수

// 인자를 하나씩 지정하여 넘기고 모든 인자를 받은 뒤에만 실행되는 함수
const test = num1 => num2 => num3 => Math.max(num1, num2, num3);
test(1)(2)(3); // 3

// 미리 지정된 값이 있고 그 뒤로 순차적인 내용이 들어와야할때 사용하며
// 예를 들어, http 통신에서 쿼리스트링을 받아 보낸다거나
// 리덕스에서 미리 지정해놓은 store 를 기반으로 각각의 action 내용을 받아 함수를 실행하는 경우이다.