12 함수

12. 1 함수란?

• 함수는 자바스크립트에서 가장 중요한 핵심 개념
• 수학의 함수: 입력을 받아 출력을 내보내는 일련의 과정을 정의한 것
• 프로그래밍 언어의 함수: 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단의로 정의한 것
• 매개변수(paremeter) : 함수 내부로 입력을 전달 받는 변수
• 인수(argument) : 입력
• 반환값(retrun value) : 출력
• 함수는 함수 정의를 통해 생성
• 함수 실행을 위해 인수를 매개변수를 통해 전달하면서 함수의 실행을 명시적으로 지시해야 한다.
• 이름 함수 호출이라 한다.

// 함수 정의
function add(x, y){
	return x + y;
}

// 함수 호출
var rsult = add(2, 5);

12. 2 함수를 사용하는 이유

• 함수는 필요할 때 여러 번 호출할 수 있다.
• 몇 번이든 호출할 수 있으므로 코드의 재사용이라는 측면에서 매우 유용
• 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다.
• 적절한 함수 이름은 함수 내부코드를 이해하지 않고도 함수의 열학을 파악할 수 있게해 코드의 가독성을 향상시킨다.

12.3 함수 리터럴

• 자바스크립트의 함수는 객체 타입의 값이다.
• 따라서 함수도 함수 리터럴로 생성할 수 있다.
• 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다.

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

함수 리터럴의 구성 요소

함수 이름
- 함수 이름은 식별자다. 다라서 식별자 네이밍 규칙을 준수해야한다
- 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자.
- 함수 이름은 생략할 수 있다. 이름이 있는 함수를 기명 함수, 이름이 없는 함수를 무명/익명 함수라 한다.

매개 변수 목록
- 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분한다.
- 각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당된다. 즉, 매개변수 목록은 순서에 의미가 있다.
- 매개변수는 함수 몸체 내애서 변수와 동일하게 취급된다. 따라서 매개변수도 변수와 마찬가지로 식별자 네이밍 규칙을 준수해야 한다.

함수 몸체
- 함수가 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행 단위로 정의한 코드 블록이다.
- 함수 몸체는 함수 호출에 의해 실행된다.

• 함수는 객체지만 일반 객체와는 다르다.
• 일반 객체는 호출할 수 없지만 함수는 호출 할 수 있다.
• 함수 객체만의 고유한 프로퍼티를 갖는다

12.4 함수 정의

• 함수 정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들. 그리고 반환할 값을 지정하는 것을 말한다
• 정의된 함수는 자바스크립트 엔진에 의해 평가되어 함수 객체가 된다.
• 함수를 정의하는 방법은 4가지가 있다

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

// 함수 표현식
var add = function add(x, y){
	return x + y;
}
// Function 생성자 함수
var add = new Function('x', 'y', 'return x + y');

// 화살표 함수(ES6)
var add = (x, y) => x + y;

• 모든 함수 정의 방식은 함수를 정의한다는 면에서는 동일하지만 미묘하지만 중요한 차이가 있다.

12.4.1 함수 선언문

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

• 함수 선언문은 함수 리터럴과 형태가 동일하다.
• 단, 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다
• 함수 선언문은 표현식이 아닌 문이다.
• 표현식이 아닌 문이므로 변수에 할당할 수없으나 다음 예제를 보면 할당되는 것처럼 보인다.

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

• 자바스크립트 엔진이 코드의 문맥에 따라 두가지로 해석

1. 동일한 함수 리터럴을 표현식이 아닌 함수 선언문으로 해석
2. 표현식이 문인 함수 리터럴 표현식으로 해석

• 이는 기명 함수 리터럴은 함수 선언문 또는 함수 리터럴 표현식으로 해석될 가능성이 있다는 것이다.
• 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석
• 함수 리터럴이 값으로 평가되어야 하는 문맥이면 함수 리터럴 표현식으로 해석

// 기명 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석
// 함수 선언문에서는 함수 이름을 생략할 수 없다
function foo(){console.log('foo')}

foo(); // foo

