[JS] 함수

자바스크립트에서 함수를 정의하는 방법에는 4가지가 있다. 정의하는 방법에 따라 함수의 특징도 다르기 때문에 확실히 이해하고 넘어갈 필요가 있다. 또한 자바스크립트에서 함수는 일급객체로서 어떠한 성질을 갖고있는지 알아본다.

---

함수의 기본 형태

아래의 코드는 두 개의 숫자를 인자로 받은 후에 두 수를 더한 값을 반환하는 함수이다. 먼저 함수의 이름은 "my_sum"이며 이 함수의 매개변수는 "a", "b"로 2개가 존재하며 중괄호 내의 함수 몸체에서 a+b를 반환하고 있다. 정의된 함수를 사용하기 위해서 함수 호출을 하고있으며 정수 3과 5를 인자로 전달하고 있다.

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

my_sum(3, 5);

 

위의 코드처럼 함수는 함수 이름, 매개변수, 반환값 등으로 구성되어있다. 추가적으로 알아야할 것은 함수의 스코프를 결정하는 것이 호출한 스코프가 아니라 함수가 정의된 스코프라는 것이다.

---

함수는 함수 선언문, 함수 표현식, Function 생성자 함수, 화살표 함수와 같은 방식으로 정의할 수 있다. 각 방식에 따라 차이점을 알아보자.

 

함수 선언문

아래는 함수 선언문을 통해 함수를 정의하는 방법이다. 함수 선언문은 함수 이름을 생략할 수 없다.

함수 선언문을 통해 함수를 정의하면 소스코드 평가 과정에서 함수의 이름을 식별자로 등록한다. 변수의 경우 undefined가 저장되어있지만 함수는 함수 객체가 저장된다. 따라서 함수 호이스팅이 발생한다.

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

my_sum(3, 5);

 

함수 표현식

아래는 함수 표현식을 통해 함수를 정의하는 방법이다. 함수 표현식은 함수의 이름을 생략할 수 있으며 변수를 선언할 때 처럼 식별자에 함수를 정의하게되고 소스코드 평가 과정에서 함수가 저장된 식별자에 undefined가 저장되어진다. 따라서 함수 정의를 만나기 전에 함수를 호출할 수 없다.

const my_sum = function(a, b) {
    return a+b;
}

console.log(my_sum(1, 2))

변수 my_sum에 두 개의 정수를 입력받아 더하는 함수를 표현식으로 정의하였다. 변수 my_sum은 소스코드 평가 과정에서 undefined가 저장되어있기 때문에 함수 호이스팅이 발생하지 않는 것처럼 동작한다. 따라서 함수 선언문보다 함수 표현식을 권장하고 있다.

console.log(my_sum(1, 2)) // ReferenceError: Cannot access 'my_sum' before initialization
const my_sum = function(a, b) {
    return a+b;
}

만약 f라는 함수를 my_sum에 저장한 후에 f를 호출하면 참조할 수 없다는 에러가 발생한다. 왜냐하면 함수 f라는 함수 이름은 함수 몸체에서만 유효하기 때문이다. 따라서 식별자인 my_sum을 통해 함수를 호출해야한다.

const my_sum = function f(a, b) {
    return a+b;
}

console.log(f(1, 2)) // ReferenceError: f is not defined

 

Function 생성자 함수

아래는 Function 생성자 함수를 통해 함수를 정의하는 방법이다. 이 방법은 대체적으로 사용되지 않으며 클로저를 활용할 수 없다.

const my_sum = Function('x', 'y', 'return x + y');
console.log(my_sum(1, 2))

 

화살표 함수

화살표 함수는 ES6 이후에 만들어진 함수이다. 기존에 함수를 정의하는 방법보다 간략화되었다.

(이후 화살표 함수만 따로 정리하기)

const my_sum = (a, b) => a+b;
console.log(my_sum(3, 4))