늘 겸손하게

JavaScript - Callback 본문

Programming/JavaScript

JavaScript - Callback

besforyou999 2022. 8. 18. 17:59

콜백

 

 

다른 코드에 인수로서 넘겨주는 실행 가능한 코드를 콜백(callback) 또는 콜애프터 함수(call-after function)라고 부릅니다.

 

아래와 같은 배열이 있다고 해보자

 

let numbers = [20, 10, 9, 8, 7, 5];

 

위 배열을 내장함수인 sort()를 이용해 정렬하고 콘솔에 출력해보자

 

let numbers = [20, 10, 9, 8, 7, 5];
numbers.sort();

console.log(numbers)

 

되긴 되는데 이상하게 된다

 

정렬이 되긴 되나 이상하게 된다.

 

이상하게 정렬된 이유는 sort() 메소드의 인자로 compareFunction() - 비교함수를 주지 않아서 디폴트로 원소들을 문자열로 보고 유니코드 포인트 순서대로 문자열을 정렬했기 때문.

 

배열을 제대로 정렬할 수 있도록 compareFunction을 구현하고 sort 메소드에 인자로 줘보자.

 

 

let compare = function(a, b) {
  return a - b;
}

let numbers = [20, 10, 9, 8, 7, 5];
numbers.sort(compare)

console.log(numbers)

 

 

원하는대로 정렬이 된다.

 

 

정리

 

 

자바스크립트는 함수가 값으로 사용될 수 있어서 함수의 인자로 함수를 전달할 수 있다. 값으로 전달된 함수는 호출까지 가능하여 사용자가 구현한 함수를 값으로 전달하여 특정 함수의 기능을 바꾸는것도 가능하다.

 

이처럼 함수를 값으로 전달하여 넘겨주는 코드를 콜백(callback) 또는 콜애프트 함수(call-after function)이라고 부른다.

 

이러한 콜백함수는 자바스크립트 비동기 처리, 이벤트 처리에 자주 쓰인다.