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

12.1 함수란?

• 일련의 과정을 문으로 구현하고 코드 블록으로 감싸 하나의 실행 단위로 정의한 것
• 용어
  • 매개변수(parameter): 함수 내부로 입력을 전달받는 변수
  • 인수(argument): 입력
  • 반환값(return value): 출력
  • 함수 정의: 함수의 생성
  • 함수 호출: 매개변수를 통해 인수를 함수에 전달하면서 함수의 실행을 명시적으로 지시

12.2 함수를 사용하는 이유

• 코드의 재사용
  • 동일한 작업을 반복적으로 수행 가능하기 때문
• 유지보수의 편의성과 코드의 신뢰성
  • 코드의 중복을 억제하고 재사용성을 높이기 때문
• 코드의 가독성
  • 함수는 객체 타입의 값이므로 식별자를 붙일 수 있기 때문에 적절한 함수 이름을 통해 함수의 역할을 나타낼 수 있기 때문

12.3 함수 리터럴

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

• 함수는 객체 타입의 값이므로 함수 리터럴로 생성 가능
• 일반 객체는 호출할 수 없지만 함수는 호출 가능
• function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성

구성요소

• 함수 이름
  • 식별자이므로 네이밍 규칙을 준수해야 한다.
  • 함수 몸체 내에서만 참조할 수 있다.
  • 생략하는 경우 무명/익명 함수(anonymous function), 이름이 있는 경우 기명 함수(named function)라 한다.
• 매개변수 목록
  • 0개 이상을 쉼표로 구분한다.
  • 함수 호출시 지정한 인수가 순서대로 할당된다.
  • 매개변수는 함수 몸체 내에서 변수와 동일하게 취급되므로 네이밍 규칙을 준수해야 한다.
• 함수 몸체
  • 호출시 일괄적으로 실행될 문을 하나의 실행 단위로 정의한 코드 블록이다.
  • 함수 호출에 의해 실행된다.

12.4 함수 정의

변수는 선언(declaration)하고 함수는 정의(definition)한다.

12.4.1 함수 선언문

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

// 함수 참조
// console.dir은 console.log와는 달리 함수 객체의 프로퍼티까지 출력한다.
// 단, Node.js 환경에서는 console.log와 같은 결과가 출력된다.
console.dir(add); // ƒ add(x, y)

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

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

자바스크립트 엔진의 함수 선언문 해석

함수 선언문은 표현식이 아닌 문이기 때문에 변수에 할당 불가하지만 가능한 것 처럼 보인다.

// 함수 선언문은 표현식이 아닌 문이므로 변수에 할당할 수 없다.
// 하지만 함수 선언문이 변수에 할당되는 것처럼 보인다.
var add = function add(x, y) {
  return x + y;
};

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

이는 자바스크립트 엔진이 문맥에 따라서 다음 두 경우로 해석할 수 있기 때문이다.

1. 표현식이 아닌 문인 함수 선언문으로 해석
   1. 피연산자로 사용하지 않는 경우
2. 표현식인 문인 함수 리터럴 표현식으로 해석
   • 함수 리터럴을 변수에 할당하거나 피연산자로 사용하는 경우

따라서 기명 함수 리터럴은 함수 선언문 또는 함수 리터럴 표현식으로 해석될 수 있다.

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

// 함수 리터럴을 피연산자로 사용하면 함수 선언문이 아니라 함수 리터럴 표현식으로 해석된다.
// 함수 리터럴에서는 함수 이름을 생략할 수 있다.
(function bar() {
  console.log("bar");
});
bar(); // ReferenceError: bar is not defined

• 함수 리터럴에서 함수 이름은 함수 몸체 내에서만 참조할 수 있기 때문에 외부에서 함수 이름으로 함수를 호출할 수 없다.
• 함수 선언문에서 자바스크립트는 함수 호출을 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.
  • 함수는 함수 이름이 아닌 함수 객체를 가리키는 식별자로 호출한다.

12.4.2 함수 표현식

• 함수 리터럴로 생성한 함수 객체를 변수에 할당하는 함수 정의 방식
  • 자바스크립트의 함수는 일급 객체이기 때문에 변수에 함수 객체를 할당 가능
    • 일급 객체: 값의 성질을 갖는 객체
• 함수 표현식의 함수 리터럴은 일반적으로 함수 이름 생략
  • 함수 리터럴은 함수 이름을 생략할 수 있다.
