Modern JavaScript Deep Dive 스터디 - CCH12 함수

참고 자료: ⟪모던 자바스크립트 Deep Dive⟫"(이웅모 지음,위키북스, 2020)

---

1. 함수 정의 방법

1) 함수 선언문

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

2) 함수 표현식

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

console.log(add(2, 5)); // 7

3) Funtion 생성자 함수

var add = new Function('x', 'y', 'return x + y');

console.log(add(2, 5)); // 7

4) 화살표 함수(ES6)

const add = (x, y) => x + y;
console.log(add(2, 5)); // 7

---

2. 다양한 함수 형태

1) 즉시 실행 함수

// 익명 즉시 실행 함수
(function () {
  var a = 3;
  var b = 5;
  return a * b;
}());

// 기명 즉시 실행 함수
(function foo() {
  var a = 3;
  var b = 5;
  return a * b;
}());

// 재사용은 불가
foo(); // ReferenceError: foo is not defined

• 아래와 같이 여러 방식으로 표현 가능(이 책에서는 첫 번째 방식 이용)

(function () {
  // ...
}());

(function () {
  // ...
})();

!function () {
  // ...
}();

+function () {
  // ...
}();

• 특징

// 즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있다.
var res = (function () {
  var a = 3;
  var b = 5;
  return a * b;
}());

console.log(res); // 15

// 즉시 실행 함수에도 일반 함수처럼 인수를 전달할 수 있다.
res = (function (a, b) {
  return a * b;
}(3, 5));

console.log(res); // 15

2) 콜백 함수

// 외부에서 전달받은 f를 n만큼 반복 호출한다
function repeat(n, f) {
  for (var i = 0; i < n; i++) {
    f(i); // i를 전달하면서 f를 호출
  }
}

var logAll = function (i) {
  console.log(i);
};

// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logAll); // 0 1 2 3 4

var logOdds = function (i) {
  if (i % 2) console.log(i);
};

// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logOdds); // 1 3

3. 순수 함수 vs 비순수 함수

1) 순수 함수

• side effect가 없는 함수
• 동일한 인수 전달 -> 동일한 인수 반환

var count = 0; // 현재 카운트를 나타내는 상태

// 순수 함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
function increase(n) {
  return ++n;
}

// 순수 함수가 반환한 결과값을 변수에 재할당해서 상태를 변경
count = increase(count);
console.log(count); // 1

count = increase(count);
console.log(count); // 2

2) 비순수 함수

• side effect 있는 함수
• 외부 상태에 따라 반환값이 달라지는 함수

var count = 0; // 현재 카운트를 나타내는 상태: increase 함수에 의해 변화한다.

// 비순수 함수
function increase() {
  return ++count; // 외부 상태에 의존하며 외부 상태를 변경한다.
}

// 비순수 함수는 외부 상태(count)를 변경하므로 상태 변화를 추적하기 어려워진다.
increase();
console.log(count); // 1

increase();
console.log(count); // 2