12. 함수

1. 함수란?

함수는 자바스크립트에서 가장 중요한 핵심이다.

스코프, 실행 컨택스트, 클로저, 메서드, this, 프로토타입, 모듈화, 생성자 함수에 의한 객체 생성 등이 모두 함수과 관련되어있다.

 

함수는 동작하고자 하는 동작을 미리 만들어둔 기계와 같다.

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

 

함수는 입력을 받아 출력하게 된다.

이때 입력으로 인수를 매개변수로 받게된다.

출력은 반환값을 출력하게 된다.

 

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

위의 사진은 함수 선언의 예시이며, 다양한 방법으로 함수를 선언할 수 있다.

 

함수는 정의한뒤 함수 호출을 통해 함수를 실행하게된다.

함수를 호출하면 코드를 실행하게된다.

이때 반환값(실행 결과)이 있다면 반환하게 된다.

var result = add(2, 5);

// 함수 add에 인수 2와 5를 더하면 반환값으로 7을 반환한다.
console.log(result); // 7

 

 

2. 함수를 사용하는 이유

하나의 동작을 구현하기 위해서는 많은 코드를 작서하는 일이 있다.

그 동작이 공통적으로 여러곳, 반복적으로 사용하게 된다면 작성해야 하는 코드의 양은 많아질 것이다.

함수를 선언하고 재사용한다면 공통된 코드의 작성을 줄일 수 있다.

 

그리고 동작의 수정에 있어 함수 하나만 수정하면 되기 때문에 유지보수성이 좋아진다.

또한 코드 작성시 실수를 줄여 코드의 신뢰성을 높일 수 있다.

마지막으로 동작을 설명하는 이름을 정해 함수 코드의 가독성을 향상시킨다.

 

정리하자면, 여러 코드를 미리 작성한 함수를 이용해 재사용성과 유지보수성, 코드의 신뢰성, 가독성을 높이기 위해 함수를 사용한다.

 

 

3. 함수 리터럴

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

함수는 함수 리터럴로 생성할 수 있다.

함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성된다.

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

함수 이름

• 식별자 네이밍 규칙을 따른다.
• 함수 몸체 내에서만 참조할 수 있는 식별자(중요)
• 기명 함수는 물론 익명 함수로도 사용할 수 있다.

매개변수 목록

• 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분
• 함수를 호출할 때 지정한 인수가 순서대로 할당된다.
• 매개변수는 함수 내부에서 변수와 동일하게 취급되며 식별자 네이밍 규칙을 따른다.

함수 몸체

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

함수 리터럴도 평가되어 값을 생성하며 이는 객체이다. 즉,  함수는 객체다.

함수가 객체라는 것은 자바스크립트의 중요한 특징이다.

 

 

4. 함수 정의

함수 정의란 호출 이전에 인수를 받을 매개변수와 실행 문들, 반환 값을 지정하는 것이다.

함수를 정의하는 방법은 아래의 4가지가 있다.

1. 함수 선언문
2. 함수 표현식
3. Function 생성자 함수
4. 화살표 함수(ES6)

4.1 함수 선언문

함수 선언문은 표현식이 아닌 문이다. 

 

함수 선언문은 함수 리터럴과 같은 형태를 갖고있다.

하지만, 함수 리터럴은 익명함수로 사용할 수 있지만 함수 선언문은 기명 함수로만 사용해야한다.

 

자바스크립트 엔진은 기명 함수 리터럴을 단독으로 사용(피연산자, 값으로 평가되지 않는 경우)하면 함수 선언문으로 해석하고, 함수 리터럴이 값으로 평가되어야 하느 문맥(변수에 할당하거나 피연산자로 사용하는 경우)에는 함수 리터럴 표현식으로 해석한다.

// 기명 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석된다.
function foo() {
  console.log('foo');
}

foo();    // foo

// 함수 리터럴을 피연산자 혹은 값으로 사용하면 함수 리터럴로 해석된다.
(function bar() { console.log('bar'); })
bar();    // ReferenceError: bar is not defined

위의 코드에서 () 그룹 연산자의 피연산자로 사용된 함수 리터럴(bar)은 함수 리터럴 표현식으로 해석된다. 

그룹 연산자의 피연산자는 값으로 평가될 수 있는 표현식이어야 한다.
표현식이 아닌 문인 선언문은 피연산자로 사용할 수 없다.

 