// 함수 리터럴을 피연산자로 사용하면 함수 리터럴 표현식으로 해석
// 함수 리터럴에서는 함수 이름 생략 가능
(function bar(){console.log('bar');)};
 bar(); // ReferenceError

• 단독으로 사용된 함수 리터럴(foo)는 함수 선언문으로 해석
• 그룹 연산자() 내에 있는 함수 리터럴(bar)은 함수 리터럴 표현식으로 해석
• 그룹 연산자의 피연산자는 값으로 평가될 수 있는 표현식이어야 한다.
• 표현식이 아닌 함수 선언문은 피연사자로 사용할 수 없다.
• 함수 선언문과 함수 리터럴 표현식은 함수 객체를 생성한다는 점에서 동일하지만 호출에 차이가 있다.
• foo는 호출할 수 있지만 bar는 호출할 수 없다
• "함수 리터럴"에서 "함수 이름은 함수 몸체 내애서만 참조할 수 있는 식별자"라고 했다.
• 이는 함수 몸체 외부에서는 함수 이름으로 함수를 호출할 수 없다는 의미
• 함수를 가리키는 식별자가 없다는 것과 마찬가지이다.
• 자바스크립트 엔진은 함수 선언문을 해석해 함수 객체를 생성한다.
• 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 거기에 함수 객체를 할당한다
• 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다.

12.4.2 함수 표현식

• 자바스크립트이 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다.
• 이처럼 값의 성질을 갖는 객체를 일급 객체라 한다.
• 자바스크립트의 함수는 일급 객체다
• 함수가 일급 객체라는 것은 함수를 값처러 자유롭게 사용할 수 있다는 의미다.
• 함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당하는데 이러한 정의 방식을 함수 표현식이라 한다.

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

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

• 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적이다
• 함수 선언문은 "표현식이 아닌 문"이고 함슈 표현식은 "표현식인 문"이다.

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

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

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

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

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

• 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다
• 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다
• 이는 두 함수의 생성 시점이 다르기 때문이다.
• 함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체가 먼저 생성된다.
• 그리고 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 객체 함수를 할당한다.
• 런타임에는 이미 함수 객체가 생성되어 있고 함수 이름과 동일한 식별자에 할당까지 완료된 상태이므로 함수 선언문 이전에 참조, 호출할 수 있다.
• 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 한다.
• var 키워드를 사용한 변수 선언문과 함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행되어 식별자를 생성한다는 점에서 동일
• 하지만 var 키워드로 선언된 변수는 undefined로 초기화
• 함수 선언문을 통해 생성된 식별자는 함수 객체로 초기화 된다.
• var 키워드를 사용한 변수 선언문 이전에 변수를 참조하면 변수 호이스팅에 의해 undefined로 평가되지만 함수 선언문으로 정의한 함수 선언문 이전에 호출하면 함수 호이스팅에 의해 호출이 가능
• 변수 할당문의 값은 할당문이 실행되는 시점, 즉 럭탄임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
• 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

12.4.4 Function 생성자 함수

• 자바스크립트가 기본 제공하는 빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해서 반환한다.
• Function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지 않다.
• 클로저를 생성하지 않는 등, 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.

12.4.5 화살표 함수

• ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표 => 를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다.
• 화살표 함수는 항상 익명 함수로 정의한다.

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

• 화살표 함수는 기존의 함수보다 표현만 간략한 것이 아닌 내부 동작 또한 간략화되어 있다.
• 화살표 함수는 생성자 함수로 사용할 수 없으며, 기존 함수와 this 바인딩 방식이 다르고 prototype 프로퍼티가 없으며 arguments 객체를 생성하지 않는다.

12.5 함수 호출

• 함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출한다.
• 함수 호출 연산자 내에는 0개 이상의 인수를 쉼표로 구분해서 나열한다.

12.5.1 매개변수와 인수

• 함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수를 통해 인수를 전달한다.
• 인수는 값으로 평가될 수 있는 표현식이어야 한다.
• 인수는 함수를 호출할 때 지정하며, 개수와 타입에 제한이 없다.

// 함수 선언문
function add(x, y){ // 매개변수 x, y
	return x + y; // 반환 ㄱ밧
}
// 함수 호출
// 인수 1과 2가 매개변수에 순서대로 할당, 함수 몸체의 문들이 실행
var result = add(1, 2); // 인수 1, 2

