12장 (함수)

12.1 함수란

함수는 자바스크립트에서 가장 중요한 핵심 개념이다. 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화등이 모두 함수와 깊은 관련이 있다.

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

// f(2, 5) = 7
add(2, 5); // 7

프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
함수는 아래 3가지로 이루어져 있다.

매개변수 parameter
인수 argument
반환값 return value

함수는 함수 정의function definition를 통해 생성한다.

12.2 함수를 사용하는 이유

• 코드의 재사용성에 유용
• 유지보수의 편의성을 높임
• 코드의 신뢰성을 높임
• 코드의 가독성을 향상

12.3 함수 리터럴

자바스크립트의 함수는 객체 타입의 값이다.

// 변수에 함수 리터럴을 할당
var f = function add(x, y) {
  return x + y;
};

함수 리터럴의 구성

function키워드
함수 이름
매개 변수 목록
함수 몸체

구성요소	설명
함수 이름	- 함수 이름은 식별자다 - 함수이름은 함수 몸체 내에서만 참조할 수 있는 식별자다. - 함수 이름은 생략할 수 있다.(익명함수)
매개 변수 목록	- 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분 - 각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당된다. - 매개변수는 함수 몸체 내에서 변수와 동일, 식별자 네이밍 규칙을 준수 해야한다.
함수 몸체	- 함수가 호출되었을 때 실행될 문들을 하나의 실행 단위로 정의한 코드 블록 - 함수 호출에 의해 실행된다.

함수는 객체다.

12.4 함수 정의

함수 정의 방식	예시
함수 선언문	function add(x,y){ return x+y; }
함수 표현식	var add = function(x,y){ return x+y; };
Function 생성자 함수	var add = new Function('x','y','x+y');
화살표 함수(ES6)	var add = (x,y)=>x+y

12.5 함수 호출

함수는 함수를 가리키는 식별자와 한 쌍의 소괄호()인 함수 호출 연산자로 호출한다

// 함수 선언문
function add(x, y) {
  return x + y;
}

// 함수 호출
// 인수 1과 2는 매개변수 x와 y에 순서대로 할당되고 함수 몸체의 문들이 실행된다.
var result = add(1, 2);

12.6 참조에 의한 전달과 외부 상태의 변경

원시 값과 객체의 비교’에서 살펴 봤듯이 원시값은 값에 의한 전달(pass by value), 객체는 참조에 의한 전달(pass by reference)방식으로 동작한다. 함수의 매개변수도 동일하다.

// 매개변수 primitive는 원시값을 전달받고, 매개변수 obj는 객체를 전달받는다.
function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = 'Kim';
}

// 외부 상태
var num = 100;
var person = { name: 'Lee' };

console.log(num); // 100
console.log(person); // {name: "Lee"}

// 원시값은 값 자체가 복사되어 전달되고 객체는 참조값이 복사되어 전달된다.
changeVal(num, person);

// 원시값은 원본이 훼손되지 않는다.
console.log(num); // 100

// 객체는 원본이 훼손된다.
console.log(person); // {name: "Kim"}

12.7 다양한 함수의 형태

12.7.1 즉시 실행 함수

함수의 정의와 동시에 즉시 호출되는 함수(IIFE Immediately Invoked Function Expression)
단 한 번만 호출되며 다시 호출할 수 없다.

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

12.7.2 재귀 함수

• 재귀 재밌다.
• // 함수 표현식 var factorial = function foo(n) { // 탈출 조건: n이 1 이하일 때 재귀 호출을 멈춘다. if (n <= 1) return 1; // 함수를 가리키는 식별자로 자기 자신을 재귀 호출 return n * factorial(n - 1); // 함수 이름으로 자기 자신을 재귀 호출할 수도 있다. // console.log(factorial === foo); // true // return n * foo(n - 1); };

console.log(factorial(5)); // 5! = 5 * 4 * 3 * 2 * 1 = 120

<h3>12.7.3 중첩 함수 </h3>

```jsx
function outer() {
  var x = 1;

  // 중첩 함수
  function inner() {
    var y = 2;
    // 외부 함수의 변수를 참조할 수 있다.
    console.log(x + y); // 3
  }

  inner();
}

outer();

12.7.4 콜백 함수

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

// 외부에서 전달받은 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

※고차 함수
-콜백 함수를 전달받은 함수.
-콜백 함수를 자신의 일부분으로 합성한다.
-전달받은 콜백함수의 호출 시점을 결정해서 호출한다.
-콜백 함수에 인수를 전달할 수 있다.