[javascript patterns][콜백함수]스터디 01

함수

자바스크립트의 함수를 특별하게 만드는 두 가지 중요한 특징이 있다.
1. 함수는 일급(first-class) 객체다.
2. 함수는 유효범위(scope)를 제공한다.
 - 런타임, 즉 실행 중에 동적으로 생성할 수 있다.
 - 변수에 할당, 참조,확장가능하고, 몇몇 특별한 경우를 제외하면 삭제할 수 있다.
 - 자기 자신의 프로퍼티와 메소드를 가질 수 있다.

콜백 패턴

함수는 객체다. 즉 함수를 다른 함수에 인자로 전달 할 수 있다.

var a = function() {
return 1+1;
}

var b = function getSquare(a) {
  return a()*a();
}

b(a)
4

예제를 한 번 살펴보자. 처음에는 콜백 없이 시작하여 리팩터링 하는 것과 비교를 할 것이다. 복잡한 작업을 수행한 후 그 결과로 대용량 데이터셋을 반환하는 범용함수가 있다고 하자.

var findNodes = function() {
  var i = 100000,
          nodes = [],
          found;
  while (i) {
    i -= 1;
    // 복잡한 작업이 있다 가정
    nodes.push(found);
  }
  return nodes;
};

범용함수니까 아무 작업도 하지 않고 DOM 노드의 배열을 반환하기만 하도록 하자. 로직은 다른 곳에 두어서 로직에만 신경쓸 수 있도록. hide()라는 함수로 해당 배열을 죄다 숨겨보자. 그리고 여기는 예시이기 때문에 값이 변화한 것인지 아닌지 확인 차 리턴을 해보자.

var hide = function (nodes) {
  var i = 0, max = nodes.length;
  for (; i < max; i += 1) {
    nodes[i] = "none";
  }
  return nodes;
};

var res = hide(findNodes());
res[0];
"none"
res[1];
"none"

  이것은 findNodes()에서 반환된 노드의 배열에 대해 hide()가 다시 루프를 돌아야 하기 때문에 비효율적이다. findNodes()에서 노드를 선택하고 바로 숨긴다면 재차 루프를 돌지 않아 더 효율적일 것이다. 그런데 그렇게 하면 분리를 한 의미가 사라진다. 이럴때 콜백함수가 사용된다. 콜백함수는 다음 페이지에 적겠다.