[240312] 12장 함수(2)

12장 함수(2)

함수 호출

function add(x,y) { // 매개변수
	return x+y; // 반환 값
}

var result = add(2,5); // 인수

• 매개변수
  • 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수 생성
  • 일반 변수와 마찬가지로 undefined 로 초기화됨
  • 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않음
  • 매개변수보다 인수가 많은 경우는 무시됨
    • 암묵적으로 argumennts 객체의 프로퍼티로 보관
      • 매개변수 개수를 확정할 수 없을때 유용하게 사용

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

인수 확인

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

해결방안

1. 함수 내부에서 확인 (런타임에서 에러 발생)

function add(x,y) {
	if(typeof x !== 'number' || typeof y !== 'number') {
	throw new TypeError('인수는 모두 숫자 값이어야 합니다.');
}
return x+y;
}

console.log(add(2)); // TypeError 
console.log(add('a','b','c')); // TypeError

1. 타입 스크립트와 같은 상위 확장 도입
2. argument 객체를 통한 인수 개수 확인
3. 단축 평가를 사용해 기본 값 할당

매개변수의 최대 개수

• ECMAScript 사양에서는 명시적으로 제한하고 있지 않음
• 매개변수는 코드를 이해하는데 방해 → 적을수록 좋다.
• 객체를 인수로 사용하는 경우, 키만 지정하면 매개변수의 순서 신경쓰지 않아도 되고 가독성 좋아짐
  • 외부에서 함수 내부로 전달한 객체를 함수 내부에서 변경되는 부수효과 발생할 수 있음

반환문

• return 키워드와 표현식으로 이뤄진 반환문
• 함수의 실행을 중단하고 몸체를 빠져나간다.
• return 키워드 뒤에 오는 표현식을 평가해 반환한다.
• 명시적으로 지정하지 않으면 undefined 가 반환
• 반환문 생략하면 마지막까지 실행하고 undefined 반환
• 함수 몸체 내부에서만 사용 가능

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

• 원시타입은 값 자체가 복사되어 전달되어 원본이 훼손되지 않는다.
• 참조타입은 참조 값이 복사되어 전달되기때문에 원본 훼손

→ 상태 변화를 추적하기 어려워짐

→ 객체의 변경을 추적하려면 옵저버 패턴 등을 통해 객체를 참조를 공유하는 모든 이들에게 변경 사실을 통지하고 대처하는 추가 대응 필요

→ 해결 방법 중 하나는 객체를 불변 객체로 만드는 것

• 순수 함수 (외부 상태를 변경하지 않고, 외부 상태에 의존하지 않는 함수)
• 안정성 높이려는 프로그래밍 패러다임 , 함수형 프로그래밍
• 패러다임: 한 시대의 사람들의 견해나 사고를 근본으로 규정하고 있는 인식의 체계

다양한 함수의 형태

즉시 실행 함수

• IIFE , Immediately Invoked Function Expression
• 정의와 동시에 즉시 호출
• 단 한 번만 호출
• 익명 함수 사용하는 것이 일반적

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

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

foo(); // ReferenctError , 그룹연산자 () 는 함수리터럴로 평가, 함수 몸체에서만 참조할 수 있는 식별자

• () 반드시 그룹 연산자로 감싸야함
  • function () {} → SyntaxError : Function statements require a function name
  • function foo() {} → SystaxError : Unexpected token ‘)’
  • 세미콜론 자동 삽입 기능때문에 함수 코드 블록 닫는 중괄호에 ; 이 추가되기때문임
• 그룹 연산자로 함수를 묶으면 함수리터럴을 평가해서 함수 객체 생성함, 피연산자로 전달도 가능
• 즉시 실행 함수내에 코드 모아두면 변수나 함수 이름을 충돌을 방지할 수 있다.

재귀함수

• 자기 자신을 호출하는 함수

function factorial(n) {
	if( n<= 1 ) return 1;
	return n * factorial(n-1);
}

• 함수 이름은 함수 몸체 내부에서만 유효함
• 함수 이름을 통해 자기 자신 호출 가능
• 함수 표현식도 가능
• 재귀 호출을 멈출 수 있도록 탈출 조건 반드시 만들어야함 → 없으면 스택 오버플로 에러

중첩 함수 (내부 함수)

• 함수 내부에 정의된 함수
• 헬파 함수 역할을 한다.
• 외부함수 : 중첩함수를 포함하는 함수
• ES6 이전에는 코드의 최사우이 , 다른 함수 내부에서만 정의할 수 있었는데, ES6부터는 if 문이나 for 문 등의 코드 블록 내에서 가능
  • 단 , 호이스팅으로 인한 혼란이 있을 수 있으므로, 바람직하진 않음

콜백함수

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수
• 매개변수를 통해 함수의 외부에서 콜백함수를 전달 받은 함수를 고차함수
• 고차함수는 콜백함수를 자신의 일부분으로 합성한다.
• 콜백 함수는 함수형 프로그래밍 패러다임 뿐만 아니라 비동기처리 (이벤트처리, Ajax 통신, 타이머 함수 등)에 활용되는 중요한 패턴이다.
• 배열 고차함수에서도 사용 (map, filter, reduce)

순수 함수와 비순수 함수

• 순수함수
  • 어떤 외부 상태에 의존하지 않고 변경하지도 않는 , 부수효과가 없는 함수
  • 인수가 전달되면 언제나 동일한 값 반환
  • 인수에게만 의존
  • 내부 상태가 호출될때마다 변화나는 값 (현재 시간) 이면 순수함수 아님
  • 최소 하나 이상의 인수 전달
  • 인수를 전달 받지 않으면 상수와 마찬가지다.
  • 인수의 불변성 유지

    function increase(n) {
    	return ++n;
    }
  

• 비순수 함수 : 외부 상태에 의존하거나 변경하고 부수 효과가 있는 함수

var count = 0;

function increase() {
	return ++count;
} 

• 함수형 프로그래밍은 순수 함수를 통해 부수 효과를 최대한 억제해 프로그램 안정성을 높이려는 노력을 함