Javascript – 함수를 인자로 함수를 호출하는 유형

by Posted on
ㆍ함수를 인자로 함수를 호출(Callback) 의 방법

use strict’

// callback
// 동기 콜백 / 비동기 콜백  모두 쓰일수 있는 용어임
// 어떠한 작업을 처리 (완료/오류 예외포함) 후 대기하고있다가 불려지는함수(제어권을 받아가는 다른 함수)
function callbackSync(syncf)
{
    syncf();
}
function printMyName()
{
    console.log(“my name is javascript”)

}

callbackSync(printMyName);                                             // 외부함수를 만들어서 전달(시그니쳐없음)
callbackSync( function() { console.log(“print function”)});  // 파라미터없는 익명 함수로 전달 – (일반표현)

callbackSync( ( ) => console.log(“print function“));            // 파라미터없는 익명 함수로 전달(에로우평션)

 

// 리턴값 있는 함수 인자로의 호출 (제어의 순서)
// 리턴없는 잘못된 코드
function callbackFn1(syncf)
{
     syncf(“steve”);   // syncf -> 리턴  해줘야 callbackFn1 호출한 곳에서 결과를 출력함
}
function getMyName(a)
{
    return  “call my Name ” + a;
}
// 제어순서 : (getMyName 호출로 끝나지않음)
// callbackFn2 → syncf  로 대리 호출(getMyName)  → getMyName 처리 후 값 리턴 →
// →  syncf (getMyName에서 리턴받은값) 리턴이 없으므로 그냥 종료  → gName2 로 리턴이 없으므로
// gName 은 undefiend 출력

 

let gName = callbackFn1(getMyName);

console.log(gName); // undefined

 

 
 
// 리턴값 있는 함수의 인자로의 호출 (제어의 순서)
function callbackFn2(syncf)
{
    return syncf(“steve”);
}
function getMyName(a)
{
    return  “call my Name ” + a;

}

// 제어순서 : (getMyName 호출로 끝나지않음)
// callbackFn2 → syncf  로 대리 호출(getMyName)  → getMyName 처리 후 리턴 →
// →  syncf (getMyName에서 리턴받은값)  → gName2 로 리턴
let gName2 = callbackFn2(getMyName);
console.log(gName2);  // call my Name steve   “return syncf” 으로 인해사 값을 받아옴
//  인자값 함수로 받아오기
function callbackFn3(syncf)
{
    let rtnVal = “success call”
    syncf(rtnVal);
}
function callbackFn3_2(syncf)
{
    let rtnVal1 = “success call”
    let rtnVal2 = “or fail call”
    syncf(rtnVal1 , rtnVal2);
}
function callbackFn3_3(syncf)
{
    const myObj = {
        rtnVal1 : “you were success calling” ,
        rtnVal2 : “or fail calling”
    }
    syncf(myObj);
}
// 리턴값이 아닌 인자를 함수로 받아오기
function getValfn(a)
{
    console.log(“there is getValfn: ” + a);
}
function getValFn(a,b)
{
    console.log(“there is getValFn overloading: ” + a);
    console.log(“there is getValFn overloading: ” + b);
}
function getValFnObj(o)
{
    console.log(“there is getValFnObj : ” + o.rtnVal1)
    console.log(“there is getValFnObj : ” + o.rtnVal2)

}

 

callbackFn3(getValfn)              // 인자가 1개인 함수를 인자로
callbackFn3_2(getValFn)         // 인자구 2개인 함수를 인자료ㅗ
callbackFn3_3(getValFnObj);   // 인자가 객체인 함수를 인자료
// 리턴값이 아닌 인자를 무명함수로 받아오기
// 파라미터로 전달된 함수로(무명) 인자를 받아오고 싶다면?
callbackFn3(() =>
{

})

 

// 1개 파라미터 받아오기
callbackFn3( (param) => {                      //  callbackFn3 ( param =>  console.log(param); );
    console.log(param)                             //  callbackFn3 ( function(param) { console.log(param);});

})

 

// 2개 파라미터 받아오기
callbackFn3_2( (param1,param2) => {   // callbackFn3_2(function(a,b)  { }); 로도 가능
    console.log(param1)
    console.log(param2)

})

callbackFn3_2(function(a,b)  { });

 

// 객체로 받아오기
callbackFn3_3( (param)=>{                    // callbackFn3_3(function(Obj)  { }); 로도 가능
    console.log(param.rtnVal1)
    console.log(param.rtnVal2)
})

Published by pluginn

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다