[모던 JS Deep Dive] 12장 - 함수

12.1 함수란?

 - 함수: 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것

 - 인수, 매개변수, 리턴값

 - 함수 정의

 - 함수 호출 (function call/invoke)

12.2 함수를 사용하는 이유

 - 함수는 필요할 때 여러 번 호출 가능 => 실행 시점을 개발자가 결정 가능

 - 코드의 재사용성 (중복 코드 제거)

 - 유지보수의 편의성

 - 코드의 신뢰성

 - 함수 네이밍 중요성; 자신의 역할 잘 설명 가능한 함수 이름 => 코드의 가독성 향상

 - 코드는 단순히 동작하는 것이 목적이 아니라 개발자를 위한 문서이므로 이해 가능한 코드여야 함

 - 가독성이 좋은 코드가 좋은 코드임

12.3 함수 리터럴

 - JS에서 함수는 객체 타입의 값 => 함수도 함수 리터럴로 생성 가능

 - 함수 리터럴

   - 함수 이름; 식별자, 네이밍 규칙 준수, 함수 몸체 내에서만 참조 가능한 식별자, 함수 이름 생략 가능 (익명 함수)

     - 함수 몸체 내에서만 참조 가능한 식별자: 함수를 가리키는 식별자가 따로 없음

   - 매개변수 목록; 순서 의미 있음, 함수 몸체 내에서 변수와 동일하게 취급, 매개변수도 식별자 네이밍 규칙 준수

   - 함수 몸체; 함수 호출 시 일괄적으로 실행될 문을 하나의 실행 단위로 정의한 코드 블록

 - 리터럴: 사람이 이해할 수 있는 문자/약속된 기호를 사용해 값을 생성하는 표기 방식 (값 생성 위한 표기법)

 - 함수 리터럴도 평가되어 값(객체) 생성 => 함수는 객체임

 - 일반 객체는 호출할 수 없지만 함수는 호출 가능한 객체

 - 일반 객체에는 없는 함수 객체만의 고유한 프로퍼티 가짐

12.4 함수 정의

 - 정의된 함수는 JS 엔진에 의해 평가되어 함수 객체가 됨

 - 함수 정의 방식

   - 함수 선언문

     - 함수 리터럴은 함수 이름 생략 가능, 함수 선언문은 함수 이름 생략 불가

     - 함수 선언문은 표현식이 아닌 문 => 크롬 개발자 도구 콘솔에서 완료 값 undefined 출력

     - 변수에 할당 불가

     - 동일한 코드도 코드의 문맥에 따라 해석이 달라질 수 있음

     - 함수 선언문, 함수 표현식 => 함수 객체 생성은 동일, 함수 생성 내부 동작에 차이 존재 (호출 차이)

       - 함수 선언문으로 생성된 함수는 호출 가능

       - 함수 리터럴 표현식으로 생성된 함수는 호출 불가

     - JS 엔진이 암묵적으로 함수 이름과 동일한 함수 객체를 가리키는 식별자 생성하고 거기에 함수 객체 할당 (주소)

     - 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출

   - 함수 표현식

     - 그룹 연산자 ( ) 내에 있는 함수 리터럴은 함수 선언문이 아니라 함수 표현식으로 해석됨

       - 그룹 연산자의 피연산자는 값으로 평가될 수 있는 표현식이어야 함

     - JS에서 함수는 값처럼 변수에 할당 가능, 프로퍼티의 값이 될 수도 있음, 배열의 요소가 될 수도 있음

     - 값의 성질을 갖는 객체 => 일급 객체 (JS에서 함수는 일급 객체이다, 함수를 값처럼 자유롭게 사용 가능)

     - 함수 이름 생략하는 것이 일반적임 (익명/무명 함수)

       - 기명함수도 있긴 함

     - 함수 이름은 함수 몸체 내부에서만 유효한 식별자

     - 함수 선언문은 '표현식이 아닌 문'이고 함수 표현식은 '표현식인 문'

   - Function 생성자 함수

     - Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달

     - new 연산자로 호출 => 함수 객체 생성해서 반환

       - new 연산자 없이 호출해도 결과 동일

     - 생성자 함수: 객체를 생성하는 함수

     - 권장 X (클로저 생성 X, 함수 생성 방식 다르게 동작, ...)

   - 화살표 함수 (ES6)

     - fat arrow

     - 항상 익명 함수로 정의

     - 표현뿐만 아니라 내부 동작도 간략화

     - 생성자 함수로 사용 불가, 기존 함수와 this 바인딩 방식 다름, prototype 프로퍼티 없음, arguments 객체 생성 X

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

   - 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다름

      => 인스턴스화/메모리 잡히는 시점 다름, 실행 컨텍스트에 등록되는 시점이 다름

     - 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출 가능 (참조도 가능)

       - 함수 선언문으로 정의된 함수는 런타임 이전에 함수 객체 먼저 생성됨

       - JS 엔진이 암묵적으로 식별자도 생성하고 그곳에 함수 객체 할당함

       - 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작 (함수 호이스팅)

     - 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출 불가

       - undefined로 초기화 되어 있긴 함

       - 변수 할당문의 값은 런타임에 평가되므로 함수 표현식의 함수 리터럴도 런타임에 평가되어 함수 객체 됨

       - 함수 표현식으로 함수를 정의하면 함수 호이스팅이 아니라 변수 호이스팅이 발생함

       - 함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조 또는 호출 (먼저 하면 TypeError 발생)

