함수의 인자로 함수를 전달할 수 있다. 이것이 콜백의 시작점.
obj.sort() 여기서 매소드 " . " 앞에 있는 것은 객체
defer와 use strict 그리고 ajax
const numbers = [20,30,1,2,3,4,5,6,7,9,10]
console.log(numbers.sort()) // [ 1, 10, 2, 20, 3, 30, 4, 5, 6, 7, 9 ]
sort 메서드로 배열을 정렬하면 수의 크기로 정렬이 되지 않는다. 수의 크기로 정렬해보자.
const numbers = [20,30,1,2,3,4,5,6,7,9,10]
const sortFunc = function(a, b){
if(a > b){
return 1
} else if( a < b){
return -1
} else {
return 0
}
}
console.log(numbers.sort(sortFunc)) // [ 1, 2, 3, 4, 5, 6, 7, 9, 10, 20, 30 ]
sortFunc라는 변수를 만들고 함수를 담았다. 메서드 sort에 sortFunc 변수를 주었다. 변수 sortFunc의 함수에 파라메터로 a,b를 준다. a와 b는 배열 안 요소를 각각 비교하는 파라메터인데 function에서 a와 b를 크기를 비교하면서 순서를 정한다.
const numbers = [20,30,1,2,3,4,5,6,7,9,10]
const sortFunc = function(a, b){
return a - b;
}
console.log(numbers.sort(sortFunc)) // [ 1, 2, 3, 4, 5, 6, 7, 9, 10, 20, 30 ]
결과적으로 a - b를 한 값을 리턴하면 정렬이 된다. (이해 필요) 이때 sortFunc 함수가 콜백 함수다.
콜백 함수가 필요한 이유
자바스크립트는 이벤트 기반 언어다. 다음 명령어를 실행하기 전 이전 명령어의 응답을 기다리지 않고 다은 이벤트를 기다리며 계속 명령을 수행한다.
function first(){
console.log(1);
}
function second(){
console.log(2);
}
first();
second();
// 1
// 2순서대로 함수가 실행됐다. 이제 first()함수 내부에 setTimeout()을 걸면 결과가 달라진다.
function first(){
setTimeout(function(){
console.log(1)
},500)
}
function second(){
console.log(2);
}
first();
second();
// 2
// 1콜백 함수 만들기
function doHomework(subject) {
console.log(`Starting my ${subject} homework.`);
}
doHomework('math'); // Starting my math homework.subject 를 파라메터로 가지고 doHomwork라는 함수가 있고 "math"를 argument로 받는다. 여기에 callback 함수를 추가한다.
function doHomework(subject, callback) {
console.log(`Starting my ${subject} homework.`);
callback();
}
doHomework('math', function() {
console.log('Finished my homework');
});
// Starting my math homework.
// Finished my homework실행 순서를 살펴보자면 먼저 doHomework()가 실행되고 인자를 받은 console.log(Starting my ${subject} homework.)가 실행되며 출력이 된다. 그리고 callback()이 실행되고 doHomework()의 두 번째 인자인 함수가 실행되면서 그 안의 console.log('Finished my homework')가 출력된다.
