Day 31 콜백함수

나그참파맨·2022년 5월 6일

KDT 핀테크 프론트엔드 개발자 과정

목록 보기

18/25

2022-04-29

콜백함수란?

파라미터로 함수를 전달하는 함수

콜백함수란 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다.

let number = [1, 2, 3, 4, 5];

number.forEach(x => {
	console.log(x * 2);
});

<output>
2
4
6
8
10

콜백함수는 이미 우리의 코드 속에서 자주 사용되고 있다.
예를 들어, forEach함수의 경우 함수 안에 익명의 함수를 넣어서 forEach문을 동작시킨다.

콜백함수 사용 원칙

익명의 함수 사용

let number = [1, 2, 3, 4, 5];

number.forEach(function(x) {
	console.log(x * 2);
});

위 예제를 화살표 함수에서 일반 함수로 바꾼 예제이다.
콜백함수는 이름이 없는 '익명의 함수'를 사용한다.
함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.

함수의 이름(만) 넘기기

function whatYourName(name, callback) {
	console.log('name: ', name);
    callback();
}

function finishFunc() {
	console.log('finish function')'
}

whatYourName('Jinyoung', finishFunc);

<output>
name: Jinyoung
finish function

자바스크립트는 null과 undefined 타입을 제외하고 모든 것을 객체로 다룬다.
함수를 변수 or 다른 함수의 변수처럼 사용할 수 있다
함수를 콜백함수로 사용할 경우, 함수의 이름만 넘겨주면 된다.
위의 예제에서 함수를 인자로 사용할 때 callback, finishFunc처럼 ()를 붙일 필요가 없다는 것이다.

전역변수, 지역변수 콜백함수의 파라미터로 전달 가능

전역변수: 함수 외부에서 선언된 변수
지역변수: 함수 내부에서 선언된 변수

let fruit = 'apple'; // 전역변수

function callbackFunc(callback) {
	let vegetable = 'tomato'; // 지역변수
    callback(vegetable);
}

function eat(vegetable) {
	console.log(`fruit: ${fruit} / vegetable: ${vegetable}`);
}

callbackFunc(eat);

<output>
fruit: apple / vegetable: tomato

콜백함수 주의할 점

this를 사용한 콜백함수

let userData = {
	signUp: '2020-10-06 15:00:00',
    id: 'Jinyoung',
    name: 'Not Set',
    setName: function(firstName, lastName) {
    	this.name= firstName + ' ' + lastName;
    }
}

function getUserName(firstName, lastName, callback) {
	callback(firstName, lastName);
}

getUserName('PARK', 'JINYOUNG', userData.setName);

console.log('1: ', userData.name);
console.log('2: ', window.name);

<output>
1: Not Set
2: PARK JINYOUNG

우리는 첫 번째 콘솔 값이 PARK JINYOUNG이기를 기대했지만, Not Set이 출력된다.
setName() 함수가 실행되기 전의 name 값이 나오는 것인데, 이는 getUserName()이 전역함수이기 때문이다.

즉, setName()에서 사용된 this 객체가 window라는 글로벌 객체를 가리킨다.
따라서 this를 보호할 수 있도록 콜백함수를 만들어야 한다.