자바스크립트 객체생성방식

1. Object() 생성자 함수 사용

자바스크립트는 객체를 생성할 때, 내장 Object() 생성자 함수를 제공한다.

//Object()를 이용해서 foo 빈 객체 생성
var foo = new Object();

// foo 객체 프로퍼티 생성 
foo.name = 'foo';
foo.age = 30;
foo.gender = 'male';

console.log(typepf foo); // (출력값) object
console.log(foo); // (출력값) { name: 'foo', age: 30, gender: 'male' }

2. 객체 리터럴 이용 방식

객체 리터럴은 중괄호({})를 이용해서 객체를 생성한다. {} 안에 아무것도 적지 않은 경우는 빈 객체가 생성되며, 중괄호 안에 "프로퍼티 이름":"프로퍼티 값" 형태로 표기하면, 해당 프로퍼티가 추가된 객체를 생성할 수 있다. 이때 프로퍼티 값이 함수일 경우 이를 메서드라고 한다.

var foo = {
	name : 'foo',
	age : 30,
	gender: 'male',
	func1: function () {
		console.log('Hello World')
	}
}

3. 생성자 함수 이용

자바스크립트의 생성자 함수는 말 그대로 자바스크립트의 객체를 생성하는 역할을 한다. 하지만 C++이나 자바와 같은 객체지향 언어에서의 생서자 함수의 형식과는 다르게 그 형식이 정해져 있는게 아니라, 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. 때문에 대부분의 자바스크립트 스타일 가이드에서는 특정 함수가 생성자 함수로 정의되어 있음을 알리려고 함수 이름의 첫 문자를 대문자로 쓰기를 권하고 있다.

 // Person() 생성자 함수
var Person = functino(name) {
		this.name = name;
}

// foo 객체 생성
 var foo = new Person('foo');
console.log(foo.name) // foo

4. 객체 리터럴 방식 vs 생성자 함수 방식

그러면 객체를 생성할 때 주로 사용되는 객체 리터럴 방식과 생성자 함수 방식을 비교해보자. 가장 큰 차이는 객체 리터럴 방식으로 생성된 객체는 같은 형태의 객체를 재생성할 수 없다. 이에 반해 생성자 함수를 사용하여 객체를 생성하면, 생성자 함수를 호출할 때 다른 인자를 넘김으로써 같은 형태의 서로 다른 객체 bar와 baz를 생성할 수 있다.

// 객체 리터럴 방식으로 foo객체 생성
var foo = {
	name: 'foo',
	age: 35,
	gender: 'man'
}
console.dir(foo);

// 생성자 함수
function Person(name, age, gender, position) {
	this.name = name;
	this.age = age;
	this.gender = gender;
	this.position = position;
}

// Person 생성자 함수를 이용해 bar 객체, baz 객체 생성
var bar = new Person('bar', 33, 'woman')
console.dir(bar)
var baz = new Person('baz', 25, 'woman')
console.dir(baz)

출력 결과를 살펴보면, 객체 리터럴 방식과 생성자 함수 방식의 차이가 프로토타입 객체('__proto__')에 있음을 알 수있다. 자바스크립트 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 설정한다. 객체 리터럴 방식에서는 객체 생성자 함수는 Object()이며, 생성자 함수 방식의 경우는 생성자 함수 자체이다.

Reference

• 인사이드 자바스크립트 40, 41, 109~112p