콜백 함수
콜백 함수란?
기능의 분리를 위해 사용되는 함수로 다른 함수의 매개변수로 전달되어 그 함수 안에서 필요한 시점에 실행되게 할 수 있다.
콜백 함수 종류
1. 기본형
// 이름을 전달받은 뒤 이름을 출력하는 서비스
function setName(name, callback) {
// name에는 값이 들어오고, callback에는 함수(주소값)가 들어온다.
if (callback) {
// 만약 setName이 사용될 때, callback자리에 함수를 전달했다면,
// setName에서 받은 name(결과값)을 callback에 전달해준다.
callback(name);
}
}
// printName 함수를 선언한다.
function printName(name) {
console.log(name);
}
// setName은 printName함수를 전달받은 뒤 사용해준다.
// 이 때, printName은 callback함수가 된다.
// setName의 목적과 printName의 목적은 다르다.
// 그래서 두 함수로 분리해서 마치 하나의 함수처럼 연결해준다.
setName("홍길동", printName);
2. 익명 함수
// 익명 함수
// [1]
// 일회성으로 사용하고자 할 때 이름(식별자) 없이 선언한다.
setName("홍길동", function (name) {
console.log(name);
});
// [2]
// 익명 함수는 화살표 함수라는 문법으로 선언이 가능하다.
// (매개변수, ...) => {실행할 문장; return 리턴값;}
setName("홍길동", (name) => {
console.log(name);
});
// [3]
// 화살표 함수에 이름을 붙여서 다시 사용하고자 한다.
const printName = (name) => {
console.log(name);
};
// 화살표 함수를 printName에 담았기 때문에, 그 함수를 그대로 setName에 전달한다.
setName("홍길동", printName);
'프론트엔드' 카테고리의 다른 글
[Javascript] 카카오 API - 지도 (0) | 2024.04.04 |
---|---|
[자바스크립트] 객체 (0) | 2024.02.14 |
[CSS] 미디어 쿼리 (0) | 2024.01.24 |
[CSS] 정렬 (0) | 2024.01.24 |
[CSS] Overflow (0) | 2024.01.24 |