JavaScript - 익명함수, 콜백함수

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>