콜백(callback)

고차함수의 인자로 전달되는 함수를 콜백 함수(Callback function)라고 합니다.
콜백 함수는 어떤 작업이 완료되고 호출하는 경우가 많아서, 업무 중 걸려온 전화에 답신하는 전화를 나타내는 콜백이라는 이름이 붙여졌습니다.

콜백 함수를 사용하는 이유

자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문이다.
이 콜백함수기법은 자바스크립트에서 가장 오래된 비동기적 메커니즘이라고 한다.

동기(synchronous)와 비동기(asynchronous)

컴퓨터에서의 동기적 방식이란, 어떠한 동작이 끝날때 까지 다음 동작은 시작하지 못하고 대기상태에 있어야 한다.

대부분의 웹/앱 서버는 비동기적 방식을 따르는데, 어떠한 동작이 끝나지 않더라도 뒤에 있는 동작이 시작된다.
이 메커니즘은 자바스크립트에서는 싱글 스레드를 사용하는데 다른 외부 api로 구현

예를 들어, 우리가 유튜브나 넷플릭스에서 영상 시청을 할 때, 로딩을 한다고
다른 작업들을 아무것도 하지 못하는 것이(사이트 이동, 클릭 등) 아니다. 로딩 중에도
다른 작업들을 하는 것이 비동기적으로 움직이는 것이다.

비동기적 메커니즘을 사용하는 경우

1. 사용자 이벤트 처리

브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능하다.
따라서 이런 화면이벤트를 관리담당하는 녀석에게 우리는 특정 이벤트가 발생할 때 호출을 원하는 내용을 callback 함수에 전달하게 된다.

2. 네트워크 응답 처리

화면 단에서 서버에게 요청을 보냈을 때, 그 응답이 언제 올지 알 수 없다.
따라서 이런 서버에 대한 응답처리 등도 비동기적으로 처리해야 한다.

3. 파일을 읽고 쓰는 등의 파일 시스템 작업

4. 의도적으로 시간 지연 하는 기능

'use strict'

//JavaScript is synchronous.
// Execute the code block by order after hoisting.
// hoisting: var, function declaration(함수 선언문)

console.log('1');
setTimeout(() => console.log('2'),1000);
console.log('3');

// 1, 3, 2

//Synchronous callback
function printImmediately(print) {
	print();
}
printImmediately(() => console.log('hello'));

// Asynchronous callback
function printWithDelay(print, timeout) {
	setTimeout(print, timeout);
 }
 printWithDelay(() => console.log('async callback'), 2000);  
 //Callback Hell example
 
 class Userstorage {
 	loginUser(id, password, onSuccess, onError) {
    	setTimeout(() => {
       		if (
            	(id === 'Evan && password === 'kim' ||
                (id === 'Zero && password === 'kim')
              ) {
              		onSuccess(id);
                   }else {
                   	onError(new Error('not found'));
                   }
                  }, 2000);
              }
              
        getRoles(user, onSuccess, onError) {
        	setTimeout(() => {
            	if (user ==='Evan') {
                	onSuccess({ name; 'Evan', role: 'admin' });
                    }else {
                    	onError(new Error('no access'));
                       }
                      }, 1000);
                    }
                  }
   
   		const userStorage = new Userstorage();
        const id = prompt('enter your id');
        const password = prompt('enter your password');
        userStorage.loginUser(
        	 id,
  			password,
  			user => {
    			userStorage.getRoles(
      			user,
     			userWithRole => {
        			alert(
          				`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`
        );
      },
      error => {
        console.log(error);
      }
    );
  },
  error => {
    console.log(error);
  }
);