12.5 함수 호출

 - 매개변수와 인수

   - 매개변수는 함수 정의할 때 선언, 함수 몸체 내부에서 변수와 동일하게 취급

   - 매개변수는 함수 몸체 내부에서만 참조 가능, 함수 몸체 외부에서는 참조 불가 (ReferenceError 발생)

     - 매개변수의 스코프 (유효 범위)는 함수 내부

   - 인수는 값으로 평가될 수 있는 표현식

   - 인수는 개수와 타입에 제한이 없음

   - 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크 X (에러 발생 X, 나머지 => undefined 암묵적 초기화)

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

     - arguments 객체는 함수 정의 시 매개변수 개수 확정할 수 없는 가변 인자 함수 구현시 유용하게 사용됨

 - 인수 확인

   - JS는 동적 타입 언어 => 함수의 매개변수 타입 사전에 지정 불가

     - if 문의 조건식에 typeof 연산자 활용 가능

     - 부적절한 호출을 사전에 방지 불가 => TS 같은 정적 타입 선언 가능한 JS의 superset 언어 도입

       - 컴파일 시점에 부적절한 호출 방지

     - arguments 객체를 통해 인수 개수 확인도 가능

     - 인수 전달되지 않은 경우 단축 평가 사용하여 매개변수에 기본값 할당 가능

     - ES6 기본 매개변수 이용 (인수 체크 및 초기화 간소화)

 - 매개변수의 최대 개수

   - 매개변수는 순서의 의미 있음

   - 매개변수 많아지면 함수 사용법 이해 어렵고 실수 발생 가능성 높아짐 => 유지 보수성 나빠짐

   - 매개변수의 개수가 많아진다는 것은 함수가 여러 가지 일을 한다는 것이므로 바람직하지 X

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

   - 객체를 인수로 사용하면 코드 가독성 좋아지고 실수 줄어듦

     - 하지만 함수 내부로 전달한 객체를 함수 내부에서 변경하면 side effect 발생 가능 (주의)

 - 반환문

   - 함수 실행 결과를 함수 외부로 반환

   - 함수 호출은 반환값으로 평가됨 (함수 호출은 표현식임)

   - 반환문 역할

     - 함수 실행 중단하고 함수 몸체 탈출 (조기 return)

     - return 키워드 뒤에 오는 표현식을 평가해 반환

       - 표현식을 명시적으로 지정하지 않으면 undefined 값 반환

   - 반환문 생략 가능 (암묵적으로 undefined 값 반환)

   - 반환문은 함수 몸체 내부에서만 사용 가능 (전역에서 사용 시 SyntaxError/문법 에러 발생)

    - Node.js는 모듈 시스템에 의해 파일별로 독립적인 파일 스코프 가짐

       - Node.js 환경에서는 파일의 가장 바깥 영역에 반환문 사용해도 에러 발생 X

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

 - 원시 타입 인수

   - immutable type value 이므로 함수 외부에서 함수 몸체 내부로 전달 시 원본 값 변경되지 X

 - 객체 타입 인수

   - mutable type value 이므로 참조 값 (주소)만 복사되어 원본 객체 변경됨

   - 함수가 외부 상태 변경하면 상태 변화 추적 어려워짐 => 코드 복잡성 증가, 가독성 떨어짐

   - 객체 변경 추적 위해 옵저버 패턴 사용 => 객체 참조 공유하는 모든 observer에게 변경 사실 통지 및 대처

   - 객체를 불변 객체로 만들어 사용하기!

     - 객체의 복사본을 새롭게 생성하는 비용이 들지만 객체를 마치 원시 값처럼 변경 불가능한 값으로 동작하게 만듦

     - 객체의 방어적 복사/깊은 복사 => 새로운 객체 생성 및 재할당 통해 교체 (외부 상태 변경되는 side effect 방지)

     - 외부 상태를 변경 X, 의존하지 X 함수 => 순수 함수 (안정성 높임, 함수형 프로그래밍)

