스터디 2회차(JS- 콜백함수,클로저함수)

스터디 2회차(JS- 콜백함수,클로저함수)

---

콜백함수

주로 함수 내부의 처리 결과값을 함수 외부로 내보낼 때 사용

return문과 비슷한 기능인데 이후에 또다른 함수호출한다는 차이점
매개변수로 함수명을 받고(콜백함수), 실행하면서 결과 값을 매개변수로 가져가 씀

function f(a, b, callback){ //2.실행
var result = a + b;
callback(result) //3.결과를 매개변수로 가지고 또 다른 함수(print(result)) 실행

}

function print(result){ //4.실행
   document.write(result+"입니다");
}

f(1, 2, print ); //1. 호출

왜씀?

• 로직 구현부분 동일하고 로직처리 부분을 다양하게 처리해야 하는 경우에 유용
• 일반코드의 중복을 줄일 수 있고 유지보수에 좋음
• 비동기 함수의 결과값을 처리하기 위한 방법으로 주로 사용됨(동기에 비해 효율적)
• 실무사례 : 이벤트리스너, 타이머 실행함수, jQuery Ajax로 데이터 주고 받을 때, 애니메이션 끝났을 때 실행하고자 하는 함수 등

---

클로저함수

클로저 : 함수 내부에 만든 지역변수가 사라지지 않고 계속해서 값을 유지하는 상태
클로저함수 : 클로저현상을 이용하는, 내부에 있는 함수

장점

• 연관있는 변수와 기능(중첩함수)을 하나의 함수로 묶어 독립적으로 실행 가능
• 함수 내부에 데이터가 만들어지기 때문에 함수 외부에서 수정할 수 없는 보호된 데이터 만들 수 있음
• 객체지향에서는 private, 캡슐화된 데이터라고 함

일반함수

var counter = 0;

   function increase() {
     return ++counter;
   }

//일반함수 -> 클로저함수

var increase = (function () {
     // 카운트 상태를 유지하기 위한 자유 변수
     var counter = 0;
     // 클로저를 반환
     return function () {
       return ++counter;
     };
   }());

스크립트 실행시

1. 즉시실행함수가 호출되고 소멸됨(1회성)
2. 변수 increase에 함수 function () { return ++counter; }가 할당됨

• inclease버튼 누르면
  1. increase가 클릭 이벤트 핸들러 내부에서 호출된다.
     (지역변수 counter를 기억하는 상태, 하지만 다시 초기화 될 일은 없다.)

즉시실행함수는 한번만 실행되므로 increase가 호출될 때마다 변수 counter가 재차 초기화될 일은 없을 것이다.
변수 counter는 외부에서 직접 접근할 수 없는 private 변수이므로 전역 변수를 사용했을 때와 같이
의도되지 않은 변경을 걱정할 필요도 없기 때문이 보다 안정적인 프로그래밍이 가능하다.