[ 함수 ] 콜백 (Callback)

//  콜백 (Callback) => 함수 이다.

 

const a = () => {
    console.log('A')
}

const b = () => {
    console.log('B')
}
// a()
// b()

//  위와 같이 작성 하면, a() 함수가 호출 되고, 함수 호출이 종료 되고, b() 함수가 호출 된다.

 

A

B

 

const a = () => {
    console.log('A')
}

const b = () => {
    console.log('B')
}

a(b)    //  A

//  a() 함수에 b 라는 함수 데이터를 인자로 넣은 모습 이다.
//  이때, b 라는 함수를 콜백 함수 라고 한다. => 줄여서 '콜백' 이라고 한다.
//  즉, 어떤 함수가 실행될 때, 해당 함수의 인자로 들어가는 또 하나의 함수를 콜백 함수 라고 한다.

 

함수 a를 호출할 때, 인자로 무명의 화살표 함수 데이터가 담긴 변수 b가 인자로 사용된 상황 이다.

 

이렇게 특정 함수가 호출될 때, 특정 함수의 인자로 사용 되는 또 하나의 함수를 콜백 함수 라고 한다.

 

줄여서 콜백 이라고 한다.

 

//  b라는 함수 데이터 자체를 a 함수가 호출될 때 인자로 넣으니까,
//  함수 b의 데이터를 사용 하기 위해서 a 함수의 인자에 파라미터를 작성 해보자.
//  위에서 const a와 const b로 함수를 표현했으니까,
//  const c와 const d로 작성함.

const c = (callback) => {   //  파라미터명 : callback 이라는 매개변수로 지어줌.
    console.log('C')
}

const d = () => {
    console.log('D')
}

c(d)    //  C

 

함수 c를 호출할 때, 함수 c의 인자로 함수 d의 데이터가 들어가고, 이 데이터를 함수 c에서 사용할 수 있도록,

화살표 함수의 인자에 매개변수를 작성해준다.

 

위는 매개변수 이름을 callback 이라고 작성했지만, 아무거나 상관 없다.

 

//  출력 결과를 확인 하면, c 함수를 호출 하면, 그냥 당연히 C가 출력 된다.
//  c 함수에 인자로 d 라는 함수 데이터를 넣은 상황인데,
//  이것을 활용 하기 위해서는 어떻게 해야할까 ?
//  바로 c 함수의 중괄호 블럭 내부에 아래와 같이 작성 하면 된다.

const e = callback => {
    console.log('E')    //  E
    callback()  //  F
}

const f = () => {
    console.log('F')
}

e(f)    //  그러면 함수 e를 호출 했을 때, E도 출력 되고 함수 f의 console.log('F') 도 출력 된다.

//  callback 이라는 매개변수에 f 라는 함수 데이터가 들어 가고,
//  callback 이라는 매개변수의 값은 결국 함수 데이터니까,
//  callback() 이라고 작성 하면, 그 해당 함수 데이터가 순차적으로 호출 된다.

//  즉, 함수 e의 인수에는 callback 이라는 매개변수가 있고, 함수 e의 인수로 함수 f를 넣으면,
//  f라는 함수의 데이터가 callback 이라는 매개변수에 대입되므로,
//  매개변수 callback 에다가 소괄호 ()를 붙혀서, 함수 f를 호출 하는 개념이 된다.

 

함수 e가 호출될 때,  함수 f의 데이터를 인자로 넣었으므로, 함수 f의 데이터를 callback 이라는 매개변수로 받아서,

 

매개변수 callback에는 함수 데이터가 들어가므로, 매개변수() 라고 표현하여 콜백 함수를 사용할 수 있다.

(원래 함수를 호출할 때 (사용할 때) 소괄호 () 를 붙혔기 때문에 당연한 문법)

 

그러면, 함수 e가 호출될 때, 차례대로 console.log('E') 를 읽고, E가 출력 되고,

