[Javascript] 02. 함수

자바스크립트의 함수는 모듈화 처리나 클로저, 객체 생성 등 자바스크립트의 근간이 되는 많은 기능을 제공하고 있습니다.

함수 정의

• 함수 선언문 (function statement)
• 함수 표현식 (function expression)
• Function() 생성자 함수

함수 리터럴

• 함수도 일반 객체처럼 값으로 취급됩니다.
• 함수 리터럴을 이용해 함수를 생성할 수 있습니다. (객체 리터럴 방식으로 객체 생성하는 것과 동일)
• 자바스크립트에서 함수명은 생략 가능합니다. 이처럼 이름이 없는 함수를 익명 함수라고 부릅니다.

함수 선언문 방식으로 함수 생성하기

• 함수 선언문 방식으로 정의된 함수는 반드시 함수명이 정의되어 있어 한다는 것 입니다.
• 함수의 리턴값, 매개변수 값에 변수의 타입을 기술하지 않습니다.

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

console.log(add(3, 4)); // (출력값) 7

함수 표현식 방식으로 함수 생성하기

• 함수 리터럴로 하나의 함수를 만들고, 여기에 생성된 함수를 변수에 할당하여 함수를 생성하는 방식입니다.
• 자바스크립트에서 함수도 하나의 값처럼 취급됩니다.
  즉, 변수에 함수를 할당하는 것이 가능합니다.

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

var plus = add;

console.log(add(3, 4));  // (출력값) 7
console.log(plus(5, 6));  // (출력값) 11

• 기명 함수를 변수에 할당할 경우, 에러가 발생하는데 함수 표현식에서 사용된 함수 이름이 외부 코드에서 접근 불가능하기 때문입니다.

// 기명 함수 표현식의 함수 호출 방법
var add = function sum (x, y) {
  return x + y;
};

console.log(add(3, 4)); // (출력값) 7
console.log(sum(3, 4)); // 에러

• 함수 표현식에 사용된 함수 이름은 외부에서 호출할 때 정의되지 않습니다. (재귀 호출, 디버거 등에서 구분하기 위해 사용)
  맨 처음의 add() 함수가 외부에서 호출된 이유는 선언문 형식으로 정의할 경우, 자바스크립트 엔진에서 아래와 같이 변경합니다.

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

즉, 변수명 add와 같으므로 함수 이름으로 함수가 호출되는 것처럼 보이지만 실제로는 add 함수 변수로 함수 외부에서 호출이 가능하게 된 것입니다.

• 함수 표현식에 사용된 함수 이름은 외부에서 호출은 불가능하지만 함수 내부에서는 사용가능합니다.
  아래 코드는 재귀 호출을 구현한 팩토리얼 함수입니다.

// 함수 표현식으로 구현한 팩토리얼 함수
var factorialVar = function factorial (n) {
  if(n <= 1) {
    return 1;
  }
  return n * factorial(n-1);
};

console.log(factorialVar(3)); // (출력값) 6
console.log(factorial(3)); // 에러

Function() 생성자 함수를 통한 함수 생성하기

• 자바스크립트의 함수는 Function()이라는 기본 내장 생성자 함수로부터 생성된 객체입니다.
• 생성자 함수: Function(arg1, arg2, …, argN, functionBody)
• 잘 사용하지 않음.

//Function() 생성자 함수를 이용한 add() 함수 
var add = new Function('x', 'y', 'return x + y');

console.log(add(3, 4)); // (출력값) 7

함수 호이스팅 (Function Hoisting)

• 함수 호이스팅: 함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작합니다.
• 함수 호이스팅은 ‘함수를 사용하기 전에 반드시 먼저 선언되어야 한다’라는 규칙을 무시하게 되고, 코드의 구조를 엉성하게 만들 수 있습니다.
• 그러므로 함수 표현식을 사용하여 함수를 정의하도록 권장하고 있습니다.
• 이러한 호이스팅이 발생하는 원인은 뒤 단원에서 확인하도록 하겠습니다.

add(2, 3); // (출력값) 5

// 함수 선언문 형태로 add() 함수 정의
function add(x, y) {
  return x + y;
}

add(3, 4); // (출력값) 7

add(2, 3); // 에러 (uncaught type error)

// 함수 표현식 형태로 add() 함수 정의
var add = function (x, y) {
  return x + y;
}

add(3, 4); // (출력값) 7