• 함수 호출시 함수 객체를 가리키는 식별자를 사용

  // 기명 함수 표현식
  var add = function foo(x, y) {
    return x + y;
  };
  
  // 함수 객체를 가리키는 식별자로 호출
  console.log(add(2, 5)); // 7
  
  // 함수 이름으로 호출하면 ReferenceError가 발생한다.
  // 함수 이름은 함수 몸체 내부에서만 유효한 식별자다.
  console.log(foo(2, 5)); // ReferenceError: foo is not defined
  

  • 함수 이름은 함수 몸체 내부에서만 유효한 식별자
• 표현식인 문

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

함수 호이스팅

• 함수 선언문으로 정의된 함수는 런타임 이전에 함수 객체가 먼저 생성
  • 이후 자바스크립트 엔진이 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 함수 객체 할당
• 함수 선언문 이전에 함수 참조/호출 가능

변수 호이스팅과의 차이점

• var 키워드로 선언된 변수는 undefined로 초기화
  • 변수 선언문 이전에 참조하면 undefined로 평가
• 함수 선언문을 통해 암묵적으로 생성된 식별자는 함수 객체로 초기화
  • 함수 선언문 이전에 호출하면 함수를 호출 가능

함수 표현식의 호이스팅

• 변수 호이스팅 발생
  • 변수 할당문의 값이 런타임에 평가되는 것 처럼 함수 리터럴도 실행되는 시점에 평가되어 함수 객체가 된다.
• 함수 리터럴을 변수에 할당하는 문이기 때문에 변수 선언문과 동일하게 동작
• 함수 표현식 이전에 함수를 참조하면 undefined로 평가
• 함수 표현식 이전에 함수를 호출하면 undefined를 호출하는 것이므로 TypeError 발생

권장 사항

함수 호이스팅을 피하고자 함수 선언문 대신 함수 표현식의 사용을 권장한다.

12.4.4 Function 생성자 함수

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

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

• 빌트인 함수인 Function 생성자 함수 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해 반환
  • new 연산자는 생략 가능하다.
• Function 생성자 함수를 통해 함수를 생성하는 건 일반적이지도, 바람직하지도 않다.
  • 클로저를 생성하지 않는 등 함수 선언문이나 함수 표현식과 다르게 동작하는 부분이 있다.

12.4.5 화살표 함수

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

• ES6에서 도입
• function 키워드 대신 화살표 사용
• 항상 익명 함수로 정의
• 표현과 내부 동작이 간략화 됨
  • 생성자 함수로 사용 불가
  • this 바인딩 방식에 차이점 존재
  • prototype 프로퍼티 없음
  • arguments 객체를 생성하지 않음

12.5 함수 호출

• 식별자와 함수 호출 연산자로 호출
  • 함수 호출 연산자: 한 쌍의 소괄호 내부에 0개 이상의 인수를 쉼표로 구분해 나열
• 함수 호출시 실행 흐름을 중단하고 함수로 실행 흐름을 옮긴다.
  • 매개변수에 인수가 순서대로 할당되고 함수 몸체의 문이 실행

12.5.1 매개변수와 인수

• 함수 외부에서 함수 내부로 값을 전달하기 위해, 매개변수(인자)를 통해 인수를 전달

인수

• 값으로 평가될 수 있는 표현식
• 함수롤 호출할 때 지정
• 개수와 타입에 제한 없음

매개변수

• 함수를 정의할 때 선언
• 함수 몸체 내부에서 변수와 동일하게 취급
  • undefined로 초기화된 뒤 인수가 순서대로 할당된다.
• 스코프(유효 범위)는 함수 내부
  • 함수 몸체 내부에서만 참조할 수 있다.
• 매개변수의 수와 인수의 수가 일치하지 않아도 오류가 발생하지 않음
  • 인수가 부족해서 할당되지 않은 매개변수의 값은 undefined다.

    function add(x, y) {
      return x + y;
    }
    
    console.log(add(2)); // NaN
    

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

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

12.5.2 인수 확인

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

따라서 함수 정의시 적절한 인수가 전달되었는지 확인해야 한다.

매개변수 기본값

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

• ES6에서 도입
• 매개변수에 인수를 전달하지 않았거나 undefined를 전달한 경우에만 유효

12.5.3 매개변수의 최대 개수

• 매개변수는 코드를 이해하는데 방해되므로 0개가 이상적이다.
  • 최대 3개 이상을 넘지 않는 것을 권장한다.
