자바스크립트 공부하기 - 콜백함수

 

 

먼저 콜백함수가 뭔지 먼저 쉽게 이해해보자..

 

---

콜백 함수 쉽게 이해하기

콜백 함수는 "나중에 실행해줘!" 라고 하는 함수야.
📌 즉, 어떤 함수 안에서 다른 함수를 실행할 때 사용하는 함수라고 생각하면 돼!

 

🍕 피자 배달로 비유해볼게!

1. 네가 피자를 주문했어.
2. 가게에서 "피자가 완성되면 전화해줄게!" 라고 해.
3. 피자가 완성된 후, 가게가 너에게 전화(call back)!
4. 네가 전화를 받고 피자를 가지러 가.

💡 이 전화가 바로 "콜백 함수"야!
즉, 피자 가게(함수)가 바로 전화(콜백 함수)를 걸어서 네가 원하는 작업을 하도록 하는 거지.

---

 

📌 어디에 많이 쓰일까?

콜백 함수는 비동기 작업(나중에 실행될 작업)에서 많이 사용돼!

• 버튼 클릭 시 실행될 함수
• 데이터를 가져오고 나서 실행될 함수
• 타이머(몇 초 뒤 실행할 함수)

 

🙋‍♀️ 나중에 실행되는 모든 함수가 콜백 함수야?

❌ 아니야! 단순히 나중에 실행되는 게 아니라, **"다른 함수의 인자로 전달된 함수"**만 콜백 함수야!

📌 콜백 함수가 아닌 경우

function greet() {
  console.log("안녕!");
}

setTimeout(greet, 2000);  // ✅ 콜백 함수 (setTimeout에 인자로 넘김)
setTimeout(function () {
  console.log("2초 뒤 실행됨!");
}, 2000); // ✅ 콜백 함수 (익명 함수 형태)

greet();  // ❌ 콜백이 아님! 그냥 실행한 함수일 뿐!

🚨 greet();처럼 단순히 실행되는 함수는 콜백이 아냐!

 

📌 함수의 "인자"가 뭐야?

함수에 **"전달하는 값"**을 **인자(매개변수, parameter)**라고 해.

예제 하나 볼까?

 

function sayHello(name) {  
  console.log("안녕, " + name + "!");
}

sayHello("Jane"); // "안녕, Jane!" 출력

✔ 여기서 name이 인자야!
✔ sayHello("Jane")에서 "Jane"을 함수에 전달한 값이지.

 

📌 함수도 "값"처럼 전달할 수 있어!

숫자나 문자열만 전달할 수 있는 게 아니야. "함수도 인자로 전달할 수 있어!"

💡 이게 바로 콜백 함수의 핵심 개념이야!

 

함수를 인자로 전달하는 다른 예시들을 더 보여줄게! 😊

예시 1: 배열의 forEach 메서드

forEach는 배열의 각 요소에 대해 주어진 함수를 실행해주는 메서드야. 여기서도 콜백 함수를 사용하고 있어!

const numbers = [1, 2, 3, 4, 5];

// forEach 메서드에 함수를 인자로 전달
numbers.forEach(function(num) {
  console.log(num * 2); // 배열의 각 숫자에 대해 곱셈 작업을 실행
});​

 

📝 설명

• numbers.forEach에 전달된 함수는 배열의 각 요소에 대해 실행돼.
• num은 배열의 각 요소이고, 그걸 두 배로 출력하는 거지!

 

---

🚀 진짜 중요한 포인트

✅ "콜백 함수는 다른 함수에 인자로 전달된 함수"
✅ "그 함수가 실행되는 특정 시점에 호출됨"
✅ "이벤트 핸들러, 비동기 작업, 반복문 등에 자주 쓰임"

 

---

 

 

조금은 이해 되었으니, 이론을 다시 보자..!

 

---

콜백 함수(Callback Function)란?

콜백 함수는 어떤 함수의 인자로 전달되어 특정 시점에 실행되는 함수를 의미해. 쉽게 말하면 "나중에 실행해줘" 라고 등록하는 함수야.

콜백 함수의 상위 개념과 하위 개념

📌 상위 개념: 고차 함수(Higher-Order Function)

콜백 함수는 고차 함수(Higher-Order Function)라는 개념에 포함돼.

고차 함수란?

• 함수를 인자로 받거나, 함수를 반환하는 함수
• 예시: map(), filter(), forEach() 같은 함수들

 

---

📌 하위 개념: 비동기 콜백과 동기 콜백

콜백 함수는 실행 방식에 따라 두 가지로 나뉘어.

 

- 동기(Synchronous) 콜백: 코드가 순차적으로 실행되는 경우

예제: Array.prototype.forEach()

const numbers = [1, 2, 3];
numbers.forEach((num) => console.log(num));  
// 1, 2, 3 순서대로 출력됨

 

 

- 비동기(Asynchronous) 콜백: 특정 작업이 끝나면 실행됨 (예: 서버 요청, 파일 읽기)

예제: setTimeout(), fetch()

setTimeout(() => {
  console.log("3초 후 실행됨!");
}, 3000);

---

콜백 함수가 자주 쓰이는 곳

1. 이벤트 핸들러

button.addEventListener("click", () => {
  console.log("버튼 클릭됨!");
});

 

2. 비동기 요청 (서버에서 데이터 가져오기)

fetch("https://jsonplaceholder.typicode.com/posts")
  .then((response) => response.json()) 
  .then((data) => console.log(data));

 

→ 여기서 then()에 전달되는 함수가 콜백 함수야

 

3. 타이머 함수

setTimeout(() => console.log("시간 지남!"), 2000);

 

 

 

4. 배열 함수 (map, filter, reduce)

const nums = [1, 2, 3];
const doubled = nums.map((num) => num * 2);
console.log(doubled); // [2, 4, 6]

map과 filter는 함수를 ()에  담는 ! 콜백함수 :)