1. 콜백 함수

1.1 콜백 함수 정의

콜백이란 어떠한 요청이 발생할 때 응답하는 행위로 전달하는 동작을 의미하며, 콜백 함수란 요청을 받고 실행되는 함수이다. 특정 함수에 매개변수로 전달되는 함수를 콜백 함수라고 하고 콜백 함수를 전달 받아 호출하는 함수를 고차 함수라고 한다. 이어달리기로 비유하자면 1번 주자가 2번 주자에게 바통을 넘겨줘야 출발할 수 있는 것처럼 콜백 함수는 어떠한 동작 후 실행되는 함수이다. 매개변수로 함수를 전달 받아 나중에 호출한다는 것이 전체적인 콜백 함수의 개념이다.

1.2 콜백 함수 예제

function 인사(인사말){ 
  console.log("인사해야지....!");
	인사말()
}
인사(()=>{console.log("안녕하세요!🙏")})

위 예제에서 콜백 함수는 인사말이고, 고차 함수는 인사이다. 인사 함수가 호출될 때, 인사 함수 인수로 전달된 “안녕하세요!”를 출력하는 콜백 함수가 실행된다.

1.2.1 filter() 메서드에서 활용되고 있는 콜백 함수

filter(콜백함수) // filter 기본 형식, 조건에 맞는 새로운 배열 반환

const 오늘할일 = [{
    '장소' : '집',
    '할일' : '밥 먹기'
}, {
    '장소' : '집',
    '할일' : '김치 먹기'
}, {
    '장소' : '회사',
    '할일' : '삼겹살 먹기'
}, {
    '장소' : '회사',
    '할일' : '갈비 먹기'
}, {
    '장소' : '헬스장',
    '할일' : '운동 하기'

}];

const 집선택하는콜백함수 = (오늘할일) => (오늘할일.장소 === '집') // 집 검색하는 함수 작성

const 집에서할일 = 오늘할일.filter(집선택하는콜백함수) // filter에 콜백 함수로 사용

console.log(집에서할일)
// 출력값 
[{
    '장소' : '집',
    '할일' : '밥 먹기'
}, {
    '장소' : '집',
    '할일' : '김치 먹기'
}]

2. 콜백 함수 동기 처리 방식

2.1 동기 처리의 특징

순차적으로 하나씩 코드가 실행되기 때문에 작업 순서가 보장되며 직관적이다. 오래 걸리는 작업이 실행될 경우에는 그 작업이 완료될 때까지 기다렸다가 다음 코드를 실행하기 때문에 시간이 지연된다는 단점이 있다.

2.2 동기 처리 예제

console.log("반갑습니다!👋"); // 1
function 인사(인사말){   // 2
	인사말()  // 4
}
인사(()=>console.log("안녕하세요!🙏"))  // 3
console.log("또 봬요!🙌")   // 5

위 예제 코드의 예상 콜백 함수 실행 순서는 아래와 같다.

console.log(”반갑습니다!👋”)
function 인사(인사말){…}
인사(()=>console.log("안녕하세요!🙏"))
인사말()
console.log("또 봬요!🙌")