🐨CoalaCoding
Docs▾
JavaScriptReactHTML & CSSBackendAI & LLMDev ToolsCreative
B반1
👾숏츠
🙉B반2
게시판
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • React
  • HTML & CSS
  • Backend
  • AI & LLM
  • Dev Tools
  • Creative

커뮤니티

  • 게시판
  • 예제 모음

기타

  • 관리자

정책

  • 소개
  • 개인정보처리방침
  • 이용약관
  • 연락처
© 2026 CoalaCoding. All rights reserved.
  • 1. 자바스크립트 기초
  • 2. class
  • 3. ai이미지-생성기-구현
  • 4. 자료형
  • 5. async--await
  • 6. 변수와자료형
  • 7. xmlhttprequest-부터axios-까지
  • 8. 1-자바스크립트와-ecma
  • 9. reduce
  • 10. 캘린더-만들기
  • 11. generator
  • 12. destructuring
  • 13. spread-operator
  • 14. module-export-import
  • 15. http-통신-이란
  • 16. 시작
  • 17. 2-자바스크립트-코드-실행-과정-및-용어정리
  • 18. map
  • 19. 동기와-비동기
  • 20. 연산자
  • 21. promise-thencatch
  • 22. 3-실행컨텍스트와-스코프
  • 23. 콜백-함수
  • 24. 제어문
  • 25. 4-클로저
  • 26. windowlocation
  • 27. 함수
  • 28. 5-객체
  • 29. 이벤트
  1. 홈
  2. 문서
  3. JavaScript
  4. JavaScript 기초
  5. 23. 콜백-함수

23. 콜백-함수

함수는 매개변수(parameter)를 넣을 수 있다.

함수는 값을 반환할 수 있다

함수는 javascript의 꽃이라고 불리는 이유는 함수가 정말 많은 곳에서 사용되기 때문입니다. 함수 중 callback(콜백) 함수의 개념을 이해 한다면 함수의 세계는 일차정복 하시는 겁니다.

콜백 함수는 함수가 나중에 불린다고 해서 CallBack 함수입니다. 보통 **콜백 함수를 구현할 때 함수의 인자에 함수를 넣는 방식으로 진행합니다. **

//1. sayHello라는 함수가 콜백 함수로 사용되는 예시를 보여줍니다.

function sayHello(){ //sayHello 라는 함수를 만듭니다.
	console.log('안녕하세요');
}
**
f**unction getDog(callback){ //getDog 함수의 파라미터에는 함수가 들어갑니다.
	callback(); //callback 파라미터는 함수이기에 실행시킬 수 있습니다.
}

//getDog의 파라미터인 callbackFunc에는 sayHello가 들어가고 sayHello가 실행됩니다.
getDog(sayHello) //'나는 댕댕이다'가 출력됩니다.

Info: 💡 모든 함수의 파라미터 이름은 자유롭게 설정할 수 있습니다. 즉 getDog(callback)을 getDog(cb) 이렇게 바꿔도 됩니다.

이렇게 콜백함수를 사용할 때 아래와 같이 함수로 정의된 변수를 넣지 않고 바로 함수를 넣을 수도 있습니다. 이것을 익명 함수라고 부릅니다

//아래와 같은 형식으로도 사용 할수 있습니다.
//1회용 함수인데 이런 함수는 메모리에 부담을 적게 줍니다.
getDog(function () {
  console.log("나는 댕댕이다.");
});

Info: 1. getDog안에 있는 익명함수는 실제로 코드가 실행될 때 위에서 선언한 callback이라는 파라미터에 들어가게 됩니다.

  1. 만약 getDog(1) 이렇게 넣으면 어떻게 될까요? 1은 int형으로 실행할 수 없기에러가 반환 됩니다.

우리가 콜백 함수를 꼭 알아야 하는 이유는, javascript의 내장 함수나 라이브러리 사용시 주로 콜백 함수를 사용하기 때문입니다

// 대표적인 콜백함수인 setTimeout, setInterval 은
//javascript 내장함수입니다.

setTimeout(function () {
  console.log("3초 뒤에 실행됩니다!");
}, 3000);

setInterval(function () {
  console.log("1초마다 출력됩니다");
}, 1000);

콜백 함수에는 보통 인자를 넣어서 많이 사용합니다

//콜백에 사용될 함수
function callbackFunc(name){
	console.log(name);
}

function sayHello(callback){
	var text = 'hello';
	callback(text);
}

sayHello(callbackFunc); //hello가 출력됩니다.
sayHello(function(value){ //위와 동일하게 value에는 hello가 들어갑니다.
	console.log(value) 
})