고차함수와 콜백함수

고차함수 (Higher Order function)

• 함수를 인자로 받는 함수
• 함수를 리턴하는 함수

콜백함수 (Callback function)

• 함수안의 함수
• 다른함수의 인자로 전달되는 함수

예를들면

• 먼저 고차함수의 생성 및 할당

// callBack용으로 전달할 함수를 변수에 할당한다.
const callbackFunc = () => {
	return console.log("some shit things..");
}

// 함수를 인자로 전달받는 고차함수를 할당한다.
const HOFOutPut = function(callbackFunc, anyNumber) {
    callbackFunc();
    console.log("입력받은 두번째 인자값: ", anyNumber)
    return function(onePluse) {
    	const result = onePluse+1;
    	console.log(result)
    	return result;
    }
}


// (위와 같은 내용이지만 화살표 함수 형식으로 할당하기)
const HOFOutPut = (callbackFunc, anyNumber) => {
    callbackFunc();
    console.log("입력받은 두번째 인자값: ", anyNumber)
    return function(onePluse) {
    	const result = onePluse+1;
    	console.log(result)
    	return result;
    }
}

사용법 1

• 이부분에서 callbackFunc를 콜백함수라 칭한다.

const result = HOFOutPut(callbackFunc, 2); 
// some shit things... 출력됨
// 입력받은 두번째 인자값: 2 출력됨

result(5) // 6 출력됨

사용법 2

HOFOutPut(callbackFunc, 2)(5); 
// some shit things... 출력됨
// 입력받은 두번째 인자값: 2 출력됨
// 6 출력됨

고차함수에서 return 전, 지정된 코드가 실행된다음 return 에서 고차함수 본연의 작업이 진행됨

응용 - 3단 currying에서 고차함수와 콜백함수를 사용해보기

const callBackFunction2 = (data) =>{
     console.log("activate!: ", data);
}

function middleware(store){
    console.log("store: ", store);
    
    return function(next){
        console.log("next: ", next);
            
        return function(action, callback){
            console.log("action: ", action);
            callback(action);
            return;
        }
    }
}

// 위 내용을 화살표 함수로 표현하기
const middleware = (store) => (next) => (action, callback) =>{
    console.log("store: ", store);
    console.log("next: ", next);
    console.log("action: ", action);
    callback(action);
}

middleware("스토어")("넥스트")("액션", callBackFunction2);
// store:  스토어
// next:  넥스트
// action:  액션
// activate!:  액션