자바스크립트 콜백함수 for SAPUI5

자바스크립트 콜백함수(Callback Function)는, 파라미터를 함수로부터 전달받아 함수의 내부에서 실행하는 함수입니다. 즉, 자바스크립트에서는 함수도 하나의 값이기 때문에 이렇게 함수에 매개변수로 전달을 할 수가 있습니다.

지난 자바스크립트 함수 기초편에 이어 자바스크립트의 함수를 이해하는데 중요한 개념이라고 생각됩니다.

자바스크립트 콜백함수 란

const func_test = function ( param_func ) {
  param_func();
}

const func_test2 = function () {
  console.log( "안녕하세요" );
}

func_test( func_test2 )
func_test( "출력" ) // Uncaught TypeError: param_func is not a function

파라메터를 받아서 함수형태로 처리하고 있으므로 스트링이나 숫자 형태의 매개변수를 전달하게 되면 Uncaught TypeError 오류가 발생하게 됩니다.

콜백 함수는 쉽게 생각해서, 이러한 형태로 매개변수를 통해 전달하는 함수의 개념입니다.

const B콜백테스트 = function( 배열, A콜백함수 ){
  for (const 개별값 of  배열) {
    A콜백함수( 개별값 )
};
}
const A함수 = function( 콜백함수_매개변수 ){
  console.log( 콜백함수_매개변수 );
}

B콜백테스트( [10,45,34,100 ], A함수 );

콜백테스트 함수에서는 파라메터로 A콜백함수를 받을 것으로 예상하여 함수 내부에서 A콜백함수에 배열의 개별 값을 넣어주도록 되어 있습니다.

아래에 콜백함수로 사용될 A함수는 콜백함수_매개변수를 받아 콘솔로 해당 값을 그대로 찍어주는 방식입니다.

결국 함수도 변수 형태로 파라메터에 넘어가기 때문에 다음과 같이 매개변수에 직접 function을 입력할 수도 있습니다.

const B콜백테스트 = function( 배열, A콜백함수 ){
  for (const 개별값 of  배열) {
  A콜백함수( 개별값 )
};
}
//const A함수 = function( 콜백함수_매개변수 ){
//    console.log( 콜백함수_매개변수 );
//  }

B콜백테스트( [10,45,34,100 ], A함수 );

자바스크립트 뿐만 아니라 SAPUI5 에서도 이런 형태의 콜백 함수는 매우 많이 사용되니 꼭 개념을 알고 있어야 합니다.

반복문 foreach의 자바스크립트 콜백함수 사용 예제

배열의 메소드 중 forEach는 다음과 같이 콜백함수를 정의하여 사용할 수 있습니다.

자바스크립트 반복문에 대한 기초 사항은 이 글을 참조하시기 바랍니다.

const 콜백용배열 = [45, 34, 56, 34, 101];
콜백용배열.forEach(function (value, index, array) {
  console.log(value, index, array);
});

일반적으로는 value, index 두개의 parameter를 정의하여 사용합니다.

자바스크립트 메스드 중 map과 filte는 공통적으로 기존배열은 그대로 두고 리턴값을 통해 새로운 배열을 제공한다는 점이고, 차이는 map의 경우 콜백함수의 로직이 적용된 새로운 요소가, filter는 기존 배열값이 조건문에 만족되는 요소만을 반환하는 것입니다.

둘 다 기존 배열은 건드리지 않고 새로운 배열값을 생성하기 때문에 항상 리턴값을 받아 로직에 적용해야 합니다.

반복문 filter 자바스크립트 콜백함수 사용 예제

배열 메소드 filter는 이름 그대로 배열에 속한 값 중 조건에 만족하는 값만 리턴을 해주게 됩니다.

아래와 같이 모두 true 인 경우에는 모든 배열의 요소가 리턴되게 됩니다.

const 콜백용배열 = [45, 34, 56, 34, 101];
console.log( 콜백용배열.filter( function ( value, index ) {
  return true
}))
console.log( 콜백용배열.filter( function ( value, index ) {
  return false
}))

배열에 속한 값 중 짝수인 경우에만 리턴하도록 다음과 같이 기술할 수 있습니다.

const 콜백용배열 = [45, 34, 56, 34, 101];
let 결과배열 = 콜백용배열.filter( function ( value, index ) {
  return value % 2 === 0; // 짝수만 리턴
})
console.log( 결과배열 )

반복문 배열 map 콜백함수 사용 예제

배열 메소드 map은 배열에 속한 모든 값에 대해서 콜백함수의 로직을 적용한 새로운 결과값을 리턴하게 됩니다.

let map결과 = map배열.map(function (value, index) {
  return value + 1;
});
console.log( map결과 );

setTimerout(), setInterval() 함수의 콜백함수 사용 예제

지정된 시간에 실행되고 수행을 끝내는 setTimerout, 지정된 시간마다 계속 실행을 지속하는 setInterval함수는 다음과 같이 콜백 함수를 사용할 수 있습니다.

// 해당 시간이 지난 후 실행
const setTimerFunc = setTimeout( function () {
  console.log( 'setTimeout입니다.' );
}, 2000 );

// 지정한 시간마다 계속 실행
const setIntervalFunc =  setInterval( function () {
  console.log( 'setInterval 입니다.' );
}, 1000 );

콜백으로 넘겨주는 함수에서는 지정된 시간이 되었을 때 수행되는 로직을 구성합니다.

이상으로 자바스크립트 콜백함수 에 대해서 알아보았습니다. 자바스크립트에서 함수를 다룸에 있어 클로저, 생성자 함수, 메서드 등과 함께 반드시 알아두어야 할 사항이므로 꼭 숙지하시기 바랍니다.

자세한 사항은 w3school문서 여기 를 참조해 보시기 바랍니다.