소년코딩의 자바스크립트 강좌 14. 함수의 다양한 종류

1. 콜백 함수(Callback function)

콜백(Callback)이란 디자인 패턴 중 하나인 옵저버(Observer) 패턴에서 나온 개념으로써 

객체의 상태 변화(이벤트)가 발생 하였을 경우에 이러한 사실을 함수를 통해 전달하게 되는데,

이를 콜백 함수라고 한다.

 

대표적인 콜백 함수의 사용 예가 자바스크립트에서의 이벤트 핸들러 처리다.

웹페이지가 로드되거나 마우스가 클릭되는 등의 DOM 이벤트가 발생한 경우, 브라우저는 정의된 DOM 이벤트에 해당하는 이벤트 핸들러를 실행시킨다.

만약 이러한 이벤트 핸들러에 콜백함수가 등록되어있다면 콜백 함수는 이벤트가 발생할 때마다 브라우저에의해 실행된다.

// 페이지 로드시 호출될 콜백 함수
window.onload = function() {
    alert("This Page is Oppa coding");
}

---

2. 즉시 실행 함수(Immediately-invoked function expression)

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

(function(name) {
    console.log(name)
})('oppa');    // 'oppa'

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

함수 리터럴을 괄호()로 둘러싸준 다음, 함수가 바로 호출될 수 있게 () 괄호 쌍을 추가해주면 된다.

이때 괄호 안에 값을 추가해주면 즉시 실행 함수의 인자(매개변수)로 바로 넘길 수 있다.

즉시 실행 함수는 최초 한 번의 실행만을 필요로 하는 초기화 코드나, 외부에 공유되면 안되는 코드부분에 자주 사용한다.

---

3. 내부 함수(Inner function)

자바스크립트에서는 함수 코드 내부에서도 다시 함수 정의가 가능하다.

이렇게 함수 내부에 정의된 함수를 내부 함수라고 하는데, 클로저를 생성하거나 

부모 함수 코드에서 외부에서의 접근을 막고 독립적인 헬퍼 함수를 구현하는 용도등으로 사용한다.

내부 함수의 특징은 두 가지가 있다.

1.  내부 함수에서는 자신을 둘러싼 부모 함수의 변수에 접근이 가능하다.
2.  내부 함수는 일반적으로 자신이 정의된 부모 함수 내부에서만 호출이 가능하다.

// parent() 함수 정의
function parent() {
    var name = "oppa";
    var age = 24;
 
    // child() 함수 정의
    function child() {
        var name = "blog";
    
        console.log(name);
        console.log(age);
    }
 
    // parent()함수에서 childe()함수 호출 
    child();
}
 
parent();
child();  // 전역에서 내부 함수 호출
 
// (출력값)
"blog"
24
Uncaught Reference Error : child is not defined

위 그림에서 함수를 둘러싸고 있는 박스 부분이 바로 함수 스코프다.

기본적으로 함수 스코프 밖에서는 함수 스코프 안에 선언된 모든 변수나 함수에 접근이 불가능 하다.

---

4. 함수를 리턴하는 함수

자바스크립트 함수는 일급 객체이므로 일반 값처럼 함수 자체를 리턴할 수 있다.

function blog() {
    console.log("oppa");
    
    return function() {
        console.log("coding");
    }
}
 
// blog 함수 호출 -> 함수가 리턴된다.
var f = blog();          // (출력값) "oppa"

// 리턴된 값(함수) 호출
f();                     // (출력값) "coding"

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.