• 매개 변수는 함수를 정의할 때 선언, 함수 몸체 내부에서 변수와 동일하게 취급된다.
• 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 생성되고 일반 변수와 마찬가기로 undefined로 초기화된 이후 인수가 순서대로 할당된다.
• 매개변수는 함수 몸체 내부에서만 참조할 수 있고 외부에서는 참조할 수 없다.
• 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않고 인수가 부족해서 할당되지 않은 매개변수의 값은 undefined다.
• 매개변수보다 인수가 더 많은 경우 초과된 인수는 무시되지만 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다.

12.5.2 인수확인

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

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

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

• 따라서 자바스크립트의 경우 함수를 정의할 때 적절한 인수가 전달되었는지 확인할 필요가 있다.

function add(x, y){
  	if(typeof x !== 'number' || typeof y !== 'number'){
    	throw new TypeError('인수는 모두 숫자 값이어야 합니다.');
    }
	return x + y;
}

console.log(add(2)); // TypeError: 인수는 모두 숫자 값이어야 합니다.
console.log(add('a' + 'b')) // TypeError: 인수는 모두 숫자 값이어야 합니다.

• argument 객체를 통해 인수 개수를 확인하거 단축 평가를 사용해 매개변수에 기본값을 할당하는 방법도 있다.

12.5.3 매개변수의 최대 개수

• ECMAScript 사양에서는 매개변수의 최대 개수에 대해 명시적으로 제한하고 있지 않다.
• 매개변수가 많아지면 함수를 호출할 때 전달해야할 인수의 순서를 고려해야하는데 함수의 사용법을 이해하기 어렵게 만들고 실수를 발생시킬 가능성을 높인다.
• 매개변수의 개수나 순서가 변경되면 함수의 호출 방법도 바뀌므로 코드 전체에 영향이가 유지보수성이 나빠진다.
• 이상적인 매개변수 개수는 0개이며 적을수록 좋다.
• 이상적인 함수는 한 가지 일만 해야하며 가급적 작게 만들어야 한다
• 매개변수는 최대 3개 이상을 넘지 않는 것을 권장하며 넘는다면 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리핟,
• 주의할 점은 함수 외부에서 함수 내부로 전달한 객체를 함수 내부에서 변경하면 함수 외부의 객체가 변경되는 부수 효과가 발생한다는 것이다.

12.5.4 반환문

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

1. 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나간다. 따라서 반환문 이후에 다른 문이 존재하면 그 문은 실행되지 않고 무시한다.
2. 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반영한다. 반환값으로 사용할 표현식을 명시적으로 지정하지 않으면 undefined가 반환된다.

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

• 원시 값은 값에 의한 전달, 객체는 참조에 의한 전달 방식으로 동작
• 매개 변수도 함수 몸체 내부에서 변수와 동일하게 취급되므로 타입에 따라 값에 의한 전달, 참조에 의한 전달 방식을 그대로 따른다.

function changeVal(primitive, obj){
	primitive += 100;
    ojb.name = 'Kim';
}

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

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

changeBVal(num, person);
// 원시 값 원본 훼손 x
console.log(num); // 100
// 객체 원본 훼손
console.log(person); // {name: "Kim"};

• 원시 값은 변경 불가능한 값이므로 직접 젼경할 수 없기 때문에 재할당을 통해 원시 값을 새로운 원시 값으로 교체
• 객체는 변경 가능한 값이므로 직접 변경할 수 있기 때문에 재할당 없이 직접 할당된 객체를 변경
• 이러한 함수가 외부 상태를 변경하면 상태 변화 추적이 어려워지고 코드의 가독성을 해치는 원인이 된다.
• 이러한 문제의 해결 방법 중 하나는 객체를 불변 객체로 만들어 사용하는 것
• 객체의 복사본을 새롭게 생성하는 비용은 들지만 객체를 마치 원시 값처럼 변경 불가능하는 값으로 동작하게 만드는 것이다.
• 외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수를 순수 함수라 한다.

12.7 다양한 함수의 형태

