함수는 JavaScript의 핵심 개념이다.

사실 함수가 중요한 것을 모르는 사람은 없을 것 같다.

code를 재사용해서 실행 효율을 높이고, 유지보수가 쉬워지고, 편의성과 신뢰성이 높아진다.

본격적으로 함수에 대해 알아보자.

---

함수

여느 언어에서나 함수는, 입력값을 받아 출력값을 반환하는 매커니즘을 따른다.

JavaScript에서도 예외는 없는데,
입력값인 argument를 변수 parameter로 받아서, 출력값인 return value를 반환한다.

// (x, y) : parameter
function add (x, y) {			// 정의
  	return x + y; // x + y : return value
}
...
add (1, 3);	// 1, 3 : argument	// 호출

간단한 함수의 형태는 알았으니,

함수를 생성하고 사용하는 방법에 대해 더 알아보자.

---

함수 생성

함수 리터럴

JavaScript의 함수는, 객체다.

하지만 이를 호출할 수 있다는 점에서 일반 객체와의 차이가 있다.

다음은 함수 리터럴의 구성요소들을 정리한 표다.

구성요소	설명
함수 이름	1. 함수 이름: 식별자 (네이밍 규칙 준수해야함)
	2. 함수 이름 : body 내에서만 참조 가능
	3. 함수 이름 : 생략 가능 : 무명/익명 함수라고 함
매개변수 목록	0개 이상의 매개변수, ()로 감싸고 ,로 구분
	함수 호출시 순서대로 인수 할당.
	매개변수 : body 내에서 변수와 동일한 취급 (네이밍 규칙 준수)
body	함수 호출시 실행문들을 정의해둔 하나의 code block
	함수 호출에 의해 실행됨

함수 정의

함수를 호출하고 사용하기에 앞서, 우선 함수 정의를 해야한다.

함수를 정의하는 방법은 네가지가 있다.

1. 함수 선언문

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

우리가 함수의 개념에서 살펴본 바로 그 방식이다.

이는 함수 리터럴과 동일한 형태이지만, 함수 선언문에서는 함수 이름을 생략할 수 없다.


함수 선언문은, 표현식이 아닌 "문"이라는 걸 기억하자.
(console에서 이를 실햄하면 완료값 undefined가 출력된다.)

때문에 함수 선언문은 변수에 할당할 수 없다.


JavaScript는 생성된 함수를 호출하기 위해, 함수 이름과 동일한 식별자를 암묵적으로 생성한다.

그리고 해당 식별자에 함수 객체를 할당하고,
함수를 호출할 때는 함수 이름이 아닌, 함수 객체를 가리키는 식별자로 호출한다.

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

JavaScript 엔진은, 함수 선언문을 이와같이 변환해 함수 객체를 생성한다는 것이다.

그런데 바로 아래의 함수 표현식을 보면,,,,, 똑같이 생겼다.

그러니까 JavaScript 엔진은, 함수 선언문을 함수 표현식으로 변환해 함수 객체를 생성한다.
(선언문과 표현식이 정확히 동일하게 동작하는 것은 아니다.)

2. 함수 표현식

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

JavaScript의 함수는 값이 될 수도 있고, 배열의 요소가 될 수도 있다.

이렇게 값의 성질을 갖는 객체를 일급 객체 라고 부른다.
(JavaScript 함수는 일급 객체다.)

-> 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있고, 이런 정의 방식을 함수 표현식이라고 한다.

함수 표현식의 함수 리터럴에서는, 함수 이름을 대부분 생략한다.

함수 선언문과 함수 표현식에 차이가 없는 듯 하지만,,,

선언문은 '표현식이 아닌 문'이고 표현식은 '표현식인 문'이라는 점에서 차이가 있음을 기억하자.

3. Function 생성자 함수

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

사실 이 방식은, 일반적이지도 바람직하지도 않은 방식이라고 한다.

선언문, 표현식으로 정의한 함수와는 차이점이 있다.

그러나 아직 살펴보지 않는 부분에서 차이점이 있으니, 지금은 그냥 차이점이 있다는 정도만 알아두자.

