7. Javascript 함수 (1) - 함수 선언 1

 

함수 선언문(Function Statement)

Javascript에서 함수 선언문 형태로 함수를 선언할 경우, function 키워드 / 함수명 / 매개변수 리스트 / 몸체를 작성해 수행하고자 하는 함수를 선언하게 됩니다. 이때, 선언문 형태에서는 함수명이 반드시 있어야 합니다(즉, 익명 함수를 선언문 형태로 작성할 수 없습니다). 

 

타 OOP 언어들과의 함수 리터럴의 차이점은, 리턴하는 데이터 타입과 매개변수의 데이터 타입을 정의하지 않는다는 점입니다. 아래 예시를 통해 함수 선언문의 구성 요소를 살펴보겠습니다. 

 

 

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

console.log(plus(24, 88));
// 112

 

---

 

함수 표현식(Function Expression)

Javascript에서의 함수는 긴 코드로 작성되어 선언되지만, 이 함수 역시 하나의 값으로 취급합니다. 즉, 이는 함수 전체를 변수에 할당하는 것이 가능하다는 것을 의미합니다. 이 기본적인 원칙은 Javascript 전반에서 중요하게 사용됩니다. 

 

함수 리터럴로 선언된 함수를 변수에 할당하면서 함수를 생성하는 방식을 함수 표현식이라고 합니다. 아래 함수 표현식을 통해 살펴보겠습니다. 

 

var plus = function (x, y){
    return x + y;
};
console.log(plus(99, 1));
// 100

var add = plus;
console.log(plus(99,1));
// 100

 

우선 가장 처음에 등장하는 변수 plus와 함수 대입문을 보겠습니다. 이는 plus라는 이름의 함수를 선언한 것이 아닙니다. 즉, plus는 함수의 이름이 아닙니다. 정확한 의미는, [plus라는 변수에 x + y를 리턴하는 익명 함수를 대입한 것]입니다. 결국 plus라는 변수는 익명 함수를 참조하는 것일 뿐입니다. 이를 구분하기 위하여 plus를 함수 변수로 칭하겠습니다. 더불어 이렇게 함수 표현식으로 생성된 함수는, 함수 변수를 사용해 실행이 가능하다는 점을 기억합시다. 

 

더불어 하단에 새로운 변수 add를 선언하고, 이곳에 함수 변수 plus를 대입했습니다. 이 경우, 어떤 일이 발생할까요? 위에서 설명했듯이 plus라는 변수는 익명 함수를 '참조'하고 있다고 했습니다. 이때 plus를 add에 대입하면 결국 add 역시 똑같은 함수를 '참조'하는 함수 변수가 됩니다. 아래와 같이 plus 함수 변수를 사용해 똑같은 방식으로 함수를 실행할 수 있습니다. 

 

여기서 짚고 넘어가야 할 개념은, x + y를 리턴하는 저 함수는 실제로는 함수명이 없다는 사실입니다. 우리는 이것을 익명 함수(Anonymous Function)라고 합니다. 결국 위의 예제에서 함수 변수 plus, add는 모두 하나의 익명 함수를 참조하고 있는 것입니다. 

 

물론 기명함수도 표현식에서 사용이 가능합니다. 다만, 일반적인 케이스보다는 재귀적인 호출 등 특별한 목적이 있을 때 사용합니다. 무엇보다, 원칙적으로 함수의 이름은 외부 코드에서 사용이 불가능합니다. 

 

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

console.log(sum(23, 44));
// 컴파일 에러

 

위와 같이 sum으로 함수를 호출하려고 하면 sum이 정의되지 않았다는 에러가 발생합니다. 위에서 말했듯이, 함수의 이름을 외부에서 호출할 수 없기 때문입니다.

 

그런데, 함수 선언문에서 멀쩡하게 함수 명으로 함수를 호출했던 것을 기억하실 겁니다. 이건 어떻게 된 것일까요? 역시 동일한 원칙이 적용되는데 Javascript 엔진에서 함수 선언문 타입의 함수는 아래와 같이 표현식으로 자동으로 변환되는 과정을 거치기 때문입니다. 

 

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

 

위와 같은 선언문은 아래와 같이 자동 변환되어 선언되기 때문에, 우리가 익히 아는 방식으로 함수 호출이 가능해집니다.

 

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

console.log(plus(99, 23));
// 122