[JavaScript] Callback 함수

반응형

SMALL

function main(param) {

}

 

함수 

- 어떤 특정한 일을 하는 코드의 묶음

-> 더 다양하고 의미있는 일을 하기 위해 매개변수 또는 인자라고 하는 입력값을 전달받을 수 있다

->> 함수는 여러가지 입력값을 전달받을 수 있다. 숫자, 문자열, 객체 등 

->>> 함수는 또다른 함수를 인자로 전달받을 수 있는데, 이렇게 다른 함수의 인자로 전달되는 함수를 콜백함수라고 부른다

function main(param) {
	param()
}

 

콜백함수는 콜백함수를 전달받은 함수에 의해 호출된다

 

function main(x) {
  x();
}

function cat() {
  console.log('냥');
}

main(cat); // 출력 : 냥

 

 

function main(x) {
  x();
}

main(() => {
  console.log('냥');
});​

 

main 함수 호출 시 cat라는 콜백 함수를 인자로 전달해줬기 때문에

main함수의 x 매개변수로 cat이 들어감

main함수가 실행되면서 전달해준 콜백함수 호출 => 냥 출력

 

callback함수가 언제 어떻게 호출될지는 main 함수의 구현사항에 달려있다

 

※ ※  주의!!  ※ ※

main(cat()); => 함수를 인자로 전달할때 뒤에 소괄호(())를 붙이면 즉각적으로 호출된다.

함수를 인자로 전달하는게 아니라 함수의 리턴값을 인자로 전달하는 게 되어버림

function main(x) {
  console.log(x);
}

function cat() {
  return 1;
}

main(cat());  // 1 출력

 

---

 

예시 )

 

function greetToUser(greet) {
  const name = '냥이';
  greet(name);
}

function greetInKorean(name) {
  console.log(name + '님, 안녕하세요');
}

function greetInEnglish(name) {
  console.log('hi, ' + name);
}

greetToUser(greetInKorean);

'

function greetToUser(greet) {
  const name = '냥이';
  greet(name);
}

function greetInKorean(name) {
  console.log(name + '님, 안녕하세요');
}

function greetInEnglish(name) {
  console.log('hi, ' + name);
}

greetToUser(greetInEnglish);

 

 

 

 

 

 

 

https://youtu.be/8FhRtDUhp1Q?si=Mf3Y3dbVT9dj_K9S