12.7.1 즉시 실행 함수

• 함수 정의와 동시에 즉시 호출되는 함수
• 즉시 실행 함수는 단 한 번만 호출되며 다시 호출할 수 없다
• 익명 함수를 사용하는 것이 일반적이다.

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

• 즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있고 인수를 전달할 수도 있다.
• 즉시 실행 함수 내에 코드를 모아 두면 변수나 함수 이름의 충돌을 방지할 수 있다.

12.7.2 재귀 함수

• 함수가 자기 자신을 호출하는 것을 재귀 호출이라 한다.
• 재귀 함수: 재귀 호출을 수행하는 함수
• 반복되는 처리를 위해 사용 예를 들어, 10부터 0까지 출력하는 함수를 구현할 때 사용

function countdown(n){
	if(n < 0) return;
    console.log(n);
    countdown(n-1); // 재귀 호출
}

countdown(10);

• 재귀함수를 사용하면 반복문 없이 구현할 수 있다.
• 함수 이름은 함수 몸체 내부에서만 유효 따라서 함수 내부에서는 함수 이름을 사용해 자기 자신을 호출할 수 있다.
• 함수 외부에서 함수를 호출할 때는 반드시 함수를 가리키는 식별자로 해야한다.
• 재귀 함수는 자신을 무한 재귀 호출 하므로 탈출 조건을 반드시 만들어야 한다
• 탈출 조건이 없으면 함수가 무한 호출되어 스택 오버플로 에러가 발생
• 대부분의 재귀 함수는 for문이나 while 문으로 구현 가능하다.

12.7.3 중첩 함수

• 함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라 한다.
• 중첩 함수를 포함하는 함수는 외부 함수
• 중첩 함수는 외부 함수 내부에서만 호출할 수 있다.
• 중첩 함수는 자신을 포함하는 외부 함수를 돕는 헬퍼 함수의 역할

12.7.4 콜백 함수

function repeat(n, f){
	fon (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

• 함수들은 반복하는 일은 변하지 않고 공통적으로 수행하지만 반복하면서 하는 일의 내용이 다른 경우
• 함수의 일부분만이 다르기 때문에 매번 함수를 새롭게 정의해 한다.
• 이 문제는 함수를 합성하는 것으로 해결
• 함수의 변하지 않는 공통 로직은 미리 정의, 경우에 따라 변경되는 로직은 추상화해서 함수 외부에서 함수 내부로 전달하는 것
• 이처럼 함수의 매개변수를 통해 다른 함수의 내부로 전달 되는 함수를 콜백 함수
• 매개변수를 통해 함수 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.

12.7.5 순수 함수와 비순수 함수

• 함수형 프로그래밍에서는 어떤 외부상태에 의존하지도 않고 변경하지도 않는, 즉 부수 효과가 없는 함수를 순수 함수/ 외부 상태에 의존하거나 외부 상태를 변경하는, 부수효과가 잇는 함수를 비순수 함수라고 한다.
• 순수함수는 동일한 인수가 전될되면 언제나 동일한 값을 반환하는 함수
• 함수의 외부 상태에 의존하는 함수는 외부 상태에 따라 반환 값이 달라진다.
• 외부 상태에는 전역 변수, 서버데이터, 파일, Console, DOM 등이 있다.
• 외부 상태에는 의존하지 않고 함수 내부 상태에만 의존한다 해도 그 내부 상태가 호출될 때마다 변화는 값(예: 현재 시간)이라면 순수 함수가 아니다.
• 순수 함수는 최소 하나 이상의 인수를 전달 받지 않으면 언제나 동일한 값을 반환하므로 상수와 마찬가지이다.
• 순수 함수는 인수를 변경하지 않는 것이 기본이므로 불변성을 유지한다.
• 반대로 함수의 외부 상태에 따라 반환값이 달라지는 함수, 외부 상태에 의존하는 함수를 비순수 함수라 한다.
• 비순수 함수는 외부 상태를 변경하는 부수 효과가 있다.

var count = 0;

// 순수 함수
function increase(n){
	return ++n;
}

// 비순수 함수
function increase(){
	return ++count;
}