함수

함수란?

함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

매개변수(parameter) : 함수 내부로 입력을 전달 받는 변수
인수(argument) : 입력
반환값 (return value) : 출력

함수는 함수 정의를 통해 생성하고 함수호출을 통해 실행한다.

함수를 사용하는 이유

• 함수를 몇 번이든 호출할 수 있으므로 코드의 재사용성면에서 유용하다
• 재사용성을 높이는 함수는 유지보수 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높인다
• 코드의 가독성을 향상 시킨다.

함수 리터럴

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

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기 방식을 말한다.

함수 리터럴도 평가되어 값을 생성하며 함수는 객체다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.

함수 정의

변수는 선언한다고 하지만 함수는 정의한다고 표현한다.

함수 선언문

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

// 함수 호출
console.log(add(2, 5)); // 7

• 함수 선언문은 함수 리터럴 형태가 동일하다
• 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름 생략할 수 없다.
• 함수 선언문은 표현식이 아닌 문이다.

함순느 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다.

함수 표현식

// 함수 표현식
var add = function (x, y) {
  return x + y;
};

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

자바스크립트의 함수는 일급 객체다.

함수 생성 시점과 함수 호이스팅

// 함수 참조
console.dir(add); // ƒ add(x, y)
console.dir(sub); // undefined

// 함수 호출
console.log(add(2, 5)); // 7
console.log(sub(2, 5)); // TypeError: sub is not a function

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

// 함수 표현식
var sub = function (x, y) {
  return x - y;
};

• 함수 선언문과 함수 표현식의 함수 생성 시점은 다르다
• 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 한다
• 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생하는것

화살표 함수

// 화살표 함수
const add = (x, y) => x + y;
console.log(add(2, 5)); // 7

함수 호출

매개변수와 인수

• 매개변수는 함수 몸체 내부에서만 참조가능, 외부에서는 불가능

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

console.log(add(2)); // NaN

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

• 인수가 부족해서 인수가 할당되지 않은 매개변수의 값은 undefined다,

• 매개변수가 인수보다 더 많은 경우 초과된 인수는 무시된다. 초과된 인수는 버려지는 것이 아닌 암묵적으로 argument 객체의 프로퍼티로 보관된다

인수 확인

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

console.log(add(2));        // NaN
console.log(add('a', 'b')); // 'ab'

• 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다
• 자바스크립트는 동적 타입 언어다. 따라서 자바스크립트 함수는 매개변수의 타입을 사전에 지정할 수 없다.

function add(a, b, c) {
  a = a || 0;
  b = b || 0;
  c = c || 0;
  return a + b + c;
}

console.log(add(1, 2, 3)); // 6
console.log(add(1, 2)); // 3
console.log(add(1)); // 1
console.log(add()); // 0

• 인수가 전달되지 않은 경우 단축 평가를 사용해 매개변수에 기본값을 할당하는 방법도 있다.

function add(a = 0, b = 0, c = 0) {
  return a + b + c;
}

console.log(add(1, 2, 3)); // 6
console.log(add(1, 2)); // 3
console.log(add(1)); // 1
console.log(add()); // 0

• 기본값을 사용하면 함수 내에서 인수 체크 및 초기화를 간소화 할 수 있다.

반환문

function multiply(x, y) {
  return x * y; // 반환문
  // 반환문 이후에 다른 문이 존재하면 그 문은 실행되지 않고 무시된다.
  console.log('실행되지 않는다.');
}

console.log(multiply(3, 5)); // 15

• 함수 호출은 표현식이다
• 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나간다. 반환문이후에 다른 문이 존재하면 그 문은 실행되지 않고 무시된다

function multiply(x, y) {
  // return 키워드와 반환값 사이에 줄바꿈이 있으면
  return // 세미콜론 자동 삽입 기능(ASI)에 의해 세미콜론이 추가된다.
  x * y; // 무시된다.
}

console.log(multiply(3, 5)); // undefined

• 세미콜론 자동 삽입 기능에 의해 세미콜론이 추가되어 의도치 않은 결과가 발생할 수 있다.

다양한 함수의 형태

즉시 실행 함수

// 즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있다.
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

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

재귀함수

// 함수 표현식
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

재귀함수는 자신을 무한 재귀 호출한다. 따라서 탈출 조건을 반드시 만들어야 한다.

콜백함수

// 콜백 함수를 사용하는 고차 함수 map
var res = [1, 2, 3].map(function (item) {
  return item * 2;
});

console.log(res); // [2, 4, 6]

// 콜백 함수를 사용하는 고차 함수 filter
res = [1, 2, 3].filter(function (item) {
  return item % 2;
});

console.log(res); // [1, 3]

// 콜백 함수를 사용하는 고차 함수 reduce
res = [1, 2, 3].reduce(function (acc, cur) {
  return acc + cur;
}, 0);

console.log(res); // 6

• 콜백 함수: 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
• 고차 함수 : 매개 변수를 통해 외부에서 콜백 함수를 전달 받은 함수