9장 : 함수

함수란?

• 문으로 구현하고 코드 블록을 감싸서 하나의 실행 단위로 정의한 것
• 함수정의를 통해 생성하고 함수 호출을 통해 실행
• 구조 : function isFunction(매개변수) {return 반환값}; isFunction(인수);
  • 매개변수 : 내부로 입력을 전달받는 변수
  • 인수/전달인자 : 입력
  • 반환값 : 출력
  • isFunction(매개변수)에서 (매개변수)는 함수 호출 연산자

함수를 사용하는 이유

• 코드의 재사용
• 유지보수의 편의성
• 코드의 신뢰성
• 코드의 가독성

함수 리터럴

• 객체 타입의 값 - 호출 가능한 객체
• function 키워드, 함수 이름, 매개변수 목록, 함수 몸체
• 함수 이름 : 함수 몸체 내에서만 참조할 수 있는 식별자

함수 정의

함수 선언문

• 함수 리터럴과 형태 동일
• 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다.
• 리터럴과 선언문 구분법
  • 함수 리터럴이 단독으로 쓰인다 --> 함수 선언문
  • 함수 리터럴이 값으로 평가되어야 하는 문맥이다 --> 함수 리터럴 표현식

// 단독사용 -> 함수 선언문(이름 생략 불가)
function foo() { console.log('foo') }
foo(); // foo <-- 호출할 수 있다! 그러나 어떻게 호출한 걸까??
// 자바스크립트 엔진이 **생성된 함수를 호출하기 위해 함수 이름과 동일한 식별자를 암묵적으로 생성하고 거기에 함수 객체 할당**했기 때문
// ===
var foo = function foo() { console.log('foo'); };

// 함수리터럴
(function bar() { console.log('bar'); });
bar(); // ReferenceError: bar is not defined

함수 표현식

• 일급 객체 : 값의 성질을 갖는 객체
• 함수 리터럴의 함수 이름은 생략이 가능
• 리터럴은 이것이 일반적이고 이를 익명함수라고 명명

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

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

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

var sub = function (x, y) {
  return x - y;
};

• 함수 선언문 --> 런타임 이전 엔진에 의해 먼저 실행되어 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당. --> 함수 호이스팅이 발생
• 함수 표현식 --> 런타임 이전 엔진에 의해 변수가 호이스팅되어 undefined로 할당되어 있음

Function 생성자 함수

• Function 생성자 함수로 함수를 생성하면 클로저 생성 X 및 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작
• var add = new Function('x', 'y', 'return x + y'); console.log(add(2, 5)); // 7

화살표 함수(ES6) (lambda function)

• 화살표 함수는 표현이 간략한것 뿐만아니라 내부 동작 또한 간략화

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

함수 호출

매개변수와 인수

• 함수는 매개변수의 개수와 인수의 개수가 일치하는 지 체크X
• 매개 변수보다 인수가 많은 경우 초과된 인수는 무시

인수 확인

• 매개변수와 인수의 개수가 일치하는 지 확인하지 않고, 동적 타입 언어여서 인수확인이 어렵기 때문에 함수 내부에서 확인을 하거나 기본값을 할당하여 확인 필요.

매개변수의 최대 개수

• 매개변수는 최대 3개이상 넘지 않는 것을 권장
• --> 함수는 한 가지 일만 해야하며 가급적 작게 만들어야한다.

반환문

• 함수 호출 = 표현식
• --> return 키워드가 반환한 표현식의 평가 결과값으로 평가되기 때문

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

• 객체 타입인수는 '참조 값'이 복사되어 매개변수에 전달되기 때문에 원본이 변경되지만 원시타입은 값 자체가 복사되어 매개변수에 전달되어서 새로운 메모리에 그 값을 할당하여 사용하기 때문에 부수효과 발생 X

다양한 함수의 형태

즉시 실행 함수

• 함수 정의와 동시에 즉시 호출되는 함수 --> 즉시 실행 함수라고 하고 단 한 번만 호출
• 그룹 연산자의 피연산자는 값으로 평가
• 기명 또는 무명함수를 그룹 연산자’()’로 감싸면 함수 리터럴로 평가되어 함수 객체가 됨

  // 익명 즉시 실행 함수
  (function() {
    var a = 3;
    var b = 5;
    return a * b;
  }());
  
  // 기명 즉시 실행 함수
  (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
  ​

재귀 함수

• 함수 자기 자신을 호출하는 것을 재귀 호출이라 하며 재귀 함수는 자기 자신을 호출하는 행위, 즉 재귀 호출을 수행하는 함수를 말함.
• 재귀함수는 자신을 무한 호출하기 때문에 탈출 조건을 반드시 만들어야 한다. --> 그렇지 않으면 스택 오버플로가 발생

중첩 함수

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

function outer() { // 외부함수
  var x = 1;

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

  inner();
}

outer();

콜백 함수

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
• 고차함수
  • 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수
  • 콜백 함수를 자신의 일부분으로 합성하고 고차함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.
• 고차 함수에 의해 호출되며, 이때 고차함수는 필요에 따라 콜백함수에 인수를 전달할 수 있다.

// 콜백 함수를 사용하는 고차 함수 map
var res = [1, 2, 3].map(function (item) {
  return item * 2;
});

console.log(res); // [2, 4, 6]

// 콜백 함수를 사용하는 고차 함수 filter
res = [1, 2, 3].filter(function (item) {
  return item % 2;
});
// filter의 predicate --> true또는 false를 반환함. 
// 첫번째인자: element, 두 번재인자: index, 세 번째 인자: 배열 전체
console.log(res); // [1, 3]

// 콜백 함수를 사용하는 고차 함수 reduce
res = [1, 2, 3].reduce(function (acc, cur) {
  return acc + cur;
}, 0);

console.log(res); // 6

순수 함수와 비순수 함수

• 순수함수 : 부수 효과가 없는 함수 - 함수 내부에서 처리

var count = 0; // 현재 카운트를 나타내는 상태

// 순수 함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
function increase(n) {
  return ++n;
}

// 순수 함수가 반환한 결과값을 변수에 재할당해서 상태를 변경
count = increase(count);
console.log(count); // 1

count = increase(count);
console.log(count); // 2

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

var count = 0; // 현재 카운트를 나타내는 상태: increase 함수에 의해 변화한다.

// 비순수 함수
function increase() {
  return ++count; // 외부 상태에 의존하며 외부 상태를 변경한다.
}

// 비순수 함수는 외부 상태(count)를 변경하므로 상태 변화를 추적하기 어려워진다.
increase();
console.log(count); // 1

increase();
console.log(count); // 2