[JavaScript] 콜백 함수로 화살표 함수를 전달하기

Callback은 비동기 프로그래밍에서 자주 활용되는 방식입니다.

 

콜백 함수를 활용하면, A 함수의 파라미터로 B 함수를 전달하여, A함수의 작동이 끝나고 나면 B함수를 호출하는 방식으로 작동하게 됩니다.

 

보다 심도높은 비동기 프로그래밍에서는 복잡한 콜백 구조가 형성되어야겠으나, 간단한 함수의 순서 처리는 보다 간단합니다.

 

ES6 이전의 콜백 함수는 다음과 같은 방식으로 구현할 수 있었습니다.

 

function add (a, b, callback) => {
    var result = a + b;
    callback(result);
}

add(10, 10, function(result) {
    console.log('파라미터로 전달된 콜백 함수가 계산을 마치고 호출됨');
    console.log('%d',result);
})

 

 

하지만 ES6에서는 화살표 함수를 주로 사용한다고 했죠. 제 리액트 포스팅에 가보면 화살표 함수의 사용법을 많이 보실수 있습니다.ㅎㅎ

 

위의 콜백 코드를 화살표 함수로 바꾸어 준다면,

 

const add = (a, b, callback) => {
    var result = a + b;
    callback(result);
}

add(10, 10, (result) => {
    console.log('파라미터로 전달된 콜백 함수가 계산을 마치고 호출됨');
    console.log('%d',result);
})

 

다음과 같이 바꿀 수 있겠네요.

 

굉---장히 간단한 콜백 함수의 구현이었습니다.

 

함수의 파라미터로 람다식의 함수를 전달해야 할때 화살표 함수를 사용 하는게 보다 깔끔하네요!