이처럼 기명 함수 리터럴은 코드의 문맥에 따라 함수 선언문 혹은 함수 리터럴 표현식으로 해석된다.

 

그렇다면, 함수 리터럴 표현식으로 해석된 bar는 왜 사용하지 못할까?

그 이유는 함수 리터럴에서 "함수 이름은 함수 몸체 내부에서만 참조할 수 있는 식별자이다."라고 했다.

이는 외부에서 함수 이름을 참조할 수 없기에 함수를 가리키는 식별자가 없기 때문이다.

 

반면 foo의 경우에는 함수 선언문으로 해석 및 정의되었다.

자바스크립트 엔진은 함수 선언문을 해석해 함수 객체를 생성한다.

함수 객체를 가리키는 식별자가 없으면 생성된 함수 객체 참조를 하지 못하니 자바스크립트 엔진은 함수 객체 참조 및 함수 호출을 위해 함수 이름과 동일한 식별자를 암묵적으로 생성하고 거기에 함수 객체를 할당한다.

함수는 함수 이름이 아닌 함수 객체를 가리키는 식별자로 호출한다.

즉, 위의 예시의 foo함수는 함수 이름인 foo가 아닌 암묵적으로 생성된 식별자 foo인 것이다.

 

 

4.2 함수 표현식

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

 

자바스크립트의 함수는 변수에 할당할 수 있고, 프로퍼티 값이 될 수도, 배열의 요소도 될 수 있다.

이처럼 값의 성질을 갖는 객체를 일급 객체라 하며, 자바스크립트의 함수는 일급 객체이다.

 

함수를 변수에 할당해 함수를 정의하는 방식을 함수 표현식이라 한다.

이때, 함수 리터럴을 익명 함수로 사용할 수 있다.

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

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

var multiple = function (x, y){
  return x * y;
}

console.log(multiple(2, 3)); // 6

 

함수 선언문은 함수 이름으로 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당하므로 전체적인 모습은 함수 표현식과 시슷하게 동작하는 것처럼 보인다.
하지만 함수 선언문과 함수 표현식의 동작은 같지 않다.

함수 선언문은 "표현식이 아닌 문"이고 함수 표현식은 "표현식인 문"이다.

 

 

4.3 Function 생성자 함수

자바스크립트에서 기본 제공하는 빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하면 new 연산자 유무와 상관없이 호출하면 함수 객체를 생성해서 반환해준다.

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

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

 

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

클로저를 생성하지 않고, 함수 선언문이나 함수 표현식으로 생성한 함수들과 다르게 동작한다.

var outerVar = "I am from outer!";

var fn = new Function('console.log(outerVar);');

fn(); // 에러: outerVar is not defined

 

 

4.4 화살표 함수

function키워드 대신 화살표 => 를 사용해 간략한 방법으로 함수를 선언할 수 있다.

화살표 함수는 항상 익명 함수로 정의한다.

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

 

화살표 함수는 기존 함수 선언문 또는 함수 표현식을 완전히 대체하기 위해 디자인된 것은 아니다.

화살표 함수는 arguments 객체를 갖지 않아 함수 선언문과 함수 표현식과는 달리 arguments 객체에 접근하지 못한다.

또한, this 바인딩에서 화살표 함수의 this는 외부 스코프를 참조한다. 즉, 객체의 메서드로 사용되어도 객체에 접근하지 못하고 외부 스코프에 접근하는 샘이다.

그리고 화살표 함수는 생성자 함수로 사용할 수 없다.

 

 

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

console.dir(add);  // f 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;
}

함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문에 함수 표현식을 사용하면  호이스팅 이후 TDZ발생하게 된다.

 

 

5. 함수 호출

5.1 매개변수와 인수

함수를 사용하기 위해 외부에서 내부로 값을 전달할때 사용하는 것이 매개변수와 인수 이다.

매개변수(인자)를 통해 인수를 전달한다.

인수는 값으로 평가될 수 있는 표현식이여야 하며, 함수 호출시 인수를 지정하고, 개수와 타입에 제한이 없다.

 

매개변수의 범위는 함수 내부 스코프이며 외부에서 참조할 수 없다.

함수 호출시 암묵적으로 함수 내부에서 매개변수가 생성되고 undefined로 최기화된 이후 인수가 순서대로 할당된다.

 

매개변수의 개수보다 인수의 개수가 적은 경우는 전달 받지 못한 매개변수는 undefined로 남게된다.

반대로 인수가 더 많으면 무시되지만, arguments 객체의 프로퍼티로 보관된다.

 

