[모던 자바스크립트 Deep Dive] 12장 함수

12.1 함수란?

---

프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것입니다. 함수 내부로 입력을 전달받는 변수를 (parameter), 입력을 (argument), 출력을 반환값return value)라고 합니다. 

 

12.2 함수를 사용하는 이유

---

코드의 재사용 측면, 유지보수와 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있습니다. 

 

12.3 함수 리터럴

---

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호로 사용해 값을 생성하는 표기 방식을 말합니다. 즉 리터럴은 값을 생성하기 위한 표기법입니다. 따라서 함수 리터럴도 평가되어 값을 생성하며, 이 값은 객체입니다. 즉 함수는 객체입니다.

 

12.4 함수 정의

---

1. 함수 선언문

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

2. 함수 표현식 

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

 

3. Function생성자 함수

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

 

4. 화살표 함수 (ES6)

var add = (x, y) => x + y;

변수는 선언(declaration)한다고 하지만 함수는 정의(definition)한다고 표현합니다.

 

12..4.1 함수 선언문

함수 선언문은 표현식이 아니라 문입니다.  함수 선언문이 표현식인 문이라면 undefined 대신 표현식이 평가되어 생성된 함수가 출력되어야 합니다.

 

12..4.2 함수 표현식

함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있습니다. 이러한 함수 정의 방식을 함수 표현식 (function expression)이라 합니다. 함수 선언문은 표현식이 아닌 문이고, 함수 표현식은 표현식인 문입니다.

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

 

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

함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점은 다릅니다. 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징을 함수 호이스팅 (Function hoisting)이라고 합니다. 함수 호이스팅과 변수 호이스팅은 미묘한 차이가 있으므로 주의해야 합니다. 

 

var 키워드 변수선언문과 함수 선언문은 런타임 이전에 JS엔진에 의해 먼저 실행되는 점에서 동일하지만 var 키워드로 선언된 변수는 undefined로 초기화되고, 함수 선언문을 통해 암묵적으로 생성된 식별자는 함수 객체로 초기화됩니다. 

 

함수 표현식은 변수에 할장되는 값이 함수 리터럴인 문입니다.  변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 할당문이 실행되는 시점에 평가되어 함수 객체가 됩니다. 즉 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생합니다. 함수 표현식 이전에 함수 참조 시 undefined로 평가됩니다. 

 

함수 호이스팅은 함수를 호출하기 전에 반드시 함수를 선언해야 한다는 당연한 규칙을 무시므로 함수선언문 대신 함수표현식을 사용할 것을 권장합니다. 

 

12.4.4 Function 생성자 함수

Function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지도 않습니다. 

 

12.4.5 화살표 함수

ES6에서 도입된 arrow function은 function 키워드 대신 arrow (=>)를 사용해 간략한 방법으로 함수를 선언할 ㅜㅅ 있습니다. 화살표 함수는 항상 익명 함수로 정의합니다. 

var add = (x, y) => x + y;

 

12.5 함수 호출

---

12.5.1 매개변수와 인수

매개변수보다 인수가 더 많은 경우 초과된 인수는 무시된다. 초괴된 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다. 

function add(x, y) {
  console.log(arguments) //Arguments(3) [2, 5, 10, callee: ƒ, Symbol(Symbol.iterator): ƒ]
  VM79:6 
  return x + y;
 
}
console.log(add(2, 5, 10)); //7

 

12.5.2 인수 확인 

ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있습니다. 

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

 

12.5.3 매개변수의 최대 개수

ECMAScript 사양에서는 매개변수의 최대 개수에 대해 명시적으로 제한하고 있지 않지만, 코드를 이해하는 데 방해되는 요소이므로 이상적인 매개변수는 0개입니다. 적으면 적을수록 좋습니다. 

 

12.5.4 반환문

함수는 return 키워드와 표현식(반환값)으로 이뤄진 반환문을 사용해 실행결과를 함수 외부로 반환할 수 있습니다. 

 

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

---

패스

 

12.7 다양한 함수의 형태

---

12.7.1 즉시 실행 함수

함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행함수라고 합니다. 

(function() {
  var a = 3;
  var b = 5
  return a + b
}());

 

12.7.2 재귀 함수

함수가 자기 자신을 호출하는 것을 재귀호출이라고 합니다. 재귀 함수 내에는 재귀호출을 멈출 수 있는 탈출 조건을 반드시 만들어야 합니다. 반복문보다 재귀함수를 사용하는 편이 더 직관적일 때만 한정적으로 이용하는 것을 추천합니다. 

 

12.7.3 중첩 함수

함수 내부에 정의된 함수를 중첩함수(nested function) 또는 내부 함수(inner function)라고 합니다. 

 

12.7.4 콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하며, 매개변수를 통해 함수의 외부에서 콜백하수를 전달받은 함수를 고차함수 (High-Order-Function)이라고 합니다. 

 

콜백함수는 함수형 프로그래밍 패러다임 뿐만 아니라 비동기처리에 활용되는 중요한 패턴입니다. 

 

12.7.5 순수 함수와 비순수 함수

부수 효과가 없는 함수를 순수 함수 (pure funciton), 외부 상태에 의존하거나 외부 상태를 변경하는, 즉 부수 효과가 있는 함수를 비순수 함수(impure function)이라고 합니다. 

 

함수형 프로그래밍은 결국 순수함수를 통해 부수효과를 최대한 억제해 오류를 피하고 프로그램의 안정을 높이려는 노력의 일환이라 할 수 있습니다. 

 

Reference: 모던 자바스크립트 Deep Dive