1. Javascript Callback
- 콜백 함수는 다른 함수에 인수로 전달되는 함수를 의미합니다.
함수명(function(){});
//
함수명(함수명);- 이 기술을 사용하면 함수가 다른 함수를 호출할 수 있습니다.
- 다른 함수가 완료된 후 콜백 함수를 실행할 수 있습니다.
1) 함수의 순서
- JS에서 함수는 호출된 순서대로 실행이 됩니다.
- 선언된 순서대로 실행되지 않습니다.
## 코드 보기1
- [ testFirst() ]를 먼저 호출해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Callback</title>
</head>
<body>
<script>
function testFirst(){
alert('첫번째 테스트');
}
function testSecond(){
alert('두번째 테스트');
}
testFirst();
testSecond();
</script>
</body>
</html>
## 결과 보기1
## 코드 보기2
- [ testSecond() ]를 먼저 호출해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Callback</title>
</head>
<body>
<script>
function testFirst(){
alert('첫번째 테스트');
}
function testSecond(){
alert('두번째 테스트');
}
testSecond();
testFirst();
</script>
</body>
</html>
## 결과 보기2
2) 함수의 순서 제어
- 때때로 함수를 실행할 시점을 제어하고 싶을 때가 있습니다.
- 그래서 시점을 제어해보도록 하겠습니다.
## 코드 보기
- 아래 코드는 제곱을 구하는 함수를 만들고, 그것을 문서에 출력하는 함수도 만들도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Callback</title>
</head>
<body>
<p id="test"></p>
<script>
//문서객체 선택
const test = document.getElementById('test');
function output(x){
test.innerHTML = x;
}
function square(x){
var calc = x * x;
output(calc);
}
square(5);
</script>
</body>
</html>- 우선적으로는 문서에 값을 출력하는 [ output() ]이라는 함수를 선언했습니다.
- 두 번째로는 제곱을 구하는 [ square() ]이라는 함수를 선언합니다. 그리고 그 내부에 [ output() ]함수를 호출하도록 지정했습니다.
- 그리고 마지막으로 [ square() ] 함수를 호출해줍니다. 이렇게 함수 내부에 호출하고 싶을 수도 있습니다.
- 하지만 위의 코드의 단점은 결과 표시를 막을 방법이 없다는 것입니다. 그래서 콜백 함수로 처리하면 가능하게 됩니다.
## 결과 보기
- 결과가 잘 출력되는 것을 확인할 수 있습니다.
3) 함수의 순서 제어
- 위에서 썼던 코드를 콜백 함수를 사용하여 실행되게 해 보겠습니다.
- 콜백 함수라는 것은 다른 함수에 인수로 전달되는 함수입니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Callback</title>
</head>
<body>
<p id="test"></p>
<script>
//문서객체 선택
const test = document.getElementById('test');
function output(x){
test.innerHTML = x;
}
function square(x, write){
var calc = x * x;
write(calc);
}
square(5,output);
</script>
</body>
</html>- [ square() ] 함수에 매개변수를 [ write ]라고 추가해줍니다. 그리고 그것을 함수 내부에서 함수 호출로 사용해줍니다.
- [ square() ] 함수를 호출할 때 [ output() ] 함수를 매개변수로 사용합니다. 이때 생략하면 출력되지 않고 계산만 합니다.
## 주의사항
- 함수를 인수로 전달할 때 괄호는 사용하지 않는 것을 기억해주세요.
square(5,output); //맞음
square(5,output()); //틀림
## 결과 보기
- 결과가 잘 출력되는 것을 확인할 수 있습니다.
** 마치며
- 위는 콜백 함수를 이해하기 위한 간단한 구문이었습니다.
- 콜백 함수가 잘 사용돼서 빛을 발하는 곳은 하나의 함수가 다른 함수를 기다려야 하는 비동기 함수입니다.
- 다음 강좌에서 비동기 함수에 대해서 더 자세히 보도록 하겠습니다.
'웹언어 > 자바스크립트 - ES6' 카테고리의 다른 글
| [ES6강좌] 10강 JS Promise - 오쌤의 니가스터디 (0) | 2022.11.24 |
|---|---|
| [ES6강좌] 9강 JS Asynchronous(비동기) - 오쌤의 니가스터디 (0) | 2022.11.23 |
| [ES6강좌] 8강 반복문 - for of - 오쌤의 니가스터디 (0) | 2022.11.08 |
| [ES6강좌] 7강 Array객체의 메서드 추가 - 오쌤의 니가스터디 (0) | 2021.03.03 |
| [ES6강좌] 6강 Import & Export 모듈화 - 오쌤의 니가스터디 (0) | 2021.03.01 |