callback() 은 함수 f의 데이터가 담겨져 있으므로, console.log('F) 를 읽고, F가 출력 된다.

 

E

F

 

//  다른 예시도 확인 하기.

const sum = (a, b) => a + b  // return a + b 를 줄여서 return 과 { } 생략.

/*
원래는,
const sum = (a, b) => {
    return a + b
}
 */

console.log(sum(1, 2))  //  3

console.log(sum(3, 7))   //  10

 

위의 예시는 특별히 콜백을 사용한 경우가 아니다.

 

단순하게 sum이라는 함수의 인자에 숫자를 넣은 상황 이다.

 

//  1초 뒤에 값을 반환 하도록 하는 함수를 만들기.

const sum2 = (a, b) => {
    setTimeout(() => {
        return a + b
    }, 1000)
    //  setTimeout()  함수는 인자로 함수와, 시간을 의미하는 정수를 추가 한다.
    //  그래서 인자로 들어간 화살표 함수가 콜백 함수 == 콜백 이 된다.
}
//  위의 상황은 setTimeout 이라는 함수가 return을 갖는 상황이기 때문에,
//  결과적으로 sum2 함수의 밖으로는 아무 데이터가 나가지 않게 되서 undefined가 출력 된다.

console.log(sum2(1, 2)) //  undefined

 

setTimeout() 함수의 인자로, 2개를 넣은 상황.

 

화살표 함수와 정수 1000

 

그래서 sum2 함수가 호출될 때, setTimeout() 함수가 호출 되고,

이 때, 이 setTimeout() 함수의 인자로 화살표 함수가 사용 됬기 때문에, 화살표 함수는 콜백 함수 이다.

 

하지만, 반환값을 a + b로 갖는 것은 setTimeout() 함수가 갖는것이다.

 

저 함수는 호출이 끝나면 죽어버린다. 

 

sum2가 console.log() 의 인자로 사용된 경우인데, sum2는 반환값을 가지고 있지 않기 때문에, undefined가 출력 된다.

 

//  그래서 위와 같은 상황일 때는 아래와 같이 작성할 수 있다.

const sum3 = (a, b) => {
    setTimeout(() => {
        return a + b
    }, 1000)
}

sum3(1, 2)

//  위와 같이 sum3 함수가 있고, sum3(1, 2) 함수를 호출하는 상황일 때,
//  아래와 같이 sum4 함수를 호출 할 때, 인자로 세번째 인자를 넣어줄 때, 함수를 하나 추가 한다.
//  (함수명은 중복되기에 sum1, sum2, sum3, sum4 이런식으로 표시 하고 있다)

const sum4 = (a, b) => {
    setTimeout(() => {
        return a + b
    }, 1000)
}

sum4(1, 2, () => {  //  화살표 함수를 sum4 함수의 인자로 추가.
})

//  그러면, sum4 함수를 호출 할 때, 무명의 화살표 함수 데이터를 인자로 전달 하기 때문에,
//  이 화살표 함수 데이터를 사용 하기 위해서 sum4 함수의 선언부에서,
//  이 화살표 함수 데이터를 받을 수 있는 매개변수를 작성해준다.
//  함수명이 겹치니까 아래에서는 sum5 라고 표기.

const sum5 = (a, b, c) => {
    setTimeout(() => {
        c() //  setTimeout() 함수 내부에서 c라는 매개변수로 받은 화살표 함수를 사용 하는 상황.
    }, 1000)
}

sum5(1, 2, () => {
})

//  이제 이 c() 함수의 인자로 매개변수 a와 b를 a + b 라고 작성 한다.
//  그러면 setTimeout() 함수 내부에서 c라는 함수가 호출될 때, a와 b가 더해진 값이 들어 오게 된다.

const sum6 = (a, b, c) => { //  매개변수 c에 아래의 (value) => { console.log(value) } 가 대입.
    setTimeout(() => {
        c(a + b)    //  무명의 화살표 함수는 value라는 매개변수 1개를 갖는 상황이므로,
                    //  1 + 2 = 3의 값이 value에 대입되고, 결국, console.log가 3으로 출력 된다.
    }, 1000)
}

sum6(1, 2, (value) => { //  화살표 함수의 매개변수가 1개 이므로 소괄호 생략 가능.
    console.log(value)  //  3 (1초 뒤에 3이 출력 된다)
})

//  이런식으로 콜백 함수를 활용 해서 setTimeout() 함수를 사용 하는 특정 상황에 유용 하게 사용될 수 있다.

 

과정을 하나 하나씩 풀어서 정리한 상황인데, 

 

결론은 어떤 값을 출력시킬 수 있도록 하는 기능을 가진 화살표 함수를 sum6 함수의 세번 째 인자로 넣고,

 

그러면 setTimeout() 함수 내부에는 sum6가 받은 모든 인자값을 사용 할 수 있는 상황이니,

 

결국 화살표 함수 c의 인자로 a + b (1 + 2 = 3) 의 값이 들어가고, c 함수가 호출되면서 1초 후에 3을 출력 시키는 상황이다.

 

 

 

 

 

 

[ 참고 ]
자바스크립트를 공부하면서, 자바와 다른 부분이 있어서 메모.
자바는 함수를 선언할 때, 정적 메서드 (클래스 메서드) 로 선언 하고, 인스턴스 메서드의 개념이 따로 존재 한다.
자바스크립트에서는 함수를 선언할 때, 여러 가지 방법으로 함수를 선언할 수 있다.
function 키워드를 사용하거나, 함수 표현식을 사용하거나, 화살표 함수를 사용 해서 선언 한다.

 

https://hwanii96.tistory.com/483

또한, 특정 함수를 호출할 때,
자바는 함수의 인자 개수와 호출할 때의 인자값의 개수가 다르면, 애초에 컴파일 에러를 발생시킨다.
자바스크립트에서는 함수의 인자 개수와 함수를 호출할 때의 인자값의 개수가 다르더라도 컴파일 에러가 발생 하지 않음.
유연하게 undefined로 표현되거나, 무시 된다.