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>