콜백 함수(Callback Function)
1. 콜백 함수(Callback Function)
(1) 콜백 함수의 정의
- 콜백함수란, 파라미터(매개변수)로 함수를 전달받아 -> 함수의 내부에서 실행하는 함수이다.
- 매개변수로 넘겨받은 함수는 일단 넘겨 받고 -> '때가 되면, 나중에 호출' 한다는 것이다.
let num = [1, 2, 3, 4, 5];
num.forEach( x => {
console.log(x * 5);
});
output
5
10
15
20
25
(2) 콜백 함수 사용 목적
- 콜백 함수는, 비동기 방식으로 작성된 함수를 -> 동기 처리 하기 위해 주로 사용한다.
- 비동기 방식을 기본 처리 방식으로 하지만, 일부 구간에서는 순차적인 처리가 필요할 수 있기 때문이다.
즉, 비동기 방식이 응답을 받기 전에도 다음 동작이 실행되지만, '응답을 받은 이후 처리해야 하는, 종속된 관계
의 작업'이 존재할 수도 있기 때문이다.
+ ) 일종의,, 사고 방지용 이런건가?
(3) 콜백 함수 사용 형태
- 함수를 선언하고 -> 함수 타입 파라미터를 가장 마지막에 하나 더 선언
function checkAge(age, name, gender) {
age < 20 ? name() : gender();
}
function checkName() {
console.log('이름은 무엇인가요?');
}
function checkGender() {
console.log('성별은 무엇인가요?');
}
checkAge(23, checkName, checkGender)
(4) 콜백 함수 사용 원칙
1) 익명 함수 사용
- 콜백 함수는 함수의 내부에서 실행 -> 이름 없는 '익명의 함수'로 사용
let num = [1, 2, 3, 4, 5];
num.forEach( x => {
console.log(x * 5);
});
output
5
10
15
20
25
2) 함수의 이름만 넘기기
- 함수를 인자로 사용 시 callback, endTime 과 같이 ( ) 를 붙일 필요 X
- JS의 null 과 undefinced 타입을 제외하고,, '모든 것을 객체로' 다룸.
- 즉, 함수를 변수나 다른 함수의 변수로 상용 가능하다
-> 함수를 콜백함수로 사용하기 위해서는, 함수의 이름만 넣으면 됨.
function printStr(str, callback) {
console.log('String : ', str);
callback;
}
function endTime() {
console.log('End Script');
}
printStr('Hi'. endTime)
output
String : Hi
End Time
3) 전역변수, 지역변수 콜백함수의 파라미터로 전달 가능
- 전역 변수(Global Variable) : 함수의 외부에서 선언된 변수
- 지역 변수(Local Variable) : 함수의 내부에서 선언된 변수
let fruit = 'strawberry'; // Global Variable
function callbackFunc(callback) {
let vegetable = 'been'; // Local Variable
callback(vegetable);
}
function eat(vegetable) {
console.log('fruit : ', fruit , '/ vegetable : ', vegetable);
}
callbackFunc(eat)
outpput
fruit : strawberry / vegetable : been
(5) 콜백 함수 사용 시 주의점
1) this를 사용한 콜백 함수
let userData = {
signUp : '2020-10-27 15:00:00',
id : 'Minjoo',
name : 'Not set',
setName : function(firstName, laseName) {
this.name = firstName + ' ' + laseName;
}
}
function getUserName(firstName, lastName, callback) {
callback(firstName, lastName);
}
getUserName('Kim', 'Minjoo', userData.setName);
console.log('1st : ', userData.name);
console.log('2nd : ', window.name);
output
1st : Not set
2nd : Kim Minjoo
2) 콜백 지옥(Callback Hell)
- 비동기 호출이 자주 일어나는 경우, '콜백 지옥' 발생
- 함수의 매개변수로 넘겨지는 콜백 함수가 반복 -> 코드의 들여쓰기 ↑
- > Promise나 Async를 사용한 해결
참고