인스턴스 생성

 

자바스크립트에서 인스턴스를 생성하는 방법은 두 가지가 존재한다.

 

 

1. function이라는 이전 방식을 사용해 인스턴스를 만드는 방법

 

2. class문법을 통해 인스턴스를 만드는 방법

 

각각의 흐름과 두 가지의 차이점과 공통점을 알아보자

 

 

 

function을 통해 인스턴스를 만드는 청사진을 구성하는 것은 상당한 암묵적인 메커니즘이 녹아있다.

 

function Person(){
 this.age = '';
 this.name = '';
 this.marry = [];
}

Person.prototype.getName = function() {
	return this.name;
};

Person.prototype.setMarry = function(marry, date) {
	this.marry.push({...marry, date : date});
};

Person.findSpouse = function(girl, boy, house){
	return {girl, boy, house};
};

const person1 = new Person();
const today = new Date();
person1.setMarry(Person.findSpouse(girl1, boy1, home1), today);

 

 

new 연산자를 통해 함수를 호출하면, 암묵적으로 빈 객체를 만들어 Person함수에 전달한다. 이 빈객체를 가리킬 지시어가 필요한데, 이때는 this가 사용된다.   

new 연산자는 또 하나의 암묵적인 역할을 하는데, this 또한 객체기 때문에 __proto__라는 속성을 가지고 있다. 이 __proto__ 속성에 함수 Person.prototype을 바인딩한다. 

내부적으로 함수가 종료될 때 동적으로 바인딩된 객체가 리턴하게 되어있다. 그렇기에 인스턴스 객체에서 함수(Person)의 prototype의 속성을 프로토타입 체이닝을 통해 접근 할 수 있는 것이다.

 

다음 Person.findSpouse와 같이 static 하게 함수를 선언하면, 인스턴스 객체는 해당 함수가 없기 때문에 혼동하지 않는 것이 중요하다.

 

즉 모든 흐름이 전부 숨겨져 내부 방식을 알아야 코드를 읽기 수월해진다. 

 

 

반대로 클래스 문법을 통해 생성해보면 다음과 같다.

 

class Person(){
	static findspouse = (girl, boy, home) => ({girl, boy, home});
    
    age;
    name;
    home;
    
    constructor() {
    	this.age = '';
        this.name = '';
        this.home = '';
    }

	getName() => {return this.name};
}

 

모든 것이 하나의 {}영역 안에 들어 있어 이전 방식보다는 명확하다.

 

 

이 두 가지의 인스턴스를 만드는 방법들은 내부 메커니즘은 동일하지만 차이점이라고 하면 가시성과 명확성이라고 할 수 있다. 또한 문법적 체크도 도와줄 수 있다.

 

function을 이용한 인스턴스 생성에서 static 함수를 만드는 부분은 인스턴스 정의 영역에 동떨어진 영역에 따로 표기되어 가시성이 부족하며, prototype chaning 또한 떨어져 있으며,

function을 통해 만드는 인스턴스에서 new키워드가 생략될 경우 this가 전역 콘텍스트인 window를 가리켜 에러가 발생할 수 있는데, 이것을 방지하고자 개발자들의 암묵적인 컨벤션으로 function 앞에 대문자로 시작하면 new 연산자를 붙여달라고 애원하는 것이다. 

 

반면에 class문법에서는 new 연산자가 없을 경우 컴파일 에러를 발생시키며, getName()과 같은 메서드들이 내부 프로토타입 체인에 걸리게 된다. 그렇기에 좀 더 명확하고 가시성 부분에서 큰 차이가 있다.

 

ES5이후 자바스크립트의 방대한 자유로움에 인한 에러를 방지하기 위한 기존 문법을 기반으로 Syntactic sugar라고 할 수 있다.