콜백 함수는 전달인자로 다른 함수에 전달되는 함수를 뜻한다. 함수의 파라미터로 다른 함수를 받아서 내부에서 그 함수를 호출할 수 있다.
- function 변수명(콜백함수명) {
콜백함수명();
}
자바스크립트의 경우 코드를 위에서 아래로 순차적으로 시행하지만, 종종 순차적으로 실행되지 않고 코드의 실행이 끝나기 전에 다음 코드로 넘어가는 일이 발생한다. 이것을 비동기처리라고 하는데, 콜백함수의 경우 주로 이 비동기처리에 사용된다.
예를 들어 대표적인 비동기 함수인 setTimeout()경우 코드의 실행이 끝날 때까지 기다리지 않고 바로 다음 코드로 넘어간다. 아래 예제의 경우 변수를 선언하고, 3초뒤에 변수에 증감연산자를 시행하는 setTimeout()을 설정하고 이후 변수를 console.log로 호출하고자 했다. 하지만 호출된 변수는 증감연산자가 시행되지 않은 변수이다. 즉, setTimeout()이 끝나기 전에 다음 코드로 넘어가는 비동기처리가 발생된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let val1 = 1;
let func1 = function(){
val1++;
}
setTimeout(func1, 3000);
console.log(val1); //1
</script>
</body>
</html>
이런 상황에서 강제로 동기화를 시키기 위해 다른 함수가 실행을 끝낸 뒤에 실행이 되는 콜백함수를 사용하게 된다. 아래 예제는 콜백함수를 사용한 예시이다.
- func1의 매개변수로 함수를 넣어, 다른 함수를 받아 내부에서 그 함수를 호출할수 있도록 하였다(콜백함수).
- func1은 val1++을 시행하고, 매개변수로 myfunc 이라는 함수를 받아 myfunc(val1) 함수를 호출하였다.
- myfunc(val1)은 console.log(val1)을 시행하여 3초 뒤에 콘솔에 `2`를 출력한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let val1 = 1;
function func1(callback){
val1++;
callback(val1);
}
function myfunc(value){
console.log(value);
}
setTimeout(() => func1(myfunc), 3000); //2
</script>
</body>
</html>'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript: Date 객체에 대해서 (0) | 2024.07.31 |
|---|---|
| JavaScript : DOM 요소의 높이 / 너비를 알아보자(client / offset / scroll / getBoundingClientRect()) (0) | 2024.07.30 |
| JavaScript의 class를 사용해보자 (0) | 2024.07.30 |
| JavaScript 프로토타입(prototype)과 생성자 함수 (0) | 2024.07.30 |
| JavaScript : sort()와 localeCompare()을 이용해 정렬해보자 (0) | 2024.07.29 |
| JavaScript의 특징: 스코프와 실행 컨텍스트 (0) | 2024.07.29 |
| JavaScript : DOM에서 class를 설정해보자 (0) | 2024.07.29 |
| JavaScript : DOM의 이벤트를 설정해보자 (0) | 2024.07.29 |