12.7 다양한 함수의 형태

 - 즉시 실행 함수

   - IIFE (Immediately Invoked Function Expression)

   - 함수 정의와 동시에 즉시 호출되는 함수

   - 단 한번만 호출되며 다시 호출 불가

   - 익명 함수 사용하는 것이 일반적임

   - 반드시 그룹 연산자 ( ) 로 감싸야 함 (안하면 SyntaxError 발생)

     - 그룹 연산자의 피연산자는 값으로 평가됨

     - 먼저 함수 리터럴을 평가해서 함수 객체 생성 위해 그룹 연산자로 함수 묶음

   - 그룹 연산자 이외 연산자 사용해도 괜찮음

   - IIFE도 일반 함수처럼 값 반환 가능, 인수 전달도 가능

   - 변수나 함수 이름 충돌 방지 가능 (전역 변수 사용 억제)

 - 재귀 함수

   - 재귀 호출: 함수가 자기 자신 호출

     - 함수 이름은 함수 몸체 내부에서만 유효

     - 함수 표현식으로 정의한 함수 내부에서 함수 이름뿐만 아니라 함수 식별자로도 재귀 호출 가능

   - 반복되는 처리 위해 사용 (반복문 대체 가능)

   - ex) 팩토리얼 구현

   - 반드시 재귀 함수 탈출 조건 만들어야 함 (없으면 무한 재귀함수 호출 => 스택 오버플로)

   - 대부분의 재귀함수는 for 문이나 while 문으로 구현 가능

   - 재귀함수는 반복문보다 더 직관적으로 이해하기 쉬울 때만 한정적으로 사용하는 것 권장

 - 중첩 함수

   - nested function (중첩 함수) / inner function (내부 함수)

   - outer function (외부 함수)

   - 중첩 함수는 외부 함수 내부에서만 호출 가능

   - 중첩 함수는 일반적으로 외부 함수를 돕는 helper function (헬퍼 함수) 역할

   - 함수 선언문을 if 문이나 for 문 등의 코드 블록 내부에서도 정의할 수 있지만 호이스팅 혼란 발생 가능

   - 중첩 함수는 스코프와 클로저에 깊은 관련 있음

 - 콜백 함수

   - 함수의 일부분만 다를 때 매번 함수 새롭게 정의해야 함 => 함수 합성으로 해결 가능

     - 함수의 변하지 않는 공통 로직은 미리 정의,

       경우에 따라 변경되는 로직은 추상화해서 함수 외부에서 함수 내부로 전달

     - JS에서 함수는 일급 객체이므로 함수의 매개변수 통해 함수 전달 가능

     - 함수의 매개변수 통해 다른 함수의 내부로 전달되는 함수 => 콜백 함수

     - 매개변수를 통해 함수의 외부에서 콜백 함수 전달 받은 함수 => 고차 함수 (HOF)

       - 함수형 프로그래밍 패러다임에서 매개변수 통해 함수 전달 받거나 반환값으로 함수 반환하는 함수 (고차 함수)

   - 콜백 함수도 고차 함수에 전달되어 헬퍼 함수 역할

   - 중첩 함수는 고정되어 있어서 교체하기 어렵지만

     콜백 함수는 함수 외부에서 고차 함수 내부로 주입하므로 자유롭게 교체 가능

   - 고차 함수는 콜백 함수를 자신의 일부분으로 합성

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

     - 모든 콜백 함수가 고차 함수에 의해 호출되는 것은 아님 ex) setTimeout 함수

     - 콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수 전달 가능

     - 고차 함수에 콜백 함수 전달할 때 콜백 함수를 호출하지 않고 함수 자체를 전달해야 함

     - 콜백 함수가 고차 함수 내부에만 호출된다면 콜백 함수를 익명 함수 리터럴로 정의하면서

       곧바로 고차 함수에 전달하는 것이 일반적임

     - 콜백 함수로서 전달된 함수 리터럴은 고차 함수가 호출될 때마다 평가되어 함수 객체 생성

     - 콜백 함수를 다른 곳에서도 호출하거나 콜백 함수 전달 받는 고차 함수가 자주 호출된다면 외부에 콜백 함수 분리

   - 비동기 처리에 중요한 패턴 (고차 함수)

   - 배열 고차 함수 중요 ex) map, filter, reduce

 - 순수 함수와 비순수 함수

   - 순수 함수: 외부 상태에 의존 X, 변경 X, side effect X 함수

     - 동일한 인수가 전달되면 언제나 동일한 값 반환

     - 오직 매개변수 통해 함수 내부로 전달된 인수에게만 의존해 반환값 만듦 (함수 내부에서 외부 상태 직접 참조 X)

   - 비순수 함수: 외부 상태 의존 O, 변경 O, side effect O 함수

     - 상태 변화 추적 어려워짐

     - 코드 복잡성 증가

   - 순수 함수 형태 사용 권장

   - 함수형 프로그래밍 (side effect 최대한 억제하여 오류를 피하고 프로그램 안정성 높이기)

     - 불변성 지향

     - 로직 내 조건/반복문 제거하여 복잡성 해결 (조건/반복문은 가독성 해칠 수 있음)

     - 변수 사용 억제 (다른 곳에서 변경될 수 있음)

     - 생명 주기 최소화하여 상태 변경 피해 오류 최소화