[1일1js] JavaScript의 콜백 함수

Lee Tae-Sung·2021년 7월 29일
0

JS

목록 보기
22/56

https://www.impressivewebs.com/callback-functions-javascript/

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()이 실행된다.

=> 실제 매개변수는 괄호가 없는 '콜백'이지만 콜백이 샐행되면 괄호를 사용하여 완료됩니다.

=> 해당 매개변수를 중괄호 안에서 원하는 대로 호출할 수 있습니다.

=> 지난번에 공부했지만 ()를 쓰면 즉시 실행, 안쓰면 발동시 실행
(여기는 상관 없지만 복습겸.. ㅎ)

JavaScript에서 콜백 함수를 선택 사항으로 만들기

=> 콜백을 선택사항으로 만들 수 있다.

=> 만들지 않았을시

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' );

JavaScript에서 콜백 함수를 사용할 때 타이밍에 대한 참고 사항

비동기 실행이 포함된 경우 비동기 작업이 시작된 후 콜백이 실행되지만 아마도 완료되기 전에 실행될 것입니다.

=> 일단 setTime 함수와 같은 이유로 마지막이 아닐 수 있다.

함수의 모든 코드가 동기적일 때만 콜백 함수가 마지막으로 실행된다는 기본 경고 역할을 해야 합니다.
=> 같은 말이긴 하지만 최종 정리

profile
긍정적인 에너지를 가진 개발자, 이태성입니다.

0개의 댓글