5.2 인수 확인

인수의 개수가 맞지 않을 수 있고 의도하지 않은 타입의 인수가 올수 있다.

이렇게 되면 함수의 반환값을 예상하기 어려워진다.

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

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

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

 

이러한 문제를 예방하기 위한 몇가지 방법이 있다.

1. 함수 내부에서 typeof를 이용해 타입이 맞는지 확인
2. 단축 평가를 사용해 인수가 없더라도 매개변수 기본값을 할당
3. ES6 이후 도입된 매개변수 기본값 지정(ex. function add ( a = 0, b = 0, c = 0 )...)
4. 걍 타입스크립트를 이용ㅎr.......zㅏ......

5.3 매개변수의 최대 개수

책에서는 최대 3개를 권장한다.

매개변수의 개수가 많아지면 코드 전체의 유지보수성이 나빠지고, 가독성이 낮아지고, 개발자의 실수가 생길 수 있다 말한다.

 

매개 변수가 많다는 것은 함수가 여러 가지 일을 한다는 증거이다.

이상적인 함수는 한 가지 일만 해야 하며 가급적 작게 만들어야 한다.

 

5.4 반환문

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

 

함수 호출은 표현식이라 평과 결과 반환값으로 변수, 피연산자로 사용할 수 있다.

function foo() {
  return 'Hi';
}

var hi = foo();
console.log(hi); // Hi

 

반환문은 두가지 역활을 한다.

1. 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나간다.
   이후 작성한 코드는 실행되지 않고 무시된다.
2. 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환한다.
   명시적으로 지정하지 않으면 undefined가 반환된다.

반환문은 함수 몸체 내부에서만 사용할 수 있다.
HTML의 script 태그에 사용하면 문법 오류를 볼 수 있을 것이다.

 

 

 

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

원시 값은 값에 의한 전달, 객체는 참조에 의한 전달 방식으로 동작한다.

매개변수는 함수에서 변수 취급을 받기에 타입에 따라 값 혹은 참조에 의한 전달 방식을 따르게 된다.

fucntion changeVal(primitive, obj) {
  primitive += 10;
  obj.name = 'Oh';
}

var num = 100;
var person = {
  name: 'Kim',
}

changeVal(num, person);

console.log(num);    // 100
console.log(person); // {name: 'Oh'}

위의 코드에서 원시 값인 num과 객체 타입인 person이 각각 매개변수 primitive, obj에 전달되었다.

함수내부에서 매개변수를 변경할 때 num의 값은 그대로이지만 person의 값은 변했다.

이유는 아래와 같다.

 

원시 타입 인수는 값 자체가 복사되어 매개변수에 전달되어 함수 몸체에서 그 값을 변경(재할당을 이용한 교체)해도 원본이 훼손 되지 않는다. ➡ 외부 상태(원본)를 변경하는 부수 효과가 발생하지 않는다.

 

하지만 객체 타입 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 참조 값을 통해 객체 변경을 할 경우 원본이 훼손된다. ➡ 외부 상태(원본)를 변경하는 부수 효과가 발생한다.

함수 매개변수에 적용되는 값에 의한 호출과 참조에 의한 호출의 차이

외부 상태를 변화시키는 부수 효과를 발생시키는 함수는 코드의 복잡성을 증가시키고, 가독성을 해치게 된다.

 

이러한 부수 효과는 객체가 변경할 수 있는 값이며, 참조에 의한 저달 방식으로 동작하기 때문이다.

책에서는 이런 문제를 방지하기 위해 두가지 방법을 제시한다.

1. 옵저버 패턴
   객체를 참조를 공유하는 모든 이들에게 변경 사실을 통지하고 이에 대처하는 추가 대응을 적용
2. 깊은 복사를 통해 새로운 객체를 생성하고 재할당을 통해 교체한다.

 

반면, 부수효과를 발생시키지 않고 외부 상태에 의존하지도 않는 함수를 순수 함수라 한다.

순수 함수를 통해 부수 효과를 최대한 제거해 오류를 피하고 프로그램의 안정성을 높이려는 프로그래밍 패러타임을 함수형 프로그래밍이라 한다.

 

 

7. 다양한 함수의 형태

7.1 즉시 실행 함수 IIFE

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

단 한 번만 호출되며 다시 호출할 수 없다. 또한 반드시 그룹 연산자(...)로 감싸야 한다.

