4.3 함수의 다양한 형태

vencott·2021년 6월 2일

4.3.1 콜백 함수

익명 함수의 대표적인 용도가 콜백 함수이다

개발자는 명시적으로 함수를 호출하는 것이 아닌 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거ㄷ나 특정 시점에 도달했을 때 시스템에서 호출되는 함수

특정 함수의 인자로 넘겨서 코드 내부에서 호출되는 함수

window.onload = function () {
    alert("Loaded");
};

4.3.2 즉시 실행 함수

함수를 정의함과 동시에 바로 실행하는 함수

익명 함수이므로 같은 함수를 다시 호출할 수 없다 --> 최초 한번의 실행만을 필요로 하는 초기화 코드 부분에 사용

(function (arg) {
    print(arg);
})("init");

jQuery등의 라이브러리는 처음부터 끝까지를 익명 함수로 묶어져 있다

즉시 실행 함수를 이용하는 이유는 자바스크립트의 함수 유효 범위 지원 때문이다

기본적으로 자바스크립트는 변수를 선언하면 프로그램 전체에서 접근할 수 있는 전역 유효 범위를 가진다

그러나 함수 내에서 정의된 매개변수와 변수들은 함수 코드 내부에서만 유효하다

함수 외부에의 코드에서 함수 내부의 변수를 액세스하는 게 불가능하다

여러 라이브러리를 사용할 때 나의 네임스페이스를 더럽히지 않기 위해서 라이브러리들은 즉시 실행함수로 전체 라이브러리를 감싸놓는다

4.3.3 내부 함수

자바스크립트에서는 함수 코드 내부에서도 다시 함수를 정의할 수 있다

내부함수는 클로저를 생성하거나 부모 함수 코드에서 외부에서의 접근을 막고 독립적인 헬퍼 함수를 구현하는 용도로 쓰인다

function parent() {
    var a = 100;
    var b = 200;

    function child() {
        var b = 300;

        console.log(a); // 부모 함수의 a에 접근(100)
        console.log(b); // 자신의 b에 접근(300)
    }

    child(); // 내부함수 이므로 부모함수에서 접근 가능
}

parent();
child(); // error! --> 내부함수 이므로 외부에서 접근 불가능

스코프 체이닝 : 내부 함수는 자신을 둘러싼 외부 함수의 변수에 접근 가능함

내부 함수는 일반적으로 자신이 정의된 부모 함수 내부에서만 호출이 가능하다

하지만 함수 외부에서도 특정 함수 스코프 안에 선언된 내부 함수를 호출할 수 있다

이는 부모 함수에서 내부 함수를 외부로 리턴하는 방식을 사용할 수 있다

function parent() {
    var a = 100;
    var child = function () {
        console.log(a);
    }

    return child;
}

var inner = parent(); // child 함수 리턴됨
inner(); // child 함수 실행

호출하는 내부 함수에는 a 변수가 정의되어 있지 않아, 스코프 체이닝으로 부모 함수의 a 변수를 참조한다

이와 같이 실행이 끝난 parent()와 같은 부모 함수 스코프의 변수를 찾아 참조하는 inner()와 같은 함수를 클로저라 한다

4.3.4 함수를 리턴하는 함수

함수는 일급 객체이므로 일반 값처럼 함수 자체를 리턴할 수 있다

이 특성을 활용해 함수를 호출함과 동시에 다른 함수로 바꾸거나, 자기 자신을 재정의하는 함수를 구현할 수 있다

var self = function () {
    print('a');
    return function () {
        print('b');
    };
};

self = self(); // 함수를 호출함과 동시에 다른 함수로 바꾸고, 재정의 : self를 호출해 'a'를 출력한 뒤 리턴된 'b'를 프린트 하는 함수를 self에 재정의 한다 --> self == function() { print('b'); } 상태가 됨
self(); // 'b'가 출력된다

출처: 송형주, 고현준 저, 『인사이드 자바스크립트』, 한빛미디어(2014)

profile
Backend Developer

0개의 댓글