javascript - 콜백(2)

함수의 인자로 함수를 전달할 수 있다. 이것이 콜백의 시작점.

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')가 출력된다.

출처 : https://medium.com/@oasis9217/%EB%B2%88%EC%97%AD-javascript-%EB%8F%84%EB%8C%80%EC%B2%B4-%EC%BD%9C%EB%B0%B1%EC%9D%B4-%EB%AD%94%EB%8D%B0-65bb82556c56