🐨CoalaCoding
DocsExamplesTry itBoardB반B반
🐨CoalaCoding

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

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • start
  • class
  • ai이미지-생성기-구현
  • 자료형
  • async--await
  • 변수와자료형
  • xmlhttprequest-부터axios-까지
  • 1-자바스크립트와-ecma
  • reduce
  • 캘린더-만들기
  • generator
  • destructuring
  • spread-operator
  • module-export-import
  • http-통신-이란
  • 시작
  • 2-자바스크립트-코드-실행-과정-및-용어정리
  • map
  • 동기와-비동기
  • 연산자
  • promise-thencatch
  • 3-실행컨텍스트와-스코프
  • 콜백-함수
  • 제어문
  • 4-클로저
  • windowlocation
  • 함수
  • 5-객체
  • 이벤트
  1. 홈
  2. 문서
  3. JavaScript
  4. JavaScript 기초
  5. 콜백-함수

콜백-함수

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

함수는 매개변수(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) 
})

목차

  • 구문