• 이상적인 함수는 한 가지 일만 해야 하며 가급적 작게 만들어야 한다.
• 여러 개의 매개변수가 필요하면 하나의 매개변수를 선언하고 객체를 인수로 전달하는 것이 좋다.

  $.ajax({
    method: "POST",
    url: "/user",
    data: { id: 1, name: "Lee" },
    cache: false,
  });
  

  • 매개변수의 순서를 신경쓰지 않아도 된다.
  • 프로퍼티 키는 명시적으로 인수의 의미를 설명하므로 가독성이 좋아진다.
  • 함수 내부에서 객체를 변경하면 함수 외부의 객체도 변경되는 부수 효과가 발생하므로 주의해야 한다.

12.5.4 반환문

• return 키워드와 표현식으로 이루어진 반환문을 사용
• 함수 호출은 표현식
  • return 키워드가 반환한 표현식의 평가 결과로 평가된다.
• return 키워드 뒤에 반환값을 명시적으로 지정하지 않으면 undefined 반환

  function foo() {
    return;
  }
  
  console.log(foo()); // undefined
  

• 반환문은 생략 가능

  function foo() {
    // 반환문을 생략하면 암묵적으로 undefined가 반환된다.
  }
  
  console.log(foo()); // undefined
  

• return 키워드와 표현식 사이 줄바꿈이 있으면 사이에 세미콜론이 추가되므로 주의해야 한다.

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

• 함수 몸체 내부에서만 사용할 수 있다.

  <!DOCTYPE html>
  <html>
    <body>
      <script>
        return; // SyntaxError: Illegal return statement
      </script>
    </body>
  </html>
  

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

매개변수도 타입에 따라 값에 의한 전달, 참조에 의한 전달 방식을 그대로 따른다.

// 매개변수 primitive는 원시값을 전달받고, 매개변수 obj는 객체를 전달받는다.
function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = "Kim";
}

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

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

// 원시값은 값 자체가 복사되어 전달되고 객체는 참조값이 복사되어 전달된다.
changeVal(num, person);

// 원시값은 원본이 훼손되지 않는다.
console.log(num); // 100

// 객체는 원본이 훼손된다.
console.log(person); // {name: "Kim"}

• 의도치 않게 객체를 변경 가능해 부작용이 발생할 수 있다.
  • 이를 추적하기 위해 옵저버 패턴 등을 통해 객체를 참조하는 모든 이에게 변경 사실을 통지하고 대처하는 추가 대응이 필요하다.
    • 옵저버 패턴: 객체의 상태 변화를 관찰하는 관찰자들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴
  • 객체를 불변 객체로 만들 수도 있다.
    • 객체의 방어적 복사(defensive copy)를 통해 원본 객체를 깊은 복사하여 새로운 객체 생성
• 함수형 프로그래밍
  • 순수 함수를 이용해 부수 효과를 최대한 억제하여 안정성을 높이는 프로그래밍 패러다임
    • 순수 함수: 외부 상태를 변경하지도, 외부 상태에 의존하지도 않는 함수

12.7 다양한 함수의 형태

12.7.1 즉시 실행 함수

// 익명 즉시 실행 함수
(function () {
  var a = 3;
  var b = 5;
  return a * b;
})();

• IIFE, Immediately Invoked Function Expression
• 함수 정의와 동시에 즉시 호출되며 다시 호출할 수 없다.
• 익명 함수를 사용하는 것이 일반적이다.
• 기명 즉시 실행 함수도 가능하다.

  // 기명 즉시 실행 함수
  (function foo() {
    var a = 3;
    var b = 5;
    return a * b;
  })();
  
  foo(); // ReferenceError: foo is not defined
  

  • 기명 즉시 실행 함수 내의 기명 함수는 함수 선언문이 아닌 함수 리터럴로 평가된다.
  • 따라서 함수 이름은 함수 몸체에서만 참조할 수 있다.
  • 따라서 즉시 실행 함수를 다시 호출할 수 없다.
• 값을 반환할 수 있고 인수를 전달할 수도 있다.

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

