callback

콜백 함수

콜백 함수란 나중에 호출되는 함수로, 그 자체로 특별한 선언이나 문법적 특징을 가진게 아닌 호출 방식에 의한 구분이다.
코드를 통해 함수를 호출하는 것이 아니라, 어떤 이벤트가 발생하거나 특정 시점에서 호출되는 함수를 말한다.
자바스크립트에서 비동기적 프로그래밍을 하기 위해 콜백 함수를 사용한다.

예시

• loadScript() 함수

function loadScript(scriptUrl) {
    let script = document.createElement('script');
    script.src = scriptUrl;
    document.head.append(script);
}

1. loadScript함수는 <script src="scriptUrl">를 동적으로 만들고 문서에 추가한다.
2. 브라우저는 자동으로 <script>태그에 있는 scriptUrl을 불러오고 로딩이 완료되면 scriptUrl를 실행한다.

• loadScript() 호출

loadScript('script.js');

newFunc(); // Error: newFunc is not defined

• ./script.js 내부

function newFunc() {
  console.log("success!");
}

1. 해당 경로에 위치한 스크립트 파일을 불러오고 실행한다.
2. 이때 스크립트 파일은 '비동기적으로' 실행된다. 파일 로딩이 시작되더라도 실행은 loadScript()함수가 끝난 후에야 되기 때문이다.
3. loadScript() 안에 있는 코드들은 스크립트 파일 로딩이 끝날 때까지 기다리지 않는다.
4. 따라서 loadScript()함수를 호출하자마자 스크립트 파일 내부 함수를 호출하면 에러가 발생한다. 스크립트 파일을 다 읽어오지 않았기 때문이다.

콜백 함수 사용

• loadScript() 함수

function loadScript(scriptUrl, callback) {
    let script = document.createElement('script');
    script.src = scriptUrl;
    script.onload = () => callback(script);
    document.head.append(script);
}

• loadScript() 호출

loadScript('./script.js', function() {
  newFunc();
});

1. loadScript()에 callback함수를 인수로 추가한다.
2. 스크립트 로딩이 끝나면 callback함수를 실행하므로 newFunc()가 제대로 동작하게 된다.

에러 핸들링

오류 우선 콜백(error-first callback) 패턴

• loadScript() 함수

function loadScript(scriptUrl, callback) {
    let script = document.createElement('script');
    script.src = scriptUrl;
    script.onload = () => callback(script);
    script.onerror = () => callback(new Error(`에러 발생`);
    document.head.append(script);
}

• loadScript() 호출

loadScript('./script.js', function(error, script) {
  if(error) {
  	// 에러 처리
  } else {
  	// 스크립트 파일 로딩이 성공적으로 끝남
  }
});

1. 첫번째 인수: callback을 사용해 에러가 발생하면 callback(err)가 호출된다.
2. 두번째 이후 인수: 에러가 발생하지 않고 동작이 성공하면 callback(null, result1, result2...)가 호출된다.

promise로 콜백 지옥 피하기

여러 함수가 순차적으로 동작이 진행되길 원하는 경우 콜백 속에 콜백을 넣어 호출할 수 있다.
하지만 그 과정이 반복되면 코드의 중첩이 깊어지고 가독성이 떨어지게 되며, 이를 '콜백 지옥(callback hell)'이라고 부른다.
이러한 현상을 피하기 위해 promise를 사용한다.

참조

https://ko.javascript.info/callbacks