본문 바로가기
프론트엔드

자바스크립트 콜백 함수

by 김씨 학생 2024. 2. 14.
콜백 함수

 

콜백 함수란?

기능의 분리를 위해 사용되는 함수로 다른 함수의 매개변수로 전달되어 그 함수 안에서 필요한 시점에 실행되게 할 수 있다. 

 

 

콜백 함수 종류

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