https://www.impressivewebs.com/callback-functions-javascript/
=> 아 콜백이라고 전화기 ;;
콜백 함수란?
다른 코드에 인수로 전달되는 실행 코드 또는 실행 코드에 대한 참조입니다.
예) addEventListener('click', function)
사이트에선 jQuery를 예시로 들었다.
console.clear();
function mySandwich(param1, param2, callback) {
console.log('Started eating my sandwich. It has: ' + param1 + ', ' + param2);
callback();
}
mySandwich('ham', 'cheese', function() {
console.log('Finished eating my sandwich.');
});
=> 와 이렇게 해놓으니 헤깔린다...
=> 먼저 function mySandwich는 정의일 뿐이다
=> 실제 실행은 밑의 mySandwich 부분 그러면 정의가 발동
=> 그래서 ' started eating my sandwich. It has: ' + param1 + ', ' + param2 '가 콘솔에 나타난다.
=> param1과 param2는 정의된 ham, cheese가 반영된다.
=> 그 다음 callback()이 실행된다.
=> 실제 매개변수는 괄호가 없는 '콜백'이지만 콜백이 샐행되면 괄호를 사용하여 완료됩니다.
=> 해당 매개변수를 중괄호 안에서 원하는 대로 호출할 수 있습니다.
=> 지난번에 공부했지만 ()를 쓰면 즉시 실행, 안쓰면 발동시 실행
(여기는 상관 없지만 복습겸.. ㅎ)
=> 콜백을 선택사항으로 만들 수 있다.
=> 만들지 않았을시
function mySandwich (param1, param2, callback) {
console .log( '내 샌드위치를 먹기 시작했습니다. ' + param1 + ', ' + param2);
콜백();
}
// 필수 인수가 누락되었습니다. 브라우저의 개발자 도구에서 다음 오류 메시지를 확인하십시오. Uncaught TypeError: callback is not a function at mySandwich
mySandwich( 'ham' , 'cheese' );
function mySandwich (param1, param2, callback) {
console .log( '내 샌드위치를 먹기 시작했습니다. ' + param1 + ', ' + param2);
if (콜백) {
콜백();
}
}
// 세 번째 인수는 없지만 콜백을 먼저 확인하기 때문에 오류는 없습니다.
mySandwich( '햄' , '치즈' );
=> 강제로 ㅋㅋㅋㅋㅋㅋㅋㅋ 한번 쓰게 만든거 ㅋㅋㅋㅋㅋㅋㅋ
=> 굳이 왜 함수인지를 확인해줘야하나 했더니
=> 다음과 같은 과정을 거친다면 오류 없이 넘어갈 수 있다.
=> typeof()를 사용해 함수인지를 체크한다
function mySandwich (param1, param2, callback) {
console .log( '내 샌드위치를 먹기 시작했습니다. ' + param1 + ', ' + param2);
if (콜백 && typeof (콜백) === '함수' ) {
콜백();
}
}
// 세 번째 인수는 함수가 아닙니다.
mySandwich( 'ham' , 'cheese' , 'vegetables' );
비동기 실행이 포함된 경우 비동기 작업이 시작된 후 콜백이 실행되지만 아마도 완료되기 전에 실행될 것입니다.
=> 일단 setTime 함수와 같은 이유로 마지막이 아닐 수 있다.
함수의 모든 코드가 동기적일 때만 콜백 함수가 마지막으로 실행된다는 기본 경고 역할을 해야 합니다.
=> 같은 말이긴 하지만 최종 정리