본문 바로가기

Web + APP/JavaScript

JavaScript 함수와 프로토타입 체이닝 (3)

반응형
SMALL

함수의 다양한 형태

1. 콜백 함수

자바스크립트 함수 표현식에서의 함수 이름은 선택 사항입니다. 이러한 익명 함수의 대표적 용도가 콜백 함수입니다.

콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말합니다.

 

대표적인 콜백 함수의 사용 예가 이벤트 핸들러 처리가 되겠죠.

window.onload = function() {
	alert('This is the callback function.');
};

2. 즉시 실행 함수

함수를 정의함과 동시에 바로 실행하는 함수를 즉시 실행 함수라고 합니다. 이 역시 익명 함수를 응용한 형태입니다.

(function (name) {
	console.log('This is the immediate function -> ' + name);
})('foo');

즉시 실행 함수를 만드는 방법은 함수 리터럴을 괄호()로 둘러싸고 (함수 이름이 있든 없든 상관 없습니다.. 그런 다음 함수가 바로 호출될 수 있게 () 괄호 쌍을 추가합니다. 인자도 넘길 수 있습니다.

 

즉시 실행 함수의 경우 최초 한 번의 실행만을 필요로 하는 초기화 코드 부분 등에 사용할 수 있습니다.

3. 내부 함수

자바스크립트에서는 함수 코드 내부에서 다시 함수 정의가 가능합니다. 이를 내부 함수라고 부릅니다.

 

보통 클로저를 생성하거나 부모 함수 코드에서 외부에서의 접근을 막고 독립적인 헬퍼 함수를 구현하는 용도 등으로 사용됩니다.

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

parent(); // 100, 300
child(); // Error

이 코드에서 여러분이 아셔야 할 부분은 2가지가 아닌가 싶습니다.

 

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

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

 

2. 내부 함수에서는 자신을 둘러싼 부모 함수의 변수에 접근이 가능하다.

2번이 가능한 이유는 자바스크립트의 스코프 체이닝 때문입니다. 이 역시도 나중에 알아볼 개념으로 남겨둡시다.

 

예외로 함수 외부에서도 특정 함수 스코프 안에 선언된 내부 함수를 호출할 수 있습니다. 그 방법은 부모 함수에서 내부 함수를 외부로 리턴하면 됩니다.

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

var inner = parent();
inner(); // 100

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

4. 함수를 리턴하는 함수

이는 많이 얘기했던거 같은데 함수도 일급 객체이므로 일반 값처럼 함수 자체를 리턴할 수 있습니다. 이러한 특징은 다양한 활용이 가능해집니다.

var self = function() {
	console.log('a');
    return function () {
    	console.log('b');
	}
}

self = self(); // a
self(); // b

오늘은 여기까지 하도록 하겠습니다.

 

짧죠??

 

왜냐면 다음에 할 녀석이 굉장히 길기 때문인데, 바로 함수 호출과 this라는 녀석입니다.

 

만만한 녀석이 아니니 따로 구분해서 다뤄보도록 하겠습니다.

벌써 힘드네

이상 JavaScript 함수와 프로토타입 체이닝 (3)였습니다. ^_^

반응형
LIST