4. 화살표 함수 (ES6)

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

function 키워드 대신 => 를 사용한다.

좀 더 간략한 방법이다.

생긴 것만 간략한 게 아니고, 동작도 간략화 되어있다고 한다!

---

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

함수 선언문으로 정의한 함수는, 선언문 이전에 호출이 가능하다.

하지만 함수 표현식으로 정의한 함수는, 표현식 이전에 호출이 불가능하다.

이런 차이가 생기는 이유가 뭘까?


두 함수의 생성 시점이 다르기 때문이다.


앞서 변수에 대해 살펴볼 때, JavaScript의 모든 선언은 runtime 이전에 먼저 실행된다고 했다.

함수 선언문도 예외는 없다. 함수 선언문으로 정의한 함수는, 그 객체가 runtime 이전에 먼저 생성된다.

그러니까 함수 선언문으로 정의하면, 함수 호이스팅이라는 특성을 가진다.


하지만 함수 표현식으로 함수를 정의하면, 함수 호이스팅이 아닌 변수 호이스팅이 발생한다.

때문에 표현식 이전에 함수를 참조하면 undefined로 평가된다.

함수 표현식으로 함수를 정의한다면, 반드시 표현식 이후에 함수를 참조하도록 하자.

(JavaScript의 함수 선언문이 가지는 함수 호이스팅을 피하기 위해,
함수 표현식으로 정의하는 것이 권장된다고 한다.)

---

함수 호출

add = (x, y);

함수 호출에서는 직전에 살펴본 함수 생성시점과 호이스팅이라는 특성을 잘 고려하는 것이 중요하다.

매개변수의 개수는 어느정도가 좋을까?

함수는 한 가지 일을 하도록, 가능한 가장 작게 만드는 것이 이상적이다.

이상적인 매개변수의 개수는 0개이나, 개발자들은 주로 2개, 많으면 3개까지의 매개변수를 사용한다고 한다.

---

다양한 함수

즉시 실행 함수 IIFE

Imediately Invoked function expression

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

주로 익명 함수를 사용한다.

물론 이름을 붙일 수도 있지만,, 즉시 실행하는 것이 목적인 함수이기 때문인듯하다.

즉시 실행 함수는 항상 그룹연산자인 ()로 감싸주도록 하자.
(그러지 않으면 error가 발생한다..)

재귀 함수

recursive function

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

자기 자신을 무한 호출하는 함수이다.

때문에 조건을 만족하면 탈출할 수 있도록, 탈출 조건을 만들어줘야 한다.

하지만 무한 호출에 빠질 위험성 때문에,,, 꼭 필요할때만 사용하도록 하자.

중첩 함수

nested/inner function

function outer() {
	let x = 1;
  
  function inner() {
    let y = 3;
    console.log(x + y);
  }
  inner();
}

함수 내부에 정의된 함수를 말한다.

사실 이렇게 함수 선언문으로 중첩 함수를 만드는 것은, 함수 호이스팅 문제로 바람직하지 않다고 한다.

나중에 살펴볼 스코프와 클로저에 깊은 관련이 있다고 한다.

콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수라고 부른다.

repeat (5, function(i) {
  	if (i % 2) 
      console.log(i);
});

순수/비순수 함수

외부 상태에 의존하거나, 변경하지도 않는 함수를 pure function이라고 하고,
그 반대를 impure function이라고 한다.

pure func의 경우, 동일 입력값이 들어오면 언제나 동일한 값을 반환한다.

impure func의 경우는 그렇지 않다.

이를 부수효과가 많은 함수라고 하는데, 함수의 외부 상태를 변경하는 것을 말한다.

즉, impure func는 외부 상태에 의존하거나 외부 상태를 변경하는 함수이다.

---

다른 개념보다 알아야 할 것도 많고,, 어렵진 않았지만 내용이 많아서 압도적이었다.

중요한 JavaScript 개념을 하나씩 알아가는 것 같다.

앞으로도 대충대충 공부하지 않고 꼼꼼하게 알아봐야겠다.