[JavaScript] 생성자 함수를 통한 객체 생성(new Object()), 특징, constructor, non-constructor

객체를 생성할 때 우리는 보통 아래와 같은 방법을 사용한다.

const obj = {
	'name': 'minwoo',
        'age': 24,
}

 

위 방법은 객체 리터럴을 사용한 방법이다.

 

이번 포스팅에서는 new Object()를 사용하여 객체를 생성하는 방법과, 이 방법의 특징에 대해서 알아보겠다.

 

---

new Object()와 같은 형식으로 객체를 생성하는 방법을 생성자 함수를 사용한 객체 생성이라고 한다.

 

const obj = new Object();

obj.name = 'minwoo';
obj.age = 24;
obj.intro = function() {
	console.log(`hi. my name is ${this.name}, I'm ${this.age} years old.`);
}

console.log(obj.name); // minwoo
console.log(obj.age); // 24
obj.intro(); // hi. my name is minwoo, I'm 24 years old.

 

new Object()를 사용하면 빈 객체가 생성된다.

그리고 이후에 프로퍼티를 추가하는 방식으로 코드를 작성할 수 있다.

 

여기까지만 보면 생성자 함수를 사용하는 방식이 더 복잡하고 귀찮아 보인다. 하지만 같은 프로퍼티를 같은 객체를 여러 개 생성하는 경우에 강점을 보인다.

 

먼저 객체 리터럴을 사용하여 같은 프로퍼티를 같는 객체를 2개 생성해보겠다.

const person1 = {
	name:'minwoo',
    introduce(){
    	console.log(`hi. my name is ${this.name}. `);
 }
 
 console.log(person1.introduce()); // hi. my name is minwoo.
 
 const person2 = {
	name:'binu',
    introduce(){
    	console.log(`hi. my name is ${this.name}. `);
 }
 
 console.log(person2.introduce()); // hi. my name is binu.

 

객체 리터럴을 사용하면 같은 코드를 두 번 다시 적어야한다.

하지만 생성자 함수를 사용한다면

function Person(name){
	this.name = name;
    	this.introduce = function(){
            console.log(`hi. my name is ${this.name}.`);
	}
}

const person1 = new Person('minwoo');
const person2 = new Person('binu');

person1.introduce(); // hi. my name is minwoo.
person2.introduce(); // hi. my name is binu.

 

위처럼 코드가 훨씬 간결하고 보기 편해진다.

 

아마 이걸 보면 객제지향프로그래밍에서의 클래스를 사용하는 이유가 떠오를텐데, 그것과 비슷하게 생각하면 편할 거 같다.

 

function Person(name){
	this.name = name;
    	this.introduce = function(){
            console.log(`hi. my name is ${this.name}.`);
	}
}

 

이 부분을 보면, 일반적인 함수처럼 선언을 했는데 어떻게 생성자 함수로 사용한거지 ? 라는 의문이 들었을 수 있다.

 

생성자 함수는 작성하는 형식이 정해져 있는 것이 아니다.

일반 함수와 동일하게 작성하고, 사용할 때 new 키워드를 사용하면 생성자 함수로 동작하게 되는 원리이다.

 

new 키워드를 통한 생성자 함수로 생성한 결과를 우리는 인스턴스(instance)라고 부른다.

 

 

 

 

그렇다면, 생성자 함수에 사용할 수 있는 함수 형태는 어떤 것들이 있을까 ? 

우리는 이전에 함수 선언문, 함수 표현식, 메서드, 화살표 함수와 같은 방식으로 함수를 정의할 수 있다고 배웠다.

 

이는 non-constructor와 constructor에 따라 정해진다.

사진 출처 - JavaScript Deep Dive

constructor 

• 일반 함수 또는 생성자 함수로써 호출할 수 있는 객체
• 함수 선언문, 함수 표현식, 클래스

 

non-constructor

• 일반 함수로서만 호출할 수 있는 객체
• 메서드(ES6 메서드 축약 표현), 화살표 함수

 

결과적으로 constructor만 new 연산자를 통해 인스턴스를 만들어낼 수 있게 된다