javaScript. 콜백함수(Callback)

 Callback 

 

---

 

 

📌 함수(Function)

 

 

자바스크립트에서 함수는 일급객체이다.

일급 객체(first-class object)란,
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.

▪ 변수에 할당(assignment)할 수 있다.
▪ 다른 함수를 인자(argument)로 전달받을 수 있다.
▪ 다른 함수의 결과로서 return 될 수 있다.
▪ 실행 도중에 생성될 수 있다.

 

- 콜백함수는 이중에서도 '매개변수로 전달할 수 있다', 즉 '다른함수를 인자로 전달받을 수 있다' 는 특징을 이용.

 

 

📌 콜백함수(Callback)

- 다른함수에 매개변수로 넘겨준 함수를 의미.

- 매개변수로 넘겨받은 함수는 일단 넘겨받고, 나중에 호출(called back)한다는 의미.

 

 

즉, A함수의 인수(argument)로 들어간 함수 B를 callback이라 한다.

 

 

function A(par1, par2, par3) {
	par1 < 0? par2() : par3()        // 삼항연산자 ㅡ 조건? true : false
}

function B {
	// 내용
}

function C {
	// 내용
}

A(1, B, C);        // A의 인수로 B함수와 C함수가 들어감 ㅡ B, C는 콜백함수

 

- 총 두개의 함수를 선언하고

- A 함수를 호출할 때 매개변수로 1,B,C를 전달했다.

>> 즉, par2에 B를 전달하고, par3에 C를 전달했으므로 B,C가 콜백함수가 된다.

 

 

<과정>

우선, A함수가 먼저 호출되고

par1의 값에 따라 B와 C중 한가지가 나중에 호출된다.

 

위 예제에서는 par1이 0보다 크므로 false - par3()에 의해 C함수가 실행됨.

 

 

 

---

 

그렇다면, 콜백함수는 왜 필요할까?

- 변수의 scope(스코프), 즉 유효범위와 동기/비동기를 이해해야함.

 

우선은, 콜백함수는 위 예제와 같이

여러 함수를 선언하고, 어느 한 함수가 실행될 때

상황에 따라 필요한 다른 함수를 실행하고 싶을 때 활용 가능.

 

때로는 가독성이나 코드 재사용을 위해 쓰기도 한다.

 

function add(a,b) {
   return a + b;
}


function sayResult(value) {
   console.log(value);
}

sayResult(add(3, 4));

 

위와 같은 코드를 callback을 이용하면 다음과 같다.

function add(a, b, callback) {
   callback(a + b);
}

function sayResult(value) {
   console.log(value);
}

add(3, 4, sayResult);

결과는 같지만, 함수를 호출하는 시점이나 동작하는 순서가 조금씩 달라진다.

 

 

 

---

 

 

📌 고차함수 (High-order function)

- 함수를 인자(argument) 또는 매개변수(parameter)로 받거나 함수를 리턴함.

- 고차 함수는 매개변수를 통해 전달받은 콜백 함수를 호출 시점을 결정하여 호출한다.

 

>> 콜백 함수는 고차 함수에 의해 호출되며,

이 때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

 

- 콜백함수가 고차함수 내부에만 호출된다면?

콜백함수를 익명함수 리터럴로 정의 (이름❌) - 바로 고차함수에 전달함.

job(5, function (num) {       // 익명함수 리터럴
   if(num % 2 == 0) console.log(num);
});

** 리터럴 = new 없이 선언. 

** 익명함수 = 함수명 대신 변수명에 함수 코드를 저장하는 방식. (끝에 세미콜론 필요) = 함수 표현식

( 호이스팅 X )

 

📒 함수표현식은 주로 콜백으로 사용됨 (익명함수 리터럴로 정의)

 

 

📌 콜백함수 (Callback)

- 전달인자(argument)로 받는 함수.

- 매개변수를 통해 다른 함수의 내부로 전달되는 함수.

 

- 매개변수를 통해 콜백함수를 전달받는 함수 = 고차함수

 

 

 

---

 

추후 내용 추가예정.

 

 

 

 

REFERENCE

 

[번역] JavaScript: 도대체 콜백이 뭔데?