그룹 연산자로 함수를 묶는 이유는 함수 리터럴을 평가해 함수 객체를 생성하기 위함이다.

 

익명 함수로 사용하는 것이 일반적이며 기명 함수로도 사용할 수 있지만 그룹 연산자(...)를 사용하기 때문에 피연산자가 되며 함수 리터럴로 평가되며 함수 이름은 함수 내부에서만 사용할 수있는 식별자 이므로 다시 호출 할 수 없다. 

// 왠만해서는 첫 번째 유형을 사용하자
(function () {
  ...
}());

(function () {
  ...
})();

!function () {
  ...
}();

+function () {
  ...
}();

즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있고 인수를 전달할 수 있다.

 

 

7.2 재귀 함수

함수가 자기 자신을 호출하는 것을 재귀 호출이라 하며 재귀 함수는 재귀 호출을 수행하는 함수를 말한다.

재귀 함수는 재귀 호출을 멈출 수 있는 탈출 조건을 필수로 만들어야 한다.(안그러면 무한히 재귀 호출하게 된다...)

또한, for문이나 while문으로도 재귀 함수를 정의할 수 있지만 재귀함수를 사용하는 것이 직관적이고 이해하기 쉬울때 사용하면 좋다.

// 함수 표현식으로 작성했지만 함수 선언문으로도 사용할 수 있다.
var factorial = function foo(n){
  if(n <= 1) return 1;
  return n * factorial(n-1);
}

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

 

 

7.3 중첩 함수

함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라 하며, 중첩 함수를 포함하는 함수를 외부 함수라 한다.

중첩 함수는 외부 함수 내부에서만 호출할 수 있다.

클로저와 깊은 관련이 있는 개념이다.

 

ES6 이후 부터 함수 정의는 문이 위치할 수 있는 문맥이라면 어디든 가능하다.

if 문이나 for 문 등의 코드 블록 내에서도 정의할 수 있다.

단, 호이스팅으로 인해 혼란스러울 수 있으니 되도록이면 if문이나 for문 안에는 사용하지 말자.

function outer() {
  ...
  function inner() {
    ...
  }
}

 

 

7.4 콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라 하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수라 한다.

 

콜백 함수를 전달받은 고차 함수는 자신의 일부분으로 합성한다.

고차 함수는 콜백 함수의 호출 시점을 결정해서 호출한다.

다시 말해, 콜백 함수는 고차 함수에 의해 호출되며 고차함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

 

주로 변경될 수 있는 동작을 구현하기 위한 함수를 추상화할 때 사용된다.

이를 통해 사소한 변경을 함수 자체를 수정하는 대신 콜백 전달시 수정하면 되는 장점을 얻게 된다.

 

콜백함수는 익명/기명 함수로 전달이 가능하다.

상황에 맞게 이미 정의된 함수를 사용하던가 아니면 바로 전달하는 형태를 사용하자

(자주 호출되는 함수라면 미리 정의하는것이 재사용성 측면에서 좋다)

function repeat(n, f){
  for(var i = 0; i < n; i++){
    f(i);
  }
}

repeat(5, (i) => console.log(i)); // 0 1 2 3 4

var logOdds = function(i) {
  if(i % 2) console.log(i);
}

repeat(5, logOdds);              // 1 3

 

 

7.5 순수 함수와 비순수 함수

순수 함수는 어떠한 외부 상태에 의존하지 않고 외부 상태를 변경하지도 않는 함수이다.

즉, 부수 효과가 없는 함수를 순수 함수라 말한다.

 

순수 함수의 특징은 다음과 같다.

외부 상태에 의존하지 않고 매개변수로 전달된 인수에만 의존해 값을 생성한다.

전역 변수, 서버 데이터, 파일, Console, DOM 등이 외부 상태의 종류이다.

 

 

반면 비순수 함수란 외부 상태에 의존하거나 외부 상태를 변경하는 함수를 말한다.

즉, 외부 상태에 따라 반환 값이 변하는 함수인 것이다.

전역 변수, 서버 데이터, 파일, Console, DOM 등이 외부 상태의 종류이다.

var count = 0;

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

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

console.log(pure(2));   // 4
console.log(notPure()); // 1

 

함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최소화해서 불변성을 자향하는 프로그래밍 패러다임이다.

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

자바스크립트는 멀티 패러다임 언어이므로 객체지향 프로그램밍 뿐만아니라 함수형 프로그래밍을 적극적으로 활용하고 있다.