[모던자바스크립트] 12. 함수

✅ 함수

• "입력"을 받아 "출력"을 내보내는 일련의 과정
• 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것
• 구성요소
  • 매개변수 : 함수 내부로 입력을 전달받는 변수
  • 인수 : 입력
  • 반환값 : 출력
• 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용
• 함수의 생성 : 함수 정의
• 함수의 반환값 : 함수 호출

✅ 함수를 사용하는 이유

• 함수는 실행 시점을 개발자가 결정할 수 있고 몇 번이든 재사용이 가능함
• 코드의 재사용성 측면에서 매우 유용
• 유지보수의 용이성이 높고 코드의 신뢰성을 높임
• 코드의 가독성 향상

✅ 함수 리터럴

• 자바스크립트의 함수는 객체 타입
• 함수 리터럴은 function키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성

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

  • 함수 리터럴을 변수 f에 할당하고 있음
  • 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기 방식
  • 함수는 객체다!
• 함수는 호출이 가능함

✅ 함수 정의

• 함수 정의 : 함수를 호출하기 전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 의미
• 함수 정의 방식
  1. 함수 선언문
  2. 함수 표현식
  3. Function 생성자 함수
  4. 화살표 함수

✔️ 함수 선언문

• 함수 선언문은 함수 이름을 생략할 수 없음
• 함수 선언문은 표현식(값)이 아닌 문!

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

• 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당함

  var add = function add(x, y) {
  	return x + y;
  };
  
  console.log(add(2, 5)); // 7

  • varadd : 자바스크립트 엔진에서 암묵적으로 생성한 식별자
  • function add : 함수 이름
  • console.log(add(2, 5)); : 식별자로 함수를 호출

✔️ 함수 표현식

• 자바스크립트의 함수는 일급 객체
  • 일급 객체 : 함수를 값처럼 자유롭게 사용할 수 있는 것

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

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

• 함수 선언문은 "표현식이 아닌 문"이고, 함수 표현식은 "표현식인 문"

✔️ 함수 생성 시점과 함수 호이스팅

// 함수 참조
console.dir(add); // 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;
};

• 함수 선언문과 함수 표현식으로 정의한 함수의 생성 시점은 다름
  • 함수 선언문 : 함수 선언문 이전에 호출할 수 있음
  • 함수 표현식 : 함수 표현식 이전에 호출할 수 없음 -> 선언 이후에 참조/호출해야함!
• 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라고 함
• 함수 표현식으로 함수를 정의하면 변수 호이스팅이 발생함
  • 변수 선언은 런타임 전에 실행되지만
  • 변수 할당문의 값은 런타임에 실행되기 때문

✔️ Function 생성자 함수

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

• Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new연산자와 함께 호출하면 함수 객체를 생성해서 반환
• 함수 선언문이나 함수 표현식으로 생성한 함수와는 동일하게 동작하지 않음

✔️ 화살표 함수

• function키워드 대신 화살표(=>)를 사용해 좀 더 간략한 방법으로 함수를 선언
• 화살표 함수는 항상 익명 함수로 대신함

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

✅ 함수 호출

• 함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출

✔️ 매개변수와 인수

• 함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개 변수(parameter)를 통해 인수(argument)를 전달함

• 매개변수는 함수를 정의할 때 선언

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

• 인수가 부족해서 인수가 할당되지 않은 매개변수의 값은 undefined

• arguments 객체는 함수를 정의할 때 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 사용

  function add(x, y) {
  	console.log(arguments); // Arguments(3) [...]
    return x + y;
  }
  
  add(2, 3, 10);

✔️ 반환문

• return키워드와 표현식(반환값)으로 이루어진 반환문을 사용해 실행 결과를 함수 외부로 반환할 수 있음
• 반환문의 역할
  1. 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나감
  2. 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환
• 반환문을 생략하는 경우 함수는 함수 몸체의 마지막 문까지 실행한 후 암묵적으로 undefined를 반환

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

• 원시 타입의 인수 : 함수 외부에서 함수 몸체 내부로 전달한 원시 값의 원본을 변경하는 어떠한 부수 효과도 발생하지 않음
• 객체 타입의 인수 : 함수 외부에서 함수 몸체 내부로 전달한 참조값에 의해 원본 객체가 변경되는 부수 효과가 발생

✅ 다양한 함수의 형태

1. 즉시 실행 함수
   • 함수 정의와 동시에 즉시 호출되는 함수
   • 단 한 번만 호출되며 다시 호출할 수 없음
   • 형태 : 반드시 그룹 연산자 (...)로 감싸야함

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

2. 재귀함수
   • 자기 자신을 호출하는 행위, 즉 재귀 호출을 수행하는 함수
   • 함수 내부에서는 함수 이름을 사용해 자기 자신을 호출할 수 있음
   • 탈출 조건이 필수 -> 없으면 함수가 무한 호출되어 스택오버플로우 에러 발생
3. 중첩 함수
   • 중첩 함수 : 함수 내부에 정의된 함수
   • 헬퍼 함수 : 중첩 함수는 자신을 포함하는 외부 함수를 돕는 역할을 함
4. 콜백 함수
   • 콜백 함수 : 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
   • 고차 함수 : 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수
   • 콜백 함수는 고차 함수에 의해 호출되며, 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있음
   • 비동기 처리, 배열 고차 함수 등에서 사용
5. 순수 함수와 비순수 함수
   • 순수 함수 : 부수 효과가 없는 함수 (외부 상태에 의존하지 않고 변경하지도 않음)
   • 비순수 함수 : 부수 효과가 있는 함수 (외부 상태에 의존하거나 외부 상태를 변경)