[ JS ] Callback Functions

함수

• 어떤 특정한 일을 하는 코드의 묶음
• 더 다양하고 의미있는 일을 하기 위해 매개변수 또는 인자라고 하는 입력값을 전달 받을 수 있음
• 함수는 여러가지 종류의 인자를 전달 받을 수 있음
  (숫자, 문자열, 객체, 또 다른 함수)

Callback Functions

• 어떤 함수의 인자로 전달되는 함수

main(function () {})

• 콜백함수를 전달 받은 함수에 의해서 호출 됨

function main(param) {
	param()
}

• "함수 하나 전달할테니 나중에 알아서 불러줘~!" 느낌임

---

function main(x) {
	x();
}

function sayGood() {
	console.log('좋아요');
}

main(sayGood);

// 좋아요

• x는 함수니까 소괄호 붙여서 콜백함수 호출 가능

• main 함수를 호출할 때 sayGood이라는 콜백함수를 인자로 전달해줬기 때문에 main 함수의 x 매개변수로 sayGood이 들어가게 됨

• main 함수 내부의 코드가 실행이 되면서 전달해준 콜백함수가 호출이 되어서 sayGood 함수가 잘 실행됨

• 중요한 점 : 콜백함수는 콜백함수를 전달받은 함수에 의해서 호출이 된다

• sayGood이라는 함수를 main 함수에 전달해줬기 때문에 sayGood 콜백함수는 main 함수 내부에서 main 함수의 구현 사항에 의해 호출이 됨

• 콜백함수가 언제 호출될지는 main함수의 구현 사항에 달려있음

function main(x) {
	console.log('준비작업입니다');
  	x();
  	console.log('정리작업입니다');
}

function sayGood() {
	console.log('좋아요');
}

main(sayGood);

• 이렇게 콜백함수를 호출 전에 준비작업을 실행시키고, 콜백함수 호출 후에 정리작업을 실행시킬 수 있음

• 콜백함수를 안에서 전달하는것도 가능

main(function sayGood() {
	console.log('좋아요');
})

• 이름 생략해서 익명함수로 전달해도 됨

main(function () {
	console.log('좋아요');
})

• 화살표 함수 사용해도 됨

main(() => {
	console.log('좋아요');
})

---

주의사항

main(sayGood());

• 콜백함수 호출할때 함수 뒤에 소괄호를 붙이는 실수를 하지 말자
• 함수 뒤에 소괄호를 붙여버리면 함수는 즉각적으로 호출이 됨
• 그러면 함수를 인자로 전달하는게 아닌 함수의 return 값을 인자로 전달하는것이 되어버림

function main(x) {
	console.log('준비작업입니다');
  	x();
  	console.log('정리작업입니다');
}

function sayGood() {
	console.log('좋아요');
  	return 3
}

main(sayGood());

• 이렇게 sayGood 함수 뒤에 소괄호를 붙이면 sayGood이라는 콜백 함수를 전달하는게 아니라
  sayGood 함수의 return값인 3을 전달하게 됨
• undefined를 전달하는 것과 같음

---

실전 코드 실습

function greetToUser(greet) {
	const name = '햅피빈';
  	greet(name);
}

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

greetToUser(greetInKorean);

// 햅피빈님, 안녕하세요

greetInKorean 콜백함수 실행 과정

1. greetToUser의 인자로 greetInKorean이라는 콜백 함수를 전달해줬기 때문에 greet은 greetInKorean임

2. 전달해준 콜백함수를 호출할때 콜백함수의 인자로 함수 내부에서 정의해준 name이라는 변수를 넣어줬기 때문에
   greetInKorean이 실행이 될 때 '햅피빈'이 name으로 들어감

3. console에 '햅피빈님, 안녕하세요'이 잘 출력이 됨

function greetToUser(greet) {
	const name = '햅피빈';
  	// ... 데이터 로딩
  	greet(name);
}

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

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

greetToUser(greetInEnglish);

// Hi, 햅피빈

• 콜백함수를 사용하면 부품을 교체하는 것처럼 함수의 인자를 원하는 콜백함수로 교체해서 다른 기능을 하도록 만들 수 있음
• 또한, 전달해준 콜백함수는 greetToUser 함수를 통해 호출되기 때문에 함수 내부 구현사항에서 원하는 시점에서 콜백함수를 호출해줄 수 있다는 장점이 있음
• 이러한 특징은 네트워크 통신처럼 비동기적으로 실행되는 함수를 처리할때 편리함
• 사용자 데이터 로딩, 사용자 로그인 등이 끝난 이후에 콜백함수가 실행되도록 만들때 좋음

---

JavaScript, 브라우저에서 기본적으로 제공하는 API의 Callback Functions

• setTimeout() : 인자로 전달된 콜백함수를 일정 시간동안 기다린 후에 호출해주는 함수
• 첫 번째 인자 : 콜백함수
• 두 번째 인자 : 지연시간(밀리 세컨 단위)

setTimeout(() => {
	console.log('hi')
}, 1000);

• 콜백함수의 호출은 콜백함수를 전달해준 함수인 setTimeout의 내부 구현사항에 달려있음