callbackFunction

함수의 특징 - 값

동기 & 비동기 처리

callbackFunction

Array의 filter() 메서드를 공부하다가 callbackFunction 이라는 개념을 알게 되어 정리하려고 한다. callbackFunction 이라는 개념을 정리하기 전에 관련된 함수의 특징에 대해 짚고 넘어가야 한다. 바로 값으로써의 함수와 비동기 처리이다.

🥝 함수의 특징 - 값

Javascript 내에서의 함수는 값이 될 수 있다. 이 말인 즉슨 선언된 변수의 값이 될 수 있다는 소리다.

1. 다른 함수에 인자(매개변수)로 들어갈 수 있다. 함수 속의 함수로 들어갈 수 있다고 생각할 수 있다.
2. 객체의 속성 값으로 사용할 수 있다. 이 때 함수를 메서드라고 부른다.
3. 리턴 값으로 사용할 수 있다.
4. 배열 값으로 사용할 수 있다.
   이렇게 다양한 값으로 활용되는 함수를 first-class-citizen(object 등등) 이라고 부른다.

function a(){}

let a = function() {}	// 서로 같다.

아래의 예시에서 함수가 객체의 속성 값이 된 것이다.

a = {
    b:function(){	// key : value
    }
 };

🥝 동기 & 비동기 처리

callback 함수를 알기 위해서는 비동기 처리에 대해서도 알고 있어야 한다. 여기서 동기와 비동기 처리의 차이에 대해 간단히 알아본다.

• 동기 처리
  동기 처리는 어떠한 코드나 로직을 짜여져 있는 순차적으로 처리하는 것을 의미한다. 하나의 요청이 오면 완료가 되어야 다음 요청을 실행하는 방식이라고 할 수 있다.

• 비동기 처리
  비동기 처리는 시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다. 혹은 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식이라고 할 수 있다.

Ajax라는 기술도 비동기 처리를 사용한다. callback 함수를 통해 인자를 전달받고 메서드가 동작하는 방법을 바꾼다.

어떠한 정보를 웹페이지에서 갱신(새로고침)하고 싶을 때 페이지 전체를 다운로드 받아서 표시하는 것이 일반적이다. 하지만 Ajax 라는 기술은 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해준다. 가령 옷 쇼핑몰에서 장바구니 버튼을 클릭했을 때 새로운 창으로 전체 페이지가 다운로드 되는 것이 아니라 기존 웹페이지 창은 배경에 두고 다른 부분의 내용 전환 없이 작게 장바구니 창만 떠서 현재 담아둔 장바구니 목록을 확인할 수 있다. 이러한 기술이 Ajax 라는 기술에서 구현된다. 사용자에게 어떠한 처리를 위임하고 있다고 보면 된다.

🥝 callbackFunction

callback 함수는 다른 함수의 인자로써 이용되는 함수, 어떤 이벤트에 의해 호출되어지는 함수 라고 한다.

• 활용 범위

1. 메서드의 인자로 callback 함수가 들어가면 메서드의 기본 동작 방법을 변경할 수 있다. (값으로써의 함수를 사용할 수 있기 때문에 메서드의 동작하는 방법을 변경할 수 있게 된 것이다.)
2. 비동기 방식으로 작성된 함수를 동기 처리 하기 위해 주로 활용한다. 비동기 처리를 기본으로 하면서도 일부 구간에서 순차적인 처리가 필요할 수도 있기 때문이다.

function sortNumber(a,b){
    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

인자로 전달된 함수 sortNumber의 구현에 따라서 배열을 정렬하는 동작을 하는 sort(메서드)의 동작방법이 완전히 바뀌게 된다.

callback 함수의 다른 형태도 있다.

function mainFunc(param1, param2, callbackFunc) {
    // ... 처리 내용 작성
    callbackFunc(result);
}

보통 함수를 선언한 뒤에 함수 타입 파라미터를 맨 마지막에 하나 더 선언해 주는 방식으로 정의한다고 한다. 처리가 끝나면 파라미터로 전달 받은 함수를 실행하며 필요한 경우 결과 값을 인자로 넘겨줄 수도 있다.

function add(a, b) {
  return a + b;
}

function sayResult(value) {
  console.log(value);
}

sayResult(add(3, 4));

위의 코드를 callback 함수를 사용해본다면 아래와 같이 바꿀 수 있다.

function add(a, b, callback) {
  callback(a + b);
}

function sayResult(value) {
  console.log(value);
}

add(3, 4, sayResult);

결과는 같지만, 함수를 호출하는 시점이나 동작하는 순서가 조금씩 달라진다.

---

<출처>
생활코딩
미리 알았다면 좋았을텐데
BigTop_Log