JavaScript - 내부 함수/Closure/CallBack

클로저

내부함수가 외부함수의 내용에 접근 할 수 있는 개념.

내부함수와 밀접한 관계를 가지고 있는 주제다. 내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다.

클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

function outter(){
  var title = "seungdols conding";
  return function (){
    alert(title);
  }
  // inner();
}
var inner = outter();
inner();

사실 내부함수 개념은 흔히 객체지향방법론에서 쓰는 내부클래스와 동일합니다.

물론, 모르실수도 있죠! 그렇지만, 중요한 것은 바로 내부함수는 함수가 중첩된 형태에서 inner로 삽입된 함수를 내부함수라 합니다.

위에서는 현재 outter함수 안에 return문으로 함수를 리턴하고 있습니다. 무명함수라고도 합니다. 

function 예약어 이후 함수명이 없어서.. 무명...無名함수...^^

내부함수는 왜 쓰는걸까요 ?

위에서는 지금 고스트와 매트릭스에 각 함수의 title을 인자로 주면서 반환받고 있습니다.

get_title이라는 프로퍼티는 title을 리턴하구, set_title의 경우 인자로 넘어온 _title을 title에 대입해주고 있습니다.
그로인해서 get/set 메소드 역할을 하게 되는 것이죠. getter/setter method는 OOP에서 중요한 역할을 합니다.

OOP는 뭔지 알쥬?

var arr = []
for ( var i = 0; i < 5; i++){
  arr[i] = function(){
    console.log(i);
  }
}
for ( var index in arr){
  console.log(arr[index]());
}
 

위에서는 실수를 했습니다.사실 이 코드보다 아래 코드가 맞는 클로저의 사용입니다.

var arr = []
for ( var i = 0; i < 5; i++){
  arr[i] = function(id){
    return function(){
      return id;
    }
  }(i);
}
for ( var index in arr){
  console.log(arr[index]());
}
 

여기서 Callback의 개념이 나오는데 콜백의 경우 이해하기가 굉장히 까다롭습니다.

사실 순수 절차적 프로그래머였다면, Callback이나 Event-Driven 같은 경우를 프로그래밍 하기가 어렵습니다.

왜냐하면, 콜백은 당장 실행하는게 아닌, 언제 실행할지 시점만 아는거지 결론적으로 어느 타임에 동작할지는 모릅니다.

여기서 콜백은 그저 쉽게, '정해진 일을 알아서 하고 반환하는 함수'라고 생각해보죠? - 이렇게 설명하는 것이 맞는진 모르겠네요..

// function cal(func, num){
//   return func(num);
// }
// function increase(num){
//   return num + 1;
// }
// function decrease(num){
//   return num - 1;
// }
// alert(cal(increase,1));
// function load(){
//   alert("load() call");
//   getParamCallback(function call(num){
//     alert("call func");
//   });
// }
// function getParamCallback(callback){
//   alert("getParamCallback");
//   num = null;
//   if(num == null){
//     callback(1);
//   }
// }
// load();
function MainProgram{
  var arg;
  LibFunc(arg, callbackFunc);
}
function callbackFunc(resutl){
  alert("callback");
}
function LibFunc(arg, callback)
{
  var data;
  callback(data);
}
 

위 내용은 생활코딩의 내용입니다.

무단 수정 및 배포는 금지합니다.   모든 내용은 본 블로그 운영자가 정리한 내용입니다.   참조한 정보에 대해서는 출처를 남기고 있습니다.  틀린 내용 / 오류가 포함된 내용은 댓글로 남겨주세요.  choiseungho0822@gmail.com 보내주셔도 됩니다.  Seungdols Wiki 운영중입니다.