• 반드시 그룹 연산자 (...)로 감싸야 한다.

  1. 그룹 연산자로 감싸지 않은 무명 즉시 실행 함수의 오류

     function () { // SyntaxError: Function statements require a function name
       // ...
     }();
     

     • 함수 선언문은 이름을 생략할 수 없어 오류 발생

  2. 그룹 연산자로 감싸지 않은 기명 즉시 실행 함수의 오류

     function foo() {
       // ...
     }(); // SyntaxError: Unexpected token ')'
     

     • 세미콜론 자동 삽입 기능에 의해 코드 블록의 닫는 중괄호 뒤에 ;이 암묵적으로 추가
     • 따라서 함수 선언문 뒤 함수 호출 연산자 괄호 (...)가 그룹 연산자로 해석되고, 그룹 연산자에 피연산자가 없어 에러 발생
• 그룹 연산자의 피연산자는 값으로 평가된다.
• 따라서 함수를 그룹 연산자로 감싸면 함수 리터럴로 평가되어 함수 객체를 생성한다.
• 다른 방법

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

12.7.2 재귀 함수

• 함수가 자기 자신을 호출
• 함수 이름은 함수 몸체 내부에서만 유효하기 때문에 자기 자신을 호출 가능
  • 함수를 가리키는 식별자로도 재귀 호출 가능하다.

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

• 무한 재귀 호출을 멈추는 탈출 조건이 필요
  • 탈출 조건이 없으면 스택 오버플로 에러 발생

12.7.3 중첩 함수

function outer() {
  var x = 1;

  // 중첩 함수
  function inner() {
    var y = 2;
    // 외부 함수의 변수를 참조할 수 있다.
    console.log(x + y); // 3
  }

  inner();
}

outer();

• 함수 내부에 정의된 함수
  • 중첩 함수를 포함하는 함수를 외부 함수라 한다.
• 외부 함수 내부에서만 호출 가능
• ES6부터 if문이나 for문의 코드 블록 내부 등 문이 위치할 수 있는 문맥이라면 어디서든 함수를 정의 가능
  • 호이스팅이 생기므로 바람직하지는 않다.

12.7.4 콜백 함수

// 외부에서 전달받은 f를 n만큼 반복 호출한다
function repeat(n, f) {
  for (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

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
  • 자바스크립트의 함수는 일급 객체이므로, 함수의 매개변수로 통해 함수를 전달할 수 있다.
• 고차 함수(HOF, Higher-Order Function)
  • 함수형 프로프래밍 패러다임에서 매개변수를 통해 함수를 전달받거나 반환값으로 함수를 반환하는 함수를 지칭
  • 매개변수를 통해 콜백 함수를 전달받은 함수
  • 콜백 함수를 자신의 일부분으로 합성
• 콜백 함수는 고차 함수에 의해 호출되며 필요에 따라 콜백 함수에 인수를 전달한다.
• 콜백 함수를 익명 함수 리터럴로 정의하며 곧바로 전달할 수 있다.

  // 익명 함수 리터럴을 콜백 함수로 고차 함수에 전달한다.
  // 익명 함수 리터럴은 repeat 함수를 호출할 때마다 평가되어 함수 객체를 생성한다.
  repeat(5, function (i) {
    if (i % 2) console.log(i);
  }); // 1 3
  

  • 고차 함수가 호출될 때마다 콜백 함수가 생성된다.
• 비동기 처리와 배열 고차 함수에서 유용하게 사용된다.

12.7.5 순수 함수와 비순수 함수

• 함수형 프로그래밍에서 어떤 외부 상태에 의존하지도 않고, 외부 상태를 변경하지도 않는, 즉 부수 효과가 없는 함수
• 동일한 인수가 전달되면 언제나 동일한 값을 반환
• 일반적으로 하나 이상의 인수를 전달 받음
  • 인수가 없는 순수 함수는 상수와 마찬가지라서 의미가 없다.
  • 순수 함수는 기본적으로 인수를 변경하지 않음
• 비순수 함수는 부수 효과로 인해 상태 변화 추적을 어렵게 하므로 순수 함수를 사용하는 것이 좋다.

함수형 프로그래밍

• 순수 함수와 보조 함수의 조합을 통해 부수 효과를 최소화해 불변성을 지향하는 프로그래밍 패러다임
  • 따라서 프로그램의 안정성을 높일 수 있다.
• 조건문과 반복문을 제거해 복잡성을 해결하고자 함
  • 조건문과 반복문은 로직 흐름의 이해가 어려워 가독성을 해친다.
• 변수 사용을 억제하거나 생명주기를 최소화해 상태 변경을 피해 오류를 줄이고자 함
  • 변수는 변경될 수 있으므로 오류를 발생시킬 수 있다.