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