[자바스크립트] 콜백함수, 즉시 실행 함수, 내부함수

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

어제의 나보다 성장한 오늘의 나

[자바스크립트] 콜백함수, 즉시 실행 함수, 내부함수 본문

공부/JavaScript && jquery

[자바스크립트] 콜백함수, 즉시 실행 함수, 내부함수

NineOne 2021. 4. 13. 01:15

콜백 함수

자바스크립트 함수 표현식에서 함수 이름은 꼭 붙이지 않아도 되는 선택 사항이다. 즉, 함수의 이름을 지정하지 않아도 함수가 정의되며 이러한 함수가 익명 함수라고 한다. 이러한 함수의 대표적인 용도가 바로 콜백 함수이다.

콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말한다.

또한, 특정 함수의 인자로 넘겨서, 코드 내부에서 호출되는 함수 또는 콜백 함수가 될 수 있다.

대표적인 콜백 함수의 사용 예가 자바스크립트에서의 이벤트 핸들러 처리이다. 웹 페이지가 로드되거나 키보드가 입력되는 등의 DOM 이벤트가 발생할 경우, 브라우저는 정의된 DOM 이벤트에 해당하는 이벤트 핸들러를 실행시킨다. 만약 이러한 이벤트 핸들러에 콜백 함수가 등록했다면, 콜백 함수는 이벤트가 발생할 때마다 브라우저에 의해 실행하게 된다.

다음 코드는 웹 페이지가 로드됐을 때 경고창을 띄워 주는 간단한 예제이다. window.onload는 이벤트 핸들러로서, 웹페이지의 로딩이 끝나는 시점에 load이벤트가 발생하면 실행된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <script>
        // 페이지 로드 시 호출될 콜백 함수
        window.onload = function(){
            alert("어제의 나보다 성장한 오늘의 나")
        };
    </script>
</body>
</html>

웹 페이지가 로딩될 때 우리가 등록한 이벤트 핸들러가 호출되면서 경고창이 뜨게 된다.

즉시 실행 함수

함수를 정의함과 동시에 바로 실행하는 함수를 즉시 실행 함수라고 한다.

(function (name){
    console.log("오늘의 나보다", name)
})("설장한 오늘의 나");

익명 함수를 응용한 형태로, 익명 함수를 정의함과 동시에 결과가 출력된다.

즉시 실행 함수를 만드는 방법은 간단하다.

함수 리터럴을 괄호()로 둘러싼다. (이때 함수 이름이 있든 없든 상관없다.)
그런 다음 함수가 바로 호출될 수 있게 () 괄호 쌍을 추가한다. (이때 괄호 안에 값을 추가해 즉시 실행 함수의 인자로 넘길 수가 있다.) 위의 예제에서는 ("설장한 오늘의 나")로 즉시 실행 함수를 호출했다.

이렇게 함수가 선언되자마자 실행되게 만든 즉시 실행 함수의 경우, 같은 함수를 다시 호출할 수 없다.

따라서 즉시 실행 함수의 이러한 특징을 이용한다면 최초 한 번의 실행만을 필요로 하는 초기화 코드 부분 등에 사용이 가능하다.

즉시 실행 함수의 다른 용도

JQuery와 같은 자바스크립트 라이브러리나 프레임 워크 소스들에서 사용된다.
jQuery에서 즉시 실행 함수를 사용하는 이유는 자바스크립트의 변수 유효 범위 특성 때문이다.
기본적으로 자바스크립트는 변수를 선언할 경우 프로그램 전체에서 접근할 수 있는 전역 유효 범위를 가지게 된다.
그러나 함수 내부에서 정의된 매개변수와 변수들들은 함수 코드 내부에서만 유효할 뿐 함수 밖에서는 유효하지 않다.
이것을 달리 말하면 함수 외부의 코드에서 함수 내부의 변수를 액세스 하는 게 불가능하다는 것이다.
따라서 라이브러리 코드를 즉시 실행 함수 내부에 정의해두게 되면, 라이브러리 내의 변수들은 함수 외부에서 접근할 수 없다.
이후 다른 자바스크립트 라이브러리들이 동시에 로드가 되더라도 라이브러리 간 변수 이름 충돌 같은 문제를 방지할 수 있다.

내부 함수

자바스크립트에서는 함수 코드 내부에서도 다시 함수 정의가 가능하다. 이렇게 함수 내부에 정의된 함수를 내부 함수라고 부른다. 내부 함수는 자바스크립트의 기능을 보다 강력하게 해주는 클로저를 생성하거나 부모 함수 코드에서 외부에서의 접근을 막고 독립적인 헬퍼 함수를 구현하는 용도 등으로 사용한다.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <script>
        function parent(){
            var a = 100;
            var b = 200;
        
            //child() 내부 함수 정의
            function child(){
                var b = 300;
        
                console.log(a);
                console.log(b);
            }
        
            child();
        }
        
        parent();
        child();
    </script>
</body>
</html>

parent() 함수 내부에 child() 내부 함수를 정의했다. 그리고 아래 부분에서 parent() 함수와 child() 함수를 차례대로 호출했다. 위의 코드로 인해 몇 가지 특성을 알 수 있다.

내부 함수에서는 자신을 둘러싼 부모 함수의 변수에 접근이 가능하다. child() 내부 함수에 변수 a가 선언되지 않음에도 100이 출력된다.
반면에 변수 b는 child() 함수에 선언되어 있으므로 parent() 함수의 b 변수 대신 child() 함수의 변수 b 300이 출력된 것이다.

이것이 가능한 이유는 자바스크립트의 스코프 체이닝 때문이다.

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

하지만 함수 외부에서도 특정 함수 스코프 안에 선언된 내부 함수를 호출할 수 있다. 가령, 부모 함수에서 내부 함수를 외부로 리턴하면, 부모 함수 밖에서 내부 함수를 호출하는 것이 가능하다.

function parent() {
    var a = 100;
    
    //내부함수
    var child = function(){
        console.log(a);
    }
    
    return child;   
};

// child 함수가 리턴되므로 inner 변수는 내부함수 child()를 참조한다
var inner = parent();
inner();

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

함수를 리턴하는 함수

자바스크립트에서는 함수도 일급 객체이므로 일반 값처럼 함수 자체를 리턴할 수 있다. 이러한 특징은 다양한 활용이 가능해진다. 함수를 호출함과 동시에 다른 함수로 바꾸거나, 자기 자신을 재 정의하는 함수를 구현할 수 있다.

// 자신을 재정의하는 함수
var self = function() {
    console.log('a');
    
    return function() {
        console.log('b');
    };
};

// self() 함수 호출 후, self 함수 변수가 가리키는 함수가 원래 함수에서 리턴받은 새로운 함수로 변경됨
self = self();

// 변경됨 함수 호출
self();

출처

인사이드 자바스크립트(송형주, 고현준 지음) - 한빛미디어

저작자표시 비영리

'공부 > JavaScript && jquery' 카테고리의 다른 글

[자바스크립트] 호출패턴과 this 바인딩 (1)	2021.04.15
[자바스크립트] arguments객체 (0)	2021.04.14
함수 객체의 기본 프로퍼티 (0)	2021.04.10
자바스크립트에서는 함수도 객체다, 함수 객체의 기본 프로퍼티 (0)	2021.04.10
자바스크립트 함수 호이스팅이란? (0)	2021.04.10