안녕하세요. Tay 입니다.
콜백 함수에 대해서 알아보겠습니다.
콜백 함수
이벤트가 발생했거나 특정 시점에 도달했을때 호출되는 함수
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!-- <script src="function.js"></script> -->
<!-- <script src="hoisting.js"></script> -->
<!-- <script src="arrow.js"></script> -->
<!-- <script src="use-function.js"></script> -->
<script src="callback.js"></script>
</body>
</html>
2) callback.js
function add(a, b, callback) {
let result = a + b;
callback(result);
}
add(3, 4, result => console.log(result));맨 마지막줄 add(3, 4, 함수) 의 함수가 콜백 함수이다.
- 인자값으로 3, 4, function(result){console.log(result)} 를 전달한다.
- add는 callback 함수변수로 받아서 callback(result)를 다시 실행
- callback 함수가 실행될때 받은 result 로 console.log(result) 결과값 출력
이 처럼 특정 이벤트(add)가 발생 됐을 때 실행되는 함수가 콜백 함수이다.
콜백함수를 사용하면, 특정 연산 혹은 코드가 다 끝나기 전에 다른 코드가 실행되는 것을 방지할 수 있다.
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'JavaScript > Basic-Javascript' 카테고리의 다른 글
| 자바스크립트 정리하며 배우기[21] - Arguments : 유동적인 함수 만들기 (0) | 2020.02.20 |
|---|---|
| 자바스크립트 정리하며 배우기[20] - 내부 함수(inner function) (0) | 2020.02.03 |
| 자바스크립트 정리하며 배우기[18] - 함수의 프로토타입(prototype property)과 constructor (0) | 2020.01.31 |
| 자바스크립트 정리하며 배우기[17] - 일급객체 함수 활용 방법 (0) | 2020.01.28 |
| 자바스크립트 정리하며 배우기[16] - 함수 호이스팅(Hoisting) 과 화살표(Arrow) 함수 (0) | 2020.01.28 |
