코어 자바스크립트 | 챕터 4: 콜백 함수

<콜백함수란?>
콜백 함수: 다른 코드의 인자로 넘겨주는 함수

함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 알려달라' 라는 요청을 함께 보내는 것

즉 다른 코드(함수, 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수
콜백 함수를 위임받은 코드는 적절한 시점에 콜백 함수를 실행한다

<제어권>
var count = 0;
var timer = setInterval(function() {
    console.log(count);
    if (++count > 4) clearInterval(timer);
},300);

timer 해석하기
timer 변수 선언, 여기에 setInterval을 실행한 결과를 할당

setInterval이란
var intervalID = scope.setInterval(func,delay[, param1, param2, ...]);

func는 함수를 실행할 때 매개변수로 전달할 인자
func에 넘겨준 함수는 delay마다 실행되며
그 결과 어떠한 값도 리턴하지 않음

setInterval을 실행하면 반복적으로 실행되는 내용 자체를 특정할 수 있는 고유 ID값을 반환함
= 반복 실행 중간에 종료 (clearInterval)할 수 있도록함

timer 변수에는 setInterval의 ID값이 담김
콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가지게 된다


인자
var newArr = [10,20,30].map(function (currentValue, index) {
    console.log(currentValue,index);
    return currentValue + 5;
});
console.log(newArr);

에서 map을 먼저 알아보자
map 메서드

Array.prototype.map(callback[,thisArg])
callback: function(currentValue, index, array)

map 메서드는 첫번째 인자로 callback 함수를 받고
생략 가능한 두번째 인자로 콜백 함수에서 this로 인식할 대상을 특정할 수 있습니다. thisArg를 생략할 경우에는 전역객체가 바인딩된다

this
기본적으로 전역 객체를 참조하는 콜백함수이지만,
별도로 this를 지정한 경우에는 그 대상을 참조하게 된다


<콜백 함수는 함수다>
~콜백 '함수'는 어떤 객체의 메서드를 전달하더라도 그 메서드는 함수로서 호출된다~

<콜백 함수 내부의 this에 다른 값 바인딩하기>
~객체의 메서드를 콜백함수로 전달하면 해당 객체를 this로 바라볼 수 없게 된다~

콜백 함수 내부에서 this가 객체를 바라보게하는 법 - bind 메서드 활용

<콜백 지옥과 비동기 제어>
콜백 지옥: 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기가 심하게 깊어진 현상
주로 비동기(코드의 완료 여부와는 상관없이 즉시 다음 코드로 넘어가는 코드)적 작업을 수행하면 볼 수 있다
(별도 요청, 실행대기, 보류 등)

-> 해결법: 기명함수로 변환
-> 도 마뜩잖으면 Promise, Generator, Asyne/await


<정리>
콜백 함수는 다른 코드에 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다
제어권을 넘겨받은 코드는 다음과 같은 제어권을 가진다
1) 호출하는 시점을 스스로 판단해서 실행한다
2) 인자로 넘겨줄 값들 순서가 정해져 있으니 주의
3) this가 무엇을 바라보도록 할지 정해두지 않았다면 전역객체, 임의로 바꿀려면 bind
4) 결국 함수임!
5) 콜백 지옥 주의: Promise,Generator,Async/await

#헷갈리는 거 중간 정리
🧩 1. 기명 함수 (Named Function)
함수 이름이 있는 함수
→ 나중에 다시 호출하거나 디버깅할 때 유용해요.

function sayHello() {
    console.log("안녕하세요");
}

sayHello(); // 호출
✅ 특징:

함수 이름이 있음 (sayHello)

함수 선언문 방식 (function declaration)

🧩 2. 익명 함수 (Anonymous Function)
이름이 없는 함수
→ 보통은 변수에 할당해서 사용하거나, 콜백으로 넘길 때 자주 써요.

var greet = function () {
    console.log("반가워요");
};

greet(); // 호출
✅ 특징:

function () {} ← 이름이 없음

var greet = 처럼 변수에 할당하여 사용

🧩 3. 화살표 함수 (Arrow Function)
ES6부터 도입된 함수 축약 표현
→ 짧게 쓰고, this 바인딩 방식이 다름

const add = (a, b) => a + b;

console.log(add(2, 3)); // 5
✅ 특징:

익명 함수처럼 이름이 없음

일반 함수와는 달리 자신만의 this를 가지지 않음

간결한 코드에 좋음

🧩 4. 함수 선언식 vs 함수 표현식
이건 함수의 "형태" 차이예요:


구분 예시 호출 시점
함수 선언식 function func() {} 위에서 호출 가능 (호이스팅됨)
함수 표현식 const func = function() {} 정의 이후에만 호출 가능

// 선언식
sayHi(); // 가능
function sayHi() {
  console.log("Hi!");
}

// 표현식
sayBye(); // ❌ 오류!
const sayBye = function() {
  console.log("Bye!");
};
🎯 요약 정리표

이름 예시 특징
기명 함수 function funcName() {} 이름 있음, 재사용 가능
익명 함수 function () {} 이름 없음, 표현식으로 주로 사용
화살표 함수 (a) => a + 1 this가 다름, 간결함
함수 선언식 function hello() {} 호이스팅됨
함수 표현식 const hi = function () {} 호이스팅 안됨
🌼 예시: 콜백으로 쓰는 익명 함수
js
복사
편집
[1, 2, 3].forEach(function(num) {
  console.log(num);
});
→ 이름 없이, 한 번만 쓸 함수니까 익명으로 바로 넘기는 거예요!