자바스크립트 - 객체 생성

자바스크립트는 기존 C++,Java와 같은 클래스 기반 객체 지향 언어와는 객체 생성 방법이 다르다.

자바스크립트 자체에 클래스라는 개념이 없기 때문이다. 자바스크립트에서 객체를 생성할 수 있는 방법은 크게 3가지로 나뉜다.

1. 기본 객체(Object() 객체)의 생성자 함수를 이용

2. 객체 리터럴을 이용

3. 생성자 함수 이용

위 순서대로 객체 생성 방법에 대해 하나씩 알아보겠다.

1. 기본 객체(Object() 객체)의 생성자 함수를 이용

Object 객체를 생성하고, 여기에 새로운 프로퍼티를 추가하는 방법이다. 객체는 new 연산자를 이용해서 생성이 가능하므로, 기본 객체를 다음과 같이 생성하자.

var member = new Object()

이 같이 기본 객체를 생성한 뒤에, 필요한 프로퍼티를 추가한다.

member.Id = 'phs1116';
member.pass = '1234';
member.gender = 'male'

이 변수의 타입과 변수를 출력해보자.

console.log(typeof member);
console.log(member);

출력값은 다음과 같다.

object
Object {Id: "phs1116", pass: "1234", gender: "male"}

이로서 member변수가 여러 프로퍼티를 포함한 객체로 생성됬음을 알 수 있다.

2. 객체 리터럴을 이용

그 다음은 1번과 같이 기본 객체를 생성하여 프로퍼티를 추가하는 방법이 아닌, 자체로 바로 객체를 생성하는 방법이다. 방법은 간단한데, 변수를 생성할 때 중괄호({})안에 생성할 객체의 프로퍼티를 정의하면 된다. 안에 아무것도 넣지 않고, 중괄호 만으로 생성을 하면 빈 객체가 생성된다. 프로퍼티를 선언할 땐 다음과 같은 방식으로 선언한다.

프로퍼티 이름 : 프로퍼티 값

1번과 같은 객체를 객체 리터럴 방식으로 생성해보자.

var member = {
  Id : 'phs1116',
  pass : '1234',
  gender : 'male'
};

이렇게 생성한 변수를 확인해보면 이 또한 여러 프로퍼티를 포함한 객체임을 알 수 있다.

3. 생성자 함수 이용

자바스크립트의 함수는 생성자 함수로도 정의할 수 있다. 생성자 함수라는 것은 일정의 형식이 정해진 것이 아니라, 정의한 함수에 new 키워드를 붙여 변수에 호출하면 그 자체로 생성자의 역할을 한다. 생성자 함수와 일반 함수의 구분이 명확치 않기 때문에, 이의 구분을 위해 생성자 함수의 첫 글자는 대문자로 쓰는 것을 권장하고 있다.

생성자 함수를 new 키워드로 이용해서 생성하는 객체는 다음과 같이 작동한다.

1. 먼저 빈 객체를 생성하고, this를 이 객체에 바인딩한다.(new 키워드를 사용하지 않을경우엔 this는 전역객체 window에 바인딩된다.) 또한 생성한 객체의 프로토타입 객체를(__proto__) 자신의 생성자의 프로토타입 프로퍼티로 설정한다.

2. 생성자 내부에 this 키워드로 정의된 프로퍼티들을 객체 내에 동적으로 생성한다.

3. 생성자 내부에 return문이 따로 명시되어있지 않으면, 생성한 객체를 리턴한다. 뿐만 아니라 this 키워드를 리턴해도 생성한 객체를 반환한다. (new 키워드를 사용하지 않았고(즉 함수로 사용하였고), return문을 명시하지 않았을 경우에는 undefined가 반환된다.)

생성자는 다음과 같이 정의한다.

var Member = function(Id,pass,gender) {
    this.Id  = Id;
    this.pass = pass;
    this.gender = gender;
}

var Member = function(Id,pass,gender) {
    this.Id  = Id;
    this.pass = pass;
    this.gender = gender;
    return this;
}

위 생성자를 다음과 같이 new 키워드로 호출하고, console.log로 출력해보면

var member = new Member('phs1116','1234','male');

console.log(member);
console.dir(member);

Member {Id: "phs1116", pass: "1234", gender: "male"}

가 출력되어 member 변수가 Member 생성자의 객체로 생성됬음을 알 수 있다.

부모 객체의 프로토타입을 가르키는 [[Prototype]]프로퍼티(__proto__)도 Member 생성자의 프로토타입 객체로 설정됬음을 확인할 수 있다.

기본 객체를 이용하는 방법이나, 객체 리터럴을 이용하는 방법은 같은 형태의 객체를 다시 생성할 수 없다. 같은 형태의 여러 객체를 생성하고자 한다면 생성자 함수를 정의하여 사용해야 할 것이다.

또한 생성자 함수를 이용해서 객체를 생성하면 프로토타입 객체(__proto__)는 생성자의 프로토타입 프로퍼티로 설정하지만, 객체 리터럴은 Object 객체의 프로토타입으로 설정된다. 이는 자바스크립트에서 객체를 생성할 때, 자동적으로 프로토타입 객체가 생성자의 프로토타입 프로퍼티로 설정되는데, 객체 리터럴을 사용할경우 Object()생성자를 사용하여 생성하는 것과 같기 때문이다.