[JavaScript] 객체 생성

1. 객체 리터럴

가장 일반적인 자바스크립트의 객체 생성 방식으로, 간편하게 객체를 생성할 수 있다.
중괄호({})를 사용하여 객체를 생성하며, {} 내에 아무것도 기술하지 않으면 빈 객체가 생성된다.

var emptyObject = {};
console.log(typeof emptyObject);  // object

var person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function() {
  	console.log('Hi! My name is ' + this.name);
  }
};

console.log(typeof person);	 // object
console.log(person);  // {name: "Lee", gender: "male", sayHello: f}

person.sayHello();  // Hi! My name is Lee

2. Object 생성자 함수

new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있다. 빈 객체를 생성한 후, 프로퍼티 또는 메소드를 추가하여 객체를 완성한다.

생성자(constructor) 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말한다. 생성자 함수를 통해 생성된 객체를 인스턴스(instance)라고 한다.
일반 함수와 생성자 함수를 구분하기 위해 생성자 함수의 이름은 파스칼 케이스(PascalCase)를 사용하는 것이 일반적이다.

파스칼 케이스(PascalCase)
: 여러 단어를 붙여서 한 단어로 표기할 때, 각 단어의 첫 문자를 대문자로 표기하는 방법

// 빈 객체의 생성
var person = new Object();

// 프로퍼티 추가
person.name = 'Lee';
person.gender = 'male';
person.sayHello = function() {
	console.log('Hi! My name is ' + this.name);
};

console.log(typeof person);	 // object
console.log(person);  // {name: "Lee", gender: "male", sayHello: f}

person.sayHello();  // Hi! My name is Lee

반드시 Object 생성자 함수를 사용해 빈 객체를 생성해야 하는 것은 아니다. 자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 Object 생성자 함수를 사용하여 객체를 생성한다. 따라서 개발자가 일부러 Object 생성자 함수를 사용해 객체를 생성해야 할 일은 거의 없다.

3. 생성자 함수

객체 리터럴 방식과 Object 생성자 함수 방식으로 객체를 생성하는 경우,
프로퍼티 값만 다른 여러 개의 객체를 생성할 때 매번 같은 프로퍼티를 기술해야 하므로 매우 번거롭다.

var person1 = {
  name: 'Lee',
  gender: 'male',
  sayHello: function() {
  	console.log('Hi! My name is ' + this.name);
  }
};

var person2 = {
  name: 'Kim',
  gender: 'female',
  sayHello: function() {
  	console.log('Hi! My name is ' + this.name);
  }
};

이 때, 생성자 함수를 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

// 생성자 함수
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function() {
 	console.log('Hi! My name is ' + this.name); 
  };
}

// 인스턴스의 생성
var person1 = new Person('Lee', 'male');
var person2 = new Person('Kim', 'female');

console.log('person1: ', typeof person1);
console.log('person2: ', typeof person2);
console.log('person1: ', person1);
console.log('person2: ', person2);

person1.sayHello();
person2.sayHello();

• 생성자 함수 이름은 일반적으로 대문자로 시작한다.
• 프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(instance)를 가리킨다.
• this에 바인딩되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)하다.
• 생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)하다. 즉, 생성자 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다.

function Person(name, gender) {
  var married = true;	 		 // private
  this.name = name;  			 // public
  this.gender = gender;  		 // public
  this.sayHello = function() {   // public
  	console.log('Hi! My name is ' + this.name);
  };
}

var person = new Person('Lee', 'male');

console.log(typeof person);	 // object
console.log(person);  // Person { name: 'Lee', gender: 'male', sayHello: [Function] }

console.log(person.gender);  // 'male'
console.log(person.married);  // undefined