12장 함수

1. 함수란, 입력(input)을 받아 출력(output)을 내보내는 과정이다. 

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

// f(2, 5) = 7
add(2, 5); // 7

해당 코드와 같이 add라는 함수에 x,y라는 값을 input 함에 따라 함수 안에 존재하는 수식을 통한 output을 도출해 내는 것이다. 함수 이름은 함수 몸체 내부에서만 유효한 식별자이다. 따라서 함수는 식별자로 호출해야한다.

 

2.코드의 재사용 측면에서 유리하다. 함수를 사용하면 여러번 중복하여 사용해야하는 코드의 중복작성을 피할 수 있다. 미리 작성해 놓은 함수를 통해 내가 필요할 때 마다 호출하여 사용하기만 하면 되기 때문이다. 

 

3. 변수에 함수 리터럴을 할당하는 것을 함수 리터럴이라고 한다. 

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

console.log(f(1,2));

이렇게 변수에 할당된 함수는 함수 자체의 이름으로는 내부에서만 참조할 수 있다. 이름을 생략하여 할당을 할 수 있다.

 

4.함수 정의란 말 그대로 함수를 호출, 사용하기 위해 매개변수,실행문,반환값,함수이름 등을 설정하는 것을 의미한다. 

함수는 3가지 호출법이 있다.

• 함수 선언문:
  -함수 리터럴과 형태가 동일하나, 함수 이름을 생략할 수 없다.
  -표현식이 아닌 문이기 때문에 변수에 할당할 수 없다.
  -문맥에 따라 단독으로 사용하면 함수 선언문으로,
  변수에 할당하거나 피연산자로 사용하면 함수 리터럴 표현식으로 해석된다.
  -함수는 함수 이름이 아닌 함수 객체를 가르키는 식별자로 호출된다. 호출을 위해 동일한 이름의 식별자를 암묵적으로 생성한다.

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

• 함수 표현식
  -함수는 일급객체이기 때문에 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다.
  ※일급객체란, 1.변수나 데이터에 할당가능, 2.객체의 인자로 넘기기 가능, 3.객체의 리턴값으로 리턴 가능, 의 조건을 만족해야한다.
  -표현식의 함수 리터럴은 보통 익명함수로 선언한다.

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

• Function 생성자 함수
  -Function 생성자로 함수를 생성하는 것은 바람직하지 않은 방식이다. 사용을 지양한다.
  -앞서 언급한 생성방법들과 동일하게 동작되지 않는다. 

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

• 화살표 함수
  -ES6에서 도입되었으며 언제나 익명 함수로 정의된다.

var add =(x,y)=>x+y;

 

5. 함수 호이스팅

함수는 과연 호이스팅이 가능할까? 가능하다면 무슨 상황에서 가능할까

함수의 호출방식에 따라 차이가 있다. 함수를 일반 선언문으로 작성하는 경우는 함수 호이스팅이 불가능하다.

console.log(add(1,2));

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

하지만 함수를 함수 리터럴로 호출하게 된다면 결과는 달라진다. 

코드와 같이 변수객체에 리터럴로 함수를 호출하게 된다면, sub라는 기능은 변수객체가 호이스팅되는 원리를 이용하여 

함수도 호이스팅을 할 수 있다.

console.log(sub(2,1));

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

 

6.함수의 매개변수보다 인수가 많은 경우에는 실행오류가 나는 것이 아니라 초과된 인수가 무시된다.

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

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

버려지는것이 아니라 arguments객체의 프로퍼티로 보관된다.

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

  return x + y;
}

add(2, 5, 10);

 

7. js의 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않고, 매개변수의 타입을 사전에 지정할 수 없다.

 

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

console.log(add(2));        // NaN
console.log(add('a', 'b')); // 'ab'

따라서 다른 타입의 변수들을 함수에 대입한다 하더라도 문제없이 실행된다.

 

8.함수에 객체 타입의 인수가 들어와 값을 수정할 경우 참조 값이 복사되어 매개변수에 전달되기 때문에 원본이 훼손된다. 

따라서 객체를 복사본을 새롭게 생성하여 불변객체로 만들어 마치 원시값처럼 변경이 불가능한 값으로 동작하게 해야한다.

 

 

9.즉시 실행 함수

함수정의와 동시에 실행된다. 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.

( function () {} () ) 의 형태

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

foo(); // ReferenceError: foo is not defined

 

10. 재귀함수란, 말 그대로 자기 자신을 호출하는 함수를 뜻한다. 반복되는 처리를 위해 사용한다. 

무한하게 자신을 호출하기 때문에 탈출조건을 반드시 작성하여 주어야 한다

// 팩토리얼(계승)은 1부터 자신까지의 모든 양의 정수의 곱이다.
// n! = 1 * 2 * ... * (n-1) * n
function factorial(n) {
  // 탈출 조건: n이 1 이하일 때 재귀 호출을 멈춘다.
  if (n <= 1) return 1;
  // 재귀 호출
  return n * factorial(n - 1);
}

console.log(factorial(0)); // 0! = 1
console.log(factorial(1)); // 1! = 1
console.log(factorial(2)); // 2! = 2 * 1 = 2
console.log(factorial(3)); // 3! = 3 * 2 * 1 = 6
console.log(factorial(4)); // 4! = 4 * 3 * 1 * 1 = 24
console.log(factorial(5)); // 5! = 5 * 4 * 3 * 2 * 1 = 120

 

11.중첩함수란 함수내부에 함수를 정의하는 함수를 말한다. 중첩함수는 외부함수의 내부에서만 호출할 수 있다.

function outer() {
  var x = 1;

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

  inner();
}

outer();

 

12.콜백 함수란, 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 뜻한다. 

// 외부에서 전달받은 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

 

13. 순수 함수와 비순수 함수

순수 함수란, 어떤 외부 상태에 의존하지도 않고 변경하지도 않는, 동일한 인수가 전달되면 동일한 값을 반환하는 함수이고, 외부 상태에 의존하거나 외부 상태를 변경하는 함수를 비순수 함수라고 한다. 

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