# Asynchronous Programming In Javascript - Callback

#  1\] Features of functions in Javascript

#### Javascript의 function은 First-Class Citizens(1급 객체)이다.

\=> 그 말은, 함수는 그 자체가 객체가 된다는 말이며 다른 Javascript의 객체처럼 사용될 수 있다는 뜻이다.

따라서,

1. 함수는 변수에 할당할 수 있다.
    
2. 함수는 다른 함수의 인자로 줄 수 있다.(callback으로 줄 수 있다.)
    
3. 함수는 다른 함수에서 리턴될 수 있다.
    

# 2\] Callback

다른 함수에서 인자를 받아 그 함수 내에서 실행되는 함수

Example)

![](https://blogger.googleusercontent.com/img/a/AVvXsEhfI6rYOue6sD0TeaukctMkoPqCVKWzAysOotDQC5J-VVY_1ep1W1q-P7npL3CFJ-qrg5_Ss9F90ZO7drnPJIQajSRaawvAhCEosPUEJrzx0ln4TF1V9N8BlEylgWmazNSSUvFtFxCstvHgMlok54Mq7rMljQH3Nz8feKLHG-3l_Z7-6FEsOC5Io_TlQ4VR=w265-h220 align="left")

forEach라는 함수에서 인자를 받아서 print가 forEach 함수 내에서 실행되고 있다.

print라는 함수를 정의하고, callback으로 사용한 것이다.

print()가 아닌 print인 것을 볼 수 있다.

# 3\] Further Details

### Callbacks Are Not Always Asynchronous

![](https://blogger.googleusercontent.com/img/a/AVvXsEiVV_bh1s7ubafMvs_dYkJc0HER_1KUx3QhY8k_571fIVh7-Ys1bwa-GPKdDSsJgCVon1eW3KHm-u85LcpPQ9BBXZuhQB3BllZOKmrrS5FZJPwl66KNiGuhEDgD_Ahz-bHKb08QhIJtUhGieCO3fU_ocphj0DqHlCFrPmT-rwhLPwvDor8MAm8f7bqZ5U9O=w633-h184 align="left")

callback을 비동기 처리(좌)할 수도, 동기 처리(우)에 사용할 수도 있다.

# 4\] Handle Errors In Asynchronous Code

callback의 첫번째 인자를 통해 에러를 핸들링한다.

![](https://blogger.googleusercontent.com/img/a/AVvXsEgxwAzlGolXtC91yKonZ1bUa2zHQqR8vUdIdUghJSFkeriJTQRoNYJgv-CtdX-8Pd8bSyywzxTwYZBv5rzZWZk0Z63WLT6hpOUuSgqC7hVLUfBNwrXm8ernMJRDiYTtV1lSX_4ovFkMJH-nmh8xiHG86yGiPP0UxkVO70wZC10OeUKjI35zPSKB2A2296zW=w658-h477 align="left")

비동기 함수 내에 문제가 생기면 어떤 종류의 오류가 발생했는지

알려주는 첫번째 인수(error라는 인자)를 사용하여 콜백이 호출된다.

문제가 없으면, 첫번째 인자는 null이 된다

# 5\] Limitation of callback

### Callback Hell

![](https://blogger.googleusercontent.com/img/a/AVvXsEgV1Q5kwjf2At4WVRzj_8oynbltipgfSGai8ggfE26kkfBUnBVYayneSNYdQOG1ytXWfd6Jd6NW62XQXVvRZCh2ugUn1wOg2aIVE8Zn-WRWl5ippMLPqr1y8un6R36wbE8k_4BZIcC3WbwzJQp_KeWXPkLmtaJRmvmVFKmnNqVS4WNnYRaRffu3lnxAAc2b=w471-h374 align="left")

다음과 같이 함수를 적용할 경우, plusOne 함수는 비동기이기 때문에

1초 뒤 1, 2, 3이 동시에 나오게된다.

따라서 callback을 사용하여 1, 2, 3이 1초씩 걸리게 나오게 하려면 다음과 같이 하면 된다.

![](https://blogger.googleusercontent.com/img/a/AVvXsEhPkekrK5iwDhh5s-JuBlspIOVG9Bq98RPTkm6ulBvAg0NyOLnMGD94jhW-wwrlc4EoakHw-sPWjzdoxrYaoL8GGu3r2r7o7I_zrp2gb-aP5NxUSiaSZXlFF-s6Um8reK61VUTk54hR1bM9dh3rXU91n9nehaO3_OXTfFtarmXi8q6RuZjbUfXFo0vM9WFh=w489-h231 align="left")

새로운 함수가 추가될 수록 안쪽 콜백에 자리잡게 되고, 이러한 읽고 이해하기에 힘든 Callback Hell이 만들어지며, 이러한 이유로 Promise를 개발하게 된다.