자바스크립트에서의 함수가 갖는 특징

ECMAScript는 객체 기반 언어이고 비슷한 객체 지향의 다른 언어와는 전혀 다른 구조를 갖는다. 기본적으로 함수 단위로 설계되어 있으나 객체 기반으로 동작하며 실제로 ECMAScript의 최상위 객체는 Object 객체이다.

Object 객체의 Prototype 프로퍼티와 메소드를 상속받은 Function 객체가 있으며 이 Function 객체의 prototype.constructor 프로퍼티로 참조되는 Function() 생성자 함수를 통해 함수를 생성한다. 그러나 생성자 함수를 통한 함수 생성은 일반적이지 않으며 꼭 필요한 경우가 아니라면 권장되지 않으므로 주의할 필요가 있다.  Object와 Function 객체와의 관계를 이해하고 모든 함수는 객체라는 사실이 중요하다고 볼 수 있다. 일반적인 함수 생성은 아래의 [리터럴(literal)로 함수를 생성하는 다양한 패턴]이라는 주제를 보기 바란다.

또한 Object를 상속 받으므로 함수 구현시 내부적으로 this라는 지시자를 사용할 수 있다. 함수 내부적으로 this 지시자가 포함된 함수가 생성된 경우에는 자신의 프로퍼티와 메소드를 상속한 또 다른 사용자 객체를 생성할 수가 있다. 이 때 내부적으로 사용된 this 지시자는 상속받아 생성된 사용자 객체(인스턴스: instance)를 가리키는 것이라 할 수 있다. 이러한 함수를 생성자 함수라고 부른다. 즉 객체를 생성하는 함수인 것이다.

일반적인 개념상 함수는 정적 역할 수행의 목적으로 생성이 되지만 자바스크립트에서는 객체를 생성하는 생성자 함수를 만들 수 있으며 생성자 함수는 필요에 따라 코드 상에서 인스턴스(instance)로 만들어져 완전한 객체가 되어 사용이 된다.

다른 객체 언어인 자바(Java)와 비교한다면 생성자가 있는 함수는 자바(Java)에서의 생성자가 있는 클래스(Class)라 할 수 있다. 클래스가 인스턴스(instance)로 만들어져 사용 되듯이 자바스크립트에서는 생성자 함수를 통해 인스턴스가 생성이 되어 사용될 수 있다. 생성자 함수에 의해서 인스턴스가 만들어지면 그 데이터는 Function 객체의 Prototype 프로퍼티와 메소드를 가질 수 없으며 이때 부터 Object 객체만을 상속받은  완전한 객체로 독립된다.

예를 들어서 아래의 경우는 일반적인 함수 사용을 위한 함수 생성 코드이지만 그 다음의 코드를 보면 생성된 함수를 인스턴스 객체로 만들어 사용되고 있음을 알 수 있다.

/* 일반적인 함수의 선언과 사용 */
function myFunc(param) {
    alert(param);
}

myFunc("Hello");

/* 인스턴스를 생성하는 함수 */
function myObj(param) {
    this.myData = param;
}

var oInstance = new myObj("Hello");
console.log(oInstance.myData); // 'Hello'를 출력한다.

정리한다면, 함수는 자바스크립트의 핵심이며 코드 상에서 일반적인 함수 역할과 인스턴스 생성을 위한 역할을 동시에 수행할 수 있고 Object 객체의 Prototype 멤버들을 상속받는다고 할 수 있다. 자바스크립트에서는 함수를 일급 객체로 보고 있다는 것이 함수가 자바스크립에서 얼마나 핵심적인 역할을 하는 객체인지를 알 수 있다.

리터럴(literal)로 함수를 생성하는 다양한 패턴

선언식 함수(declarative function)

선언식 함수는 런타임(runtime)시 실제 선언 위치의 스코프(scope)에서 최상위로 끌어 올려져 먼저 해석되어지는 호이스팅(hoisting)이 발생한다. 따라서 선언 위치의 앞 쪽에서 함수를 호출해도 에러는 발생하지 않는다.

myFunc("Hello");
function myFunc(msg) {
    alert(msg);
}

표현식 함수(expression function)로서 변수에 대입하는 경우

함수를 변수에 담는 방식이며 함수 호출시 변수명을 통해 호출이 가능하다. 선언식 함수와는 다르게 호이스팅(hoisting)이 되지 않으므로 주의할 필요가 있다.

const myFunc = function(msg) {
    alert(msg);
};

myFunc("hello");

표현식 함수로서 매개 변수의 값으로 사용되는 경우

자바스크립트의 함수는 고차함수로써 매개변수로 함수를 전달할 수도 있다.

Array.from(myArray, function(currentValue) {
    console.log(currentValue);
});