Modern JavaScript 함수
1. 함수
- 함수란 : 작업 수행을 위해 필요한 statement 집합을 정의한 코드 블록
- 매개변수를 가지며 호출로 일괄 작업 가능
- 재사용측면에서 유용
- 함수 정의 방식 : 함수 표현식과 함수 선언문에서 사용한 함수명은 함수 몸체에서 자신을 재귀적 호출(Recursive function call)하거나 자바스크립트 디버거가 해당 함수를 구분할 수 있는 식별자의 역할을 한다.
2. 함수 선언문
- 함수 표현식
- 기명 함수 표현식(named function expression)
var foo = function multiply(a, b) {
return a * b;
};
- 익명 함수 표현식(anonymous function expression)
var bar = function(a, b) {
return a * b;
};
- Function 생성자 함수 : Function.prototype.constructor 프로퍼티로 접근
var square = new Function('number', 'return number * number');
console.log(square(10)); // 100
- 일급 객체 : 기본적 조작을 제한없이 사용
- 무명의 리터럴로 표현이 가능하다.
- 변수나 자료 구조에 저장할 수 있다.
var increase = function (num) {
return ++num;
};
var decrease = function (num) {
return --num;
};
var predicates = { increase, decrease };
- 함수의 매개변수에 전달할 수 있다.
- 반환값으로 사용할 수 있다.
function makeCounter(predicate) {
var num = 0;
return function () {
num = predicate(num);
return num;
};
}
3. 매개변수(parameter) / 인수(argument)
- 매개변수 : 함수내에서 변수와 동일하게 메모리공간을 확보
- 인수 : 함수에 전달되며 매개변수에 할당됨
- 인수를 전달하지 않으면 매개변수는 undifined로 초기화됨
- 매개변수
var foo = function (p1, p2) {
console.log(p1, p2);
};
- 인수
foo(1); // 1 undefined
4. Call-by-value / Call-by-reference
- Call-by-value : 원시타입 인수는 값에 의해 호출됨
function foo(primitive) {
primitive += 1;
return primitive;
}
var x = 0;
console.log(foo(x)); // 1
console.log(x); // 0
- Call-by-reference : 참조에 의한 호출
function changeVal(primitive, obj) {
primitive += 100;
obj.name = 'Kim';
obj.gender = 'female';
}
var num = 100;
var obj = {
name: 'Lee',
gender: 'male'
};
console.log(num); // 100
console.log(obj); // Object {name: 'Lee', gender: 'male'}
changeVal(num, obj);
console.log(num); // 100
console.log(obj); // Object {name: 'Kim', gender: 'female'}
- 반환값 (return): 함수를 호출한 코드(caller)에게 값을 반환할 때 사용
5. 함수의 다양한 형태
- 즉시 실행 함수 (IIFE, Immediately Invoke Function Expression) : 다시 호출할 수 없다. (최초 한번만 실행이 필요한 초기화 처리등에 사용)
// 기명 즉시 실행 함수(named immediately-invoked function expression)
(function myFunction() {
var a = 3;
var b = 5;
return a * b;
}());
// 익명 즉시 실행 함수(immediately-invoked function expression)
(function () {
var a = 3;
var b = 5;
return a * b;
}());
// SyntaxError: Unexpected token (
// 함수선언문은 자바스크립트 엔진에 의해 함수 몸체를 닫는 중괄호 뒤에 ;가 자동 추가된다.
function () {
// ...
}(); // => };();
// 따라서 즉시 실행 함수는 소괄호로 감싸준다.
(function () {
// ...
}());
(function () {
// ...
})();
- 내부 함수 (Inner function) : 함수 내부에 정의된 함수
- 부모함수는 자식함수 (내부함수)에 접근할 수 없다.
- 내부함수는 부모함수의 외부에 접근할 수 없다.
function parent(param) {
var parentVar = param;
function child() {
var childVar = 'lee';
console.log(parentVar + ' ' + childVar); // Hello lee
}
child();
console.log(parentVar + ' ' + childVar);
// Uncaught ReferenceError: childVar is not defined
}
parent('Hello');
- 재귀함수 (Recusive function): 자기 자신을 호출하는 함수
- 재귀 함수는 자신을 무한히 연쇄 호출하므로 호출을 멈출 수 있는 탈출 조건을 반드시 있어야함 (stackoverflow error)
// 피보나치 수열
// 피보나치 수는 0과 1로 시작하며, 다음 피보나치 수는 바로 앞의 두 피보나치 수의 합이 된다.
// 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, ...
function fibonacci(n) {
if (n < 2) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(0)); // 0
console.log(fibonacci(1)); // 1
console.log(fibonacci(2)); // 1
console.log(fibonacci(3)); // 2
console.log(fibonacci(4)); // 3
console.log(fibonacci(5)); // 5
console.log(fibonacci(6)); // 8
// 팩토리얼
// 팩토리얼(계승)은 1부터 자신까지의 모든 양의 정수의 곱이다.
// n! = 1 * 2 * ... * (n-1) * n
function factorial(n) {
if (n < 2) return 1;
return factorial(n - 1) * n;
}
console.log(factorial(0)); // 1
console.log(factorial(1)); // 1
console.log(factorial(2)); // 2
console.log(factorial(3)); // 6
console.log(factorial(4)); // 24
console.log(factorial(5)); // 120
console.log(factorial(6)); // 720
- 콜백함수 (Callback function) : 호출방식이 아닌, 특정시점에 이벤트 발생시 시스템에 의해 호출 (ex. event handler 처리)
- 비동기식 처리모델(Asynchronous processing model)에 사용 : 처리 종료시 호출될 함수(콜백함수)를 미리 매개변수에 전하고 종료시 콜백함수 호출
- que에 들어있다가 이벤트 발생시 호출 : 클로저로 큐 단독으로 존재하다가 호출되어도 전달받은 함수의 변수에 접근 가능
function doSomething() {
var name = 'Lee';
setTimeout(function () {
console.log('My name is ' + name);
}, 100);
}
doSomething(); // My name is Lee