(javascript) 함수의 다양한 형태

함수의 다양한 형태

콜백 함수

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


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

ex) 이벤트 핸들러 처리
이벤트 핸들러에 콜백 함수가 등록됐다면, 콜백 함수는 이벤트가 발생할 때마다 브라우저에 의해 실행된다.

window.onload : 이벤트 핸들러. 웹 페이지의 로딩이 끝나는 시점에 load 이벤트가 발생하면 실행된다.

window.onload 이벤트 핸들러를 익명 함수로 연결

// 페이지 로드 시 호출될 콜백 함수
window.onload = function() {
	alert('This is the callback function.');
};

즉시 실행 함수

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

같은 함수를 다시 호출할 수 없다.

최초 한번의 실행만을 필요로 하는 초기화 코드 부분에 사용할 수 있다.
즉시 실행 함수를 전체 코드에 감싸는 이유는 자바스크립트 변수 유효 범위 특성 때문.
함수 내부에서 정의된 매개변수와 변수들은 함수 코드 내부에서만 유효할 뿐 함수 밖에서는 유효하지 않다.

-> 변수 이름 충돌 같은 문제를 방지할 수 있다.

내부 함수

함수 내부에 정의된 함수

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

// parent() 함수 정의
function parent() {
	var a = 100;
	var b = 200;
	
	// child() 내부 함수 정의
	function child() {
		var b = 300;
		
		console.log(a);
		console.log(b);
	}
	child();
}

parent();
child();

100
300
Uncaught ReferenceError: child is not defined

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

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

	// child() 함수 반환
	ruturn child;
}

var inner = parent();

inner(); // 100

클로저 : parent와 같은 부모 함수 스코프의 변수를 참조하는 inner() 와 같은 함수

함수를 리턴하는 함수

함수도 일급 객체이므로 일반 값처럼 함수 자체를 리턴할 수도 있음.

함수를 호출함과 동시에 다른 함수로 바꾸거나, 자기 자신을 재정의하는 함수를 구현할 수 있다. 자바스크립트의 언어적인 유연성

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

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