[JavaScript]함수 생성 방법

JavaScript에서 함수 생성 방법

JavaScript에서 함수를 생성하는 방법은 네 가지가 있습니다.

- 함수 선언문(function statement)

- 함수 표현식(function expression)

- 화살표 함수(arrow function)

- Function 생성자(Function constructor)

네 가지 방법들은 함수를 생성한다는 점은 동일하지만, 미묘한 차이점이 존재합니다.

---

함수 선언문

다음 예제처럼 함수 선언문 방식으로 함수를 생성할 수 있습니다.

function Add(a, b) {
  return a + b;
}

console.log(Add(10, 20)); // 30

함수 선언문은 function 키워드로 시작하며, function 키워드 뒤에 함수명, 매개변수 리스트, 함수 몸체를 구현합니다. 함수 선언문의 주요 특징은 실행 문맥의 맨 처음부터 시작한다는 것입니다.

 

즉, 다음 예제처럼 함수는 생성되기 전에 호출될 수 있습니다. 이러한 동작 방식을 함수 호이스팅(Function Hoisting)이라고 말합니다.

console.log(Add(5, 10)); // 15

function Add(a, b) {
  return a + b;
}

console.log(Add(10, 20)); // 30

---

함수 표현식

다음 예제처럼 함수 표현식 방법으로 함수를 생성할 수 있습니다.

let add = function Add(a, b) {
  return a + b;
}

let res = add(10, 30);
console.log(res); // 40

함수 표현식은 생성된 함수를 변수에 할당합니다. 함수가 할당된 변수를 함수 변수라고하며 함수 변수로 함수를 호출할 수 있습니다.

 

함수 표현식은 다음 예제처럼 function 키워드 뒤에 함수명을 생략할 수 있으며, 이를 익명 함수 표현식이라고 말합니다.

let add = function (a, b) {
  return a + b;
}

let res = add(10, 30);
console.log(res); // 40

함수 표현식은 함수 선언문과 다르게 실행 문맥의 맨 처음부터 시작하지 않습니다. 즉, 함수 호이스팅이 발생하지 않습니다.

 

다음 예제처럼 함수가 생성되기 전에 함수를 호출하면 ReferenceError가 발생합니다.

let res = add(10, 30);
console.log(res); // 40

let add = function (a, b) {
  return a + b;
}

[에러 내용]

따라서, 함수 선언문과 함수 표현식의 가장 큰 차이점은 함수 호이스팅 발생 여부입니다.

 

추가적으로 함수에 이름이 존재하는 함수 표현식을 기명 함수 표현식이라고 하는데, 다음 예제처럼 함수 외부에서 함수를 직접 호출하는 경우 에러가 발생합니다.

let add = function Add(a, b) {
  return a + b;
}

console.log(Add(10, 20));

[에러 내용]

함수 표현식에서 작성된 함수 이름은 함수 외부에서 접근할 수 없기 때문입니다.

---

화살표 함수

화살표 함수는 함수 표현식을 더 간결하게 작성할 수 있으며, ECMA 2015에 도입되었습니다. 화살표 함수는 코드의 가독성을 증가시키는 더 짧은 구문을 제공하며, this 객체를 가지고 있지 않습니다.

 

다음 예제처럼 화살표 함수로 함수를 생성할 수 있습니다.

let add = (a, b) => a + b;

let res = add(25, 25);
console.log(res); // 50

다음은 화살표 함수에 대한 몇 가지 규칙을 소스코드로 보여줍니다.

// 1. 매개변수는 소괄호에 작성합니다.
let add = (a, b) => a + b;

// 2. 매개변수가 하나인 경우 소괄호를 생략할 수 있습니다.
let show = value => console.log(value);

// 3. 매개변수가 없어도 소괄호는 존재해야 합니다.
let show2 = value => console.log('Hello~');

// 4. 함수 본문에 표현식이 긴 경우 중괄호를 작성합니다.
let divide = (a, b) => {
  if(b === 0) {
    return '0 으로 나눌 수 없습니다.';
  } else {
    return a / b;
  }
}

---

Function 생성자

Function 생성자를 사용하여 함수를 생성할 수 있지만, 일반적으로 Function 생성자를 사용하는 경우는 굉장히 드물며 보안 및 성능 문제가 있어서 사용하지 않는 것이 좋습니다.

 

다음 예제는 Function 생성자로 함수를 생성합니다.

var add = Function('a', 'b', 'return a+b');
let res = add(10, 20);
console.log(res); // 30

Function 생성자에서 매개변수와 함수 본문을 문자열로 전달하여 함수를 생성합니다. Function 생성자로 생성된 함수는 항상 전역 범위에서 생성됩니다.