Callback함수 연습하기

콜백함수의 문자적인 뜻이나 정의는 대강 알겠는데, 코드적으로 이해 못하면 전혀 쓸모 없다. 코드적으로 다가가 보았다.

 

첫번째 연습 코드

function 곱하기함수(a, b, c) {  //곱하기함수라는 이름을 가진 함수를 선언했습니다. a,b,c 3가지 인자를 받아들이는 함수입니다.
  c(a * b);	               //전달받은 a,b인자는 전달받은 c인자에 활용되는데, c의 모양새를 보니 c는 함수를 받는 자리입니다. 
}                             //그래서 c를 통해 들어온 함수는 a*b를 곱한것을 인자로 사용합니다. 

곱하기함수(10, 20, function (d) { //위에서 만든 곱하기함수를 호출(사용)하였습니다.
  console.log(d);              //언뜻보면 함수를 선언한듯 보이지만, 함수를 호출하였다.
});

//부연설명을 하자면
a=10
b=20
c= function (d) {       //이름이 없는 함수 
    console.log(d);
  }

이렇게 a,b,c값을 대입하여 곱하기함수를 사용하겠다고 한 것입니다. 자바스크립트 문법을 무시하고 이해를 하기 위해 적어보면

function 곱하기함수(10, 20, 익명함수) {
 익명함수 function ((a * b)) {
   console.log((a * b));
  };
}

이런식으로 진행된 것이다. 그래서 결국 곱하기 함수가 실행되면서 10*20의 값을 console.log에 넘겨주며 200을 출력하게 된다. 다른함수에서 인자로 받아들여져 사용되기 때문에 콜백함수이다.

 

두번째 연습코드

function hello() {	//콘솔로 hello를 찍어내는 함수선언
  console.log("hello");
}

function world() {	//콘솔로 world 찍어내는 함수선언
  console.log("world");
}

console.log(1);
setTimeout(hello, 1000);
console.log(2);
setTimeout(world, 2000);
console.log(3);

setTimeout라는 함수는 첫번째 인자로 함수(함수를 인자로 받는다는점에서 콜백함수를 사용하는부분)를  받고, 두번째 인자로 지연시키고 싶은 만큼의 시간을 인자로 받는다. 그래서 setTimeout함수의 관점에서 hello,world함수는 콜백함수라고 생각한다. 함수 실행결과는 함수 선언한 순서와는 다르게 아래와 같다.

1
2
3
hello
world

세번째 연습코드

function fun1(mesg) {
  console.log("안녕" + mesg);
}

function fun2(callback) {
  let mesg = "하세요";
  callback(mesg);
}

fun2(fun1);

fun2함수에 인자로 fun1를 주며 함수를 호출하였습니다. fun2가 실행되면서 mesg변수에 "하세요"를 할당했고, 하세요를 콜백함수인 fun1에 넘겨주었습니다. fuc1함수가 호출되어 실행되며, 최종적으로는 아래와 같이 찍히게 됩니다

안녕하세요

코드를 눈으로 이렇게 하나하나 따라가서 이해할줄 알고, 설계할 줄 알아야 겠지만, 직관적으로 콜백함수를 받아들이는게 쉽지 않은것 닽다. 그래서 직관적으로 '콜백함수를 호출하면 그 콜백된 함수에 인자를 넘겨준다'고 생각하고 코드를 이해하는 연습을 해야겠다.