[JavaScript] Function 생성자와 인스턴스(instance)

ryan·2021년 2월 23일
0

JavaScript

목록 보기
21/23
post-thumbnail

실제 코딩에서 Function(대문자 시작)을 사용하는 일이 많지는 않지만 그 의미와 그것이 어떤 위치를 차지하는지는 이해하고 있어야 한다. 그래야 자바스크립트의 객체지향 프로그래밍 세계에서 함수를 제대로 이해할 수 있다.

Function vs. function

자바스크립트는 기본적으로 Function(대문자로 시작)이라는 함수를 제공한다. 이것은 함수 인스턴스를 생성하는 함수다.

"인스턴스(instance)"라는 용어는 "객체(object)"와 유사하다. 다만, 의미상으로 "객체"는 조금 더 일반적인 의미인 반면에 "인스턴스"라고 표현하면 현재 생성된 바로 그 객체라는 인스턴트(instant)한 뉘앙스로 좀 더 짙게 표현할 수 있다.

사실 Function자체도 객체다.
이렇다 보니 "Function 객체"라 하면 "Function 자체를 의미하는 것"인지 "Function에 의해 생성된 함수 객체를 의미하는 것"인지 구분이 모호할 때가 있다.
이러한 경우 "Function 인스턴스"라고 하면 일반적으로 후자를 일컫는 경우가 대부분이다.
마찬가지로 "Object 인스턴스"라 하면 "Object 생성자로 생성된 객체"를 의미한다.
그러나 Object 생성자의 주된 목적은 객체를 생성하는 것이므로 "Object 객체"라고 표현할 수 있다.

인스턴스를 생성하는데 사용하는 함수를 특별히 생성자(constructor)라고 하는데 Object가 Object 인스턴스를 생성하는 생성자라면 Function은 함수 인스턴스를 생성하는 생성자라고 할 수 있다.

// add라는 함수 인스턴스를 생성하는 표현

var add = new Function("x", "y", "return x + y;");

위 코드는 add라는 함수 인스턴스를 생성하는 표현이다.

또한 이 표현은 다음과 같이 add함수를 정의하는 것과 동일하다.

// add 함수를 정의하는 것

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

프로그램이 실행되면 이 표현에 의해서도 add라는 함수 인스턴스가 생성되는 것이다.
"함수를 정의한다는 것"과 "함수 인스턴스를 생성한다는 것"의 표현은 다르지만, 의미상으로는 거의 동일하다고 할 수 있다.

Function 생성자를 호출할 때는 문자열 타입의 인자를 몇 개라도 전달할 수 있다.
마지막 문자열이 해당 함수의 구현 내용이 되며 마지막을 제외한 그 앞의 인자는 함수를 호출하는 데 사용하는 인자다.

앞의 함수를 생성할 때, Function을 이용하는 코드와 function을 이용하는 코드를 보면 알겠지만 Function을 사용하기는 어렵다.

함수 본문이 길어진다면 마지막 인자에 문자열로 본문을 작성하는 것이 결코 쉽지 않은 일이다. 따라서 함수를 정의할 때는 Function 보다는 function을 주로 이용한다.

Funcion vs. Object, Array

위에서 정의된 함수 add가 Function의 인스턴스이듯 자바스크립트에서 제공하는 Object, Array도 Function의 인스턴스다.

Function 생성자가 new와 함께 사용되어 함수 인스턴스를 생성하듯이 Object와 Array 생성자는 new와 함께 사용되어 각각 Object 객체와 배열 객체를 생성한다.

var obj = new Object(); // object 객체 생성
var arr = new Array(); // 배열 객체 생성

생성자 Object, Array 등을 흔히 "타입" 또는 "타입 객체"라고도 표현한다.
어떻게 표현하든 Object, Array 등은 결국 함수임을 기억할 필요가 있다.

Object 객체와 배열 객체를 생성하는 방법은 위와 같은 new와 생성자를 이용하는 방법 이외에 리터럴 표현을 사용할 수 있다.

var obj = {}; // Object 객체 생성 리터럴
var arr = []; // 배열 객체 생성 리터럴

객체 리터럴과 배열 리터럴도 객체와 배열을 생성할 때 흔히 사용하는 방법이다.

Object와 객체 리터럴이 Object 객체를 만들어내는 역할을 하는 반면, Function과 function은 함수 객체(function object), 즉 함수를 만들어 내는 역할을 한다.

Function 생성자에 전달된 마지막 문자열 인자가 함수의 실행 코드가 된다.
Object와 Function은 Object객체와 함수 객체를 만들어내는 일종의 공장(factory)이다.
그리고 Object 함수가 만들어내느 객체와 Function이 만들어내는 객체는 둘 다 객체이지만 Function 객체는 "함수"라는 것이다.

Object로 생성된 객체가 Object에서 정의한 멤버를 공유하듯이 Function으로 생성된 함수는 모두 Function에서 정의한 멤버를 공유한다.
Object, Array 생성자도 Function의 인스턴스로서 Function에서 정의한 기본적인 멤버를 사용할 수 있다.
즉, 자바와 같은 객체지향 언어에서 모든 객체가 Object를 상속하듯이 자바스크립트에서는 모든 함수가 Function을 상속한다는 의미다.

정리

Function ➡ Object(Function 인스턴스) ➡ Object 객체(Object 인스턴스)
Object도 함수 객체로서 Function 인스턴스이고, Object 함수를 이용하면 다시 Object 객체를 생성할 수 있다는 의미이다.

인스턴스는 생성자 함수로 만들어진 객체
인스턴스는 원래의 객체인 클래스나 프로토타입이 가지고 있는 프로퍼티(property)와 메서드(method)를 모두 상속 받는다

참고

profile
👨🏻‍💻☕️ 🎹🎵 🐰🎶 🛫📷

0개의 댓글