JavaScript 코스

함수

개요

자료형 강의에서 말했듯 자바스크립트의 함수는 리턴 타입을 명시하지 않습니다.
function 키워드로 함수를 선언하며, 괄호 안에서 매개변수를 받으며(변수 타입은 명시하지 않음), return을 통해 값을 반환합니다.

function plus(a, b) {
	var sum = a + b;
	return sum;
}

호출시에는 함수 이름과 괄호를 사용하여 호출합니다.

plus(3, 5);

함수의 범위

JavaScript 함수 내부에서 선언한 변수는 외부에서 참조할 수 없습니다.
함수안에 함수 선언또한 가능한데, 이 경우에도 외부의 함수에서 내부의 변수를 참조할 수는 없습니다.

function myFunc() {
	var myVar = 10;
	return a;
}
console.log( myFunc() ); // 10
console.log( myVar ); // undefined

function outerFunc() {
	var outerVar = 'a';

	function innerFunc() {
		var innerVar = 'b';
		console.log(outerVar); // a
		console.log(innerVar); // b
	}
	innerFunc();

	console.log(outerVar); // a
	console.log(innerVar); // undefined
}

outerFunc();

first-class object

JavaScript에서 함수는 일반적인 언어와 달리 독특한 점을 가지고 있습니다.

JavaScript에서 함수는 first-class object(citizen)로 취급된다.

first-class object란 다음과 같은 조건을 만족하는 객체를 말합니다.

  • 변수나 데이터 구조안에 담을 수 있다.
  • 파라미터로 전달 할 수 있다.
  • 반환값(return value)으로 사용할 수 있다.
  • 할당에 사용된 이름과 관계없이 고유한 구별이 가능하다.
  • 동적으로 프로퍼티 할당이 가능하다.

자바스크립트에서 일반적으로 사용되는 객체 변수는 모두 first-class object라고 볼 수 있는데요, 함수조차 이와 같은 객체로 취급됩니다.

이러한 특성으로 인해 자바스크립트에서 함수 선언을 다음처럼 할 수도 있습니다.

var plusFunc = function (a, b) {
	return a + b;
};
// 익명의 함수를 만들고 plusFunc 변수에 대입

plusFunc(3, 5);

아래처럼 함수에서 함수 자체를 반환하는 것도 가능합니다.

function a(x) {
	var b = function(y) {
		return x + y;
	};
	return b;
}

a(3)(4); // 7 반환

함수를 객체의 프로퍼티로도 사용할 수도 있습니다.

var jacob = {
	'age': 18,
	'run': function() {
		alert('Jacob is running');
	},
	'sleep': function() {
		alert('Jacob sleeps');
	},
};

즉시 실행 함수

자바스크립트는 원래 네임스페이스 개념이 없습니다.
하지만 함수의 클로저(범위) 개념과 first-class object 개념을 이용하면 비슷한 효과를 낼 수 있습니다.

(function () {
	var a = 10;
	var b = 20;
	console.log(a + b); // 30
})();

console.log(a); // undefined

위와 같은 특이한 코드는 익명 함수를 만들고 즉시 실행하게 하는 코드입니다.
위 코드를 길게 풀면 다음처럼 쓸 수 있습니다.

var tempFunction = (function() {
	var a = 10;
	var b = 20;
	console.log(a + b); // 30
});
tempFunction();

변수에 할당해서 재실행하지 않고, 즉각적으로 함수를 바로 실행한 것이라 볼 수 있는데요,
변수나 함수를 외부에서 접근하지 못하게 숨기거나 충돌을 방지하기 위해 많이 사용되는 기법입니다.

즉시 실행 함수에서 긴 변수를 호출 인자로 넘기고 파라미터를 짧게 쓴다면 다음처럼 코드를 줄이는 효과도 낼 수 있습니다.

(function (b) {
	b.getElementById('content');
	...

})(document.body);