[JS] 콜백함수

Hyun·2021년 12월 30일
0

JS

목록 보기
6/20
post-thumbnail

콜백함수란?

프로그래밍에서 콜백(callback) 또는 콜애프터 함수(call-after function)는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 아니면 나중에 실행할 수도 있다.
(인수=인자(argument) = 함수가 호출될 때 함수로 값을 전달해주는 )
(
매개변수(parameter) = 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수)

-> 즉, 콜백&콜애프터함수는 다른함수의 인자(=인수)로 사용되는 코드이고, 실행시간은 필요에따라 정할 수 있다!
-> 콜백은 쉽게 말하자면 어떤 일을 다른 객체에게 시키고, 그 일이 끝나는 것은 기다리지 않고 끝나고 부를 때까지 다른 일을 하는 것???
-> 만약 node.js를 쓰면서 콜백을 받아야 하는 상황에 callback 함수를 사용하지 않는다면 콜백 함수의 과정이 끝나기 전에 다음 프로세스가 진행될 수 있어서 잘 익혀야한다고한다!!

그것을 막기 위해 차례대로 수행하기 위해 callback 함수를 사용하며 그렇기 때문에 이며, 비동(non-block) 방식의 함수를 사용합니다.

https://sangminem.tistory.com/275
이 글이 도움되었다ㅠㅠ 흑..구글신 구세주

일반적으로 콜백수신 코드로 콜백 코드(함수)를 전달할 때는 콜백 함수의 포인터 (핸들), 서브루틴 또는 람다함수의 형태로 넘겨준다.
콜백수신 코드는 실행하는 동안에 넘겨받은 콜백 코드를 필요에 따라 호출하고 다른 작업을 실행하는 경우도 있다. 다른 방식으로는 콜백수신 코드는 넘겨받은 콜백 함수를 '핸들러'로서 등록하고, 콜백수신 함수의 동작 중 어떠한 반응의 일부로서 나중에 호출할 때 사용할 수도 있다 (비동기 콜백). 콜백은 폴리모피즘과 제네릭프로그래밍의 단순화된 대체 수법이며, 콜백 수신 함수의 정확한 동작은 콜백 함수에 의해 바뀐다. 콜백은 코드 재사용을 할 때 유용하다.

function checkmood(mood) {
  if (mood === "good") {
    sing();
  } else {
    cry();
  }
}

function cry() {
  console.log("ACTION::CRY");
}
function sing() {
  console.log("ACTION::SING");
}
function dance() {
  console.log("ACTION::DANCE");
}

checkmood("sad");

//<결과>
//ACTION::CRY 

기분이 좋아서 춤추고싶을때는 sing함수를 dance함수로 바꿔줘야하기때문에 불편함이 생긴다.
이를 보완한 코드가 아래와같다.

function checkmood(mood, goodCallback, badCallback) {
  if (mood === "good") {
    goodCallback();
  } else {
    badCallback();
  }
}

function cry() {
  console.log("ACTION::CRY");
}
function sing() {
  console.log("ACTION::SING");
}
function dance() {
  console.log("ACTION::DANCE");
}

checkmood("sad", sing, cry);

//<결과>
//ACTION::CRY 

기분이 sad니까 badCallback();이 실행이되고 cry가 badCallback에 들어가 결과적으로 cry();함수가 실행이된다.

이와같이 콜백함수는 다름함수의 매개변수(parameter)로 함수를 던지는 것

let plus = function (a, b, callback) {
  let c = a + b;
  callback(c);
};

plus(5, 10, function (c) {
  console.log(c);
});

//<결과>
//15

plus함수를 정의했고,
a,b에는 5,10 값을 넣어서 c가 15라는 값이 나오고 callback함수에 인자로 들어가 function(c)가 function(15)로 작동하여 최종적으로 console.log(15)이므로 15로 출력이 된다.

profile
FrontEnd Developer (with 구글신)

0개의 댓글