Front/JavaScript
JavaScript - 익명함수, 콜백함수
Hyeon_
2021. 12. 9. 13:32
JavaScript
익명 함수(Anonymous Function)
- 함수 이름이 없는 함수
- 함수명 대신 변수명에 함수 코드를 저장해서 구현하는 함수
- 변수명에 값을 대입하는 형식으로 맨 끝에 세미콜론(
;
) 사용 - 함수 호출 시 변수명을 함수명처럼 사용
var 변수명 = function() { }
var start = function() {
함수 수행 문장;
};
- 변수명 다르게 함수 코드 저장 가능
- 호이스팅 불가
- 콜백 함수로 주로 사용
예제
anonymousFunction.js
var sum = function(a, b) {
document.write(a + b + "<br>");
};
// sum() 호출
sum(10,20);
// 다른 변수 add 이름으로 기존 sum 함수 코드 저장해서 사용 가능
var add = sum;
// add() 호출
add(100,200);
// sum() 그대로 사용 가능
sum(1,3);
콜백 함수(Callback Function)
- 매개변수로 함수를 전달받아서, 함수의 내부에서 실행하는 함수
- 인자로 전달되는 함수를
콜백 함수
라고 부름 콜백 함수
로는 주로익명 함수
사용- 자바스크립트의 비동기 처리 방식의 문제점을 해결하기 위해 사용
- 자바스크립트는 싱글(단일) 스레드로 한 번에 하나의 작업만 처리 가능
- 특정 코드(작업)가 끝나기 전에 다음 코드(작업)를 처리할 수 없음
콜백 함수
사용해서 특정 시점에 호출하여 비동기 처리 작업 수행콜백 함수
패턴을 사용하면 작업 1을 진행시키고 작업이 완료되었을 때 알림을 받을 콜백 함수를 설정해서 작업 1이 완료되면콜백 함수
가 호출되고, 함수 안에서 작업 2를 시작하는 식으로 비동기 작업 순차적으로 처리 가능콜백 함수
가 계속 호출되면 감당하기 어려울 정도로 깊어지는 문제 발생 ->콜백 지옥
->Promise(프로미스)
사용
Promise(프로미스)
- 콜백 지옥을 해결하기 위한 방법
- 미래의 어떤 시점 결과를 제공하는 방식
비동기 처리방식
- 특정 코드(작업)가 끝나기 전에 다음 코드(작업)를 처리하는 방식
예제
callback1.html
- 익명 함수를 콜백 함수로 사용
<script type="text/javascript">
// 익명 함수 생성
var callback = function() {
alert("익명 함수 입니다.");
}
// 함수를 매개변수로 받을 함수
function show(callback){
// 매개변수로 전달된 함수 호출
callback();
}
// show() 함수 호출함녀서 함수를 인자로 전달
show(callback);
</script>
callback2.html
- 일반 함수도 콜백 함수로 사용 가능 : 함수 명만 전달
<script type="text/javascript">
// 일반 함수를 콜백 함수로 사용
function endFunction() {
document.write("종료");
}
// showName()에 name과 endFunction()함수 전달
function showName(name, callback) {
document.write("name :" + name +"<br>");
callback(); // 받은 이름(매개변수명)으로 호출
}
showName("김준면", endFunction);
</script>
callback3.html
- 지역변수를 콜백 함수 매개변수로 전달
<script type="text/javascript">
// 지역변수를 콜백함수 매개변수로 전달
// 전역변수
let globalVar = 100;
var show = function(localVar){
document.write(`전역변수: ${globalVar} / 지역변수 : ${localVar}`);
}
function call(callback){
let localVar = 1;
callback(localVar);
}
call(show);
</script>