[Javascript] 함수(function)

함수(function)

 함수는 일련의 과정을 statement로 구현하고 코드 블록으로 감싸 하나의 실행 단위로 정의한 것이다. 함수는 입력을 받아 출력을 내보내는데, 이때 함수 내부로 입력을 전달받는 변수를 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 한다.

함수는 함수 정의(function definition)를 통해 생성하고 함수 호출(function call)을 하면 코드 블록에 담긴 statement들이 일괄적으로 실행되고 반환값을 반환한다.

💡 함수를 사용하는 이유?

• 함수는 몇 번이든 호출할 수 있어 코드 재사용 측면에서 유용하다.
• 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높인다.
• 적절한 함수 이름을 붙이면 내부 코드를 이해하지 않고도 역할을 파악할 수 있기 때문에 코드의 가독성을 향상시킨다.

✔ 이상적인 함수는 한 가지 일만 하고 가급적 작게 만드는 것이 좋다.
✔ 매개변수는 최대 3개 이상을 넘지 않는 것을 권장한다.

---

함수 정의

함수 선언문(function declaration)

 함수 선언문은 함수 리터럴과 형태가 동일하지만 리터럴과 달리 함수 이름을 생략할 수 없다. 또한, 함수 선언문은 표현식이 아니라 문이다.

// function declaration
function add(a, b) {
  return a + b;
}

console.dir(add); // console.dir은 함수 객체의 프로퍼티까지 출력
console.log(add(4, 6));

[실행결과]
[Function: add]
10

💡 표현식인 문 VS 표현식이 아닌 문
표현식인 문은 값으로 평가되므로 변수에 할당할 수 있다. 표현식이 아닌 문은 값으로 평가되지 않아 변수에 할당하면 에러가 발생한다.

함수 표현식(function expression)

 함수는 값의 성질을 갖는데, 이러한 객체를 일급 객체(first-class object)라고 한다. 함수 객체를 변수에 할당하는 방식을 함수 표현식이라고 한다.

// function expression
var sub = function (x, y) { // 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적
  return x - y; 
};

console.log(sub(10, 5));

[실행결과]
5

함수 생성 시점과 호이스팅(hoisting)

 함수 선언문으로 정의한 함수는 선언문 이전에 호출할 수 있다. 그러나 함수 표현식으로 정의한 함수는 표현식 이전에 호출할 수 없다.

// function declaration VS function expression
// function call
console.log(declAdd(4, 6)); // 10
console.log(expAdd(4, 6)); // TypeError

function declAdd(x, y) {
  return x + y;
}

var expAdd = function (x, y) {
  return x + y;
};

함수 선언문은 런타임(runtime) 이전에 자바스크립트 엔진에 의해 함수 객체가 먼저 생성되고 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 객체를 할당한다. 그래서 함수 선언문 이전에 함수를 참조할 수 있고 호출할 수도 있는 것이다.

이처럼 함수 선언문이 코드 선두로 끌어 올려진 것처럼 동작하는 특징을 함수 호이스팅(function hoisting)이라 한다.

반면, 함수 표현식에서는 변수 선언이 런타임 이전에 실행되어 undefined로 초기화되나 함수 리터럴은 할당문이 실행되는 시점에 평가된다. 그래서 함수를 표현식보다 먼저 호출하면 undefined를 호출하는 것과 같으므로 TypeError가 발생하게 되는 것이다.

📌 변수 선언
var 키워드를 사용한 변수 선언은 undefined로 암묵적인 초기화가 수행됨.

화살표 함수(arrow function)

 function 키워드 대신 화살표 =>를 사용해 간략하게 함수를 선언할 수 있다.

// arrow function
const div = (x, y) => x / y;

console.log(div(10, 8));

[실행결과]
1.25

---

다양한 함수 형태

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)

 즉시 실행 함수는 함수 정의와 동시에 즉시 호출되는데 단 한 번만 호출되며 다시 호출할 수 없다. 일반 함수처럼 값을 반환할 수 있고 인수 전달도 가능하다.

// IIFE
(function () {
  var x = 8;
  var y = 5;
  return x * y;
}());

var immed = (function () {
  var x = 8;
  var y = 5;
  return x * y;
}());

console.log(immed);

immed = (function (a, b) {
  return a * b;
}(8, 5));

console.log(immed);

[실행결과]
40
40

이처럼 즉시 실행 함수 내에 코드를 모아두면 혹시라도 존재하고 있는 변수나 함수 이름의 충돌을 방지할 수 있다.

재귀 함수(recursive function)

 자기 자신을 호출하는 행위를 재귀 호출(recursive call)이라고 한다. 재귀 함수는 재귀 호출을 수행하는 함수를 말하며 반복되는 처리를 위해 사용한다.

재귀 함수는 자신을 무한 재귀 호출하므로 반드시 함수 내에 탈출 조건(escape condition)을 설정해야 한다. 탈출 조건이 없으면 stack overflow 에러가 발생한다.

// recursive function
function countDown(num) {
  if (num === 0) return ; // 탈출 조건
  console.log(num);
  countDown(num - 1);
}

countDown(5);

[실행결과]
5
4
3
2
1

ex) 팩토리얼 재귀 함수

function fact(n) {
  if (n === 1) return 1;
  return n * fact(n - 1);
}
> 
console.log(`1! = ${fact(1)}`);
console.log(`2! = ${fact(2)}`);
console.log(`3! = ${fact(3)}`);
console.log(`4! = ${fact(4)}`);
console.log(`5! = ${fact(5)}`);
> 
[실행결과]
1! = 1
2! = 2
3! = 6
4! = 24
5! = 120

✔ 재귀 함수는 반복문 없이 반복되는 처리를 구현할 수 있으나, 무한 루프에 빠질 수 있으므로 주의해야 한다. 때문에 반복문보다 직관적으로 이해하기 쉬울 때만 한정적으로 사용하는 것이 좋다.

중첩 함수(nested function)

 중첩 함수는 함수 내부에 정의된 함수를 뜻하며, 내부 함수(inner function)라고도 한다. 그리고 중첩 함수를 감싸고 있는 함수를 외부 함수(outer function)라고 부른다. 중첩 함수는 외부 함수 내에서만 호출할 수 있다.

// nested function
function outer() { // outer function
  var a = 5;

  function inner() { // inner function
    var b = 3;
    console.log(a + b);
  }

  inner();
}

outer();

[실행결과]
8

콜백 함수(callback function)

 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function)라고 한다. 또한 매개변수를 통해 함수 외부에서 콜백 함수를 전달받은 함수를 고차 함수(HOF, Higher-Order Function)라고 부른다.

// callback function
function odd(num, cb) {
  for (i = 1; i < num; i++) {
    cb(i);
  }
}

var high = function (i) {
  if (i % 2 !== 0) console.log(i);
};

odd(10, high);

[실행결과]
1
3
5
7
9

위 코드에서처럼 odd 함수 반복문 내부에서 다른 일을 하고 싶다면 함수를 새롭게 정의해야 하지만 콜백 함수를 사용하면 분리가 가능하다.

함수의 변하지 않는 공통적인 로직(= odd)은 미리 정의해 두고 경우에 따라 변경되는 로직(= high)은 고차 함수와 같이 외부에서 전달받으면 매번 함수를 정의해야 하는 번거로움을 줄일 수 있다.