그래봐야 코딩, 그래도 코딩

0%

javascript 객체(Object) 생성방법

작성일 Edited on In

자바스크립트의 객체 생성방법 3가지

1.객체 리터럴을 이용한 객체 생성 방식

리터럴 방식 객체생성은 하나의 객체를 그 즉시 생성한다.
거두절미하고 소스와 주석으로 객체 리터럴을 설명하겠다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var filmograyphyList = ['도날드덕', '환타지아']; // 배열 객체를 선언한다.

var man = {}; // 비어있는 프로퍼티가 없는 리터럴로 man 이라는 객체를 생성

//duck 이라는 이름의 객체를 객체리터럴을 통해 생성한다.
var duck = {
	//객체 내부에는 그 객체의 특징(element)이 되는 프로퍼티를 여러개 갖을수 있으며
	//이 프로퍼티에는 자바스크립트에 존재하는 모든 것을 담을수 있다.(원시값을 포함해 함수, 배열 ...)
	name: '도날드 덕',
	age: 82,
	sex : man,      	  // 프로퍼티에 객체가 할당된다.
	별명 : '도날드 트럼프',    // 자바스크립트 프로퍼티명은 영어가 아닌 한글도 가능하다.

	filmograyphy : filmograyphyList,   // 프로퍼티에 객체배열을 할당한다.

	'home adress' : '디지니 랜드',   // 일반적으로 프로퍼티 명을 뛰어 쓰기로 사용할수 없으나
                                        //예외적으로 싱글쿼티션(') 또는 더블쿼티션("")으로 감싼 프로퍼티명은 사용이 가능하다.
	                                // 프로퍼티 네이밍은 일반적으로 자바스크립트 변수 네이밍
                                        //규칙을 따른다.(ex:숫자로 시작하는 변수명은 사용할수 없다.)
					// 하지만 싱글쿼티션(') 또는 더블쿼티션("")으로 감싼 프로퍼티명은 이런 자바스크립트의                                                       //변수명 작성 규칙 제한을 받지 않는다.

	for : 'test2222',                   // for, if 등 시스템 예약어는 변수명으로는 사용할수 없다 하지만 자바스크립트
                                            //객체프로퍼티명으론 사용할수 있다.
	'if' : 'test111',                   // 하지만 이런 예약어들의 사용을 권장하지 않으며, 만약 불가피 하다면 문자열로
                                            //감싸 사용하길 권장한다.

	//프로퍼티에는 함수또한 담길수 있으며, 특이하게 객체의 프로퍼티중 함수를 담고 있는 프로퍼티는 메소드라고 부른다.
    say : function(){
		console.log('꽥 꽥');
	}

};

리터럴이라는 말을 위키피디아에서 찾아보니 컴퓨터 과학분야에서, 소스코드의 고정된 값을 대표하는 용어라고한다.( 즉 객체 리터럴 방식은 객체를 생성하는 표기법 정도로 이해하고 넘어가자. 리터널에 대해서는 인터넷에 한번 찾아보길 바란다.)

위 소스는 obj1이라는 이름의 객체를 리터럴 방식으로 생성한 것이다.
객체 리터럴은 중괄호 { } 를 이용하여 프로퍼티명과 프로퍼티의 값을 감싼 형태로 생성 된다.
{ ‘프로퍼티이름’ : ‘프로퍼티값’ }

더 자세한 내용은 위의 동영상을 참고하길 바란다.

2.생성자를 이용한 객체 생성

생성자 함수를 이용해 반복적으로 동일한 형태(프로퍼티를 갖는)객체를 생성하는 일반적인 방법.

일단 자바스크립트의 생성자란 객체를 반복적으로 생성할수 있는 함수이다.
대중적인 객체지향 언어인 java, c++ 같은 언어에서는 class라는 객체의 설계도 내부의 생성자라는 함수를 가지고 있는데, 자바스크립트에서는 클래스라는 객체의 설계서가 따로 존재하지 않으며 이 생성자 내부에서 객체의 설계내용을 작성한다.

그리고 자바스크립트에서는 기본적인 함수와 생성자간의 문법적 구별이 없다. A라는 함수가 있다면 이것을 그냥 함수처럼 호출할수도 있고, new라는 키워드로 생성자로 호출할수도 있다.

역시 거두절미하고 소스를 보자.

1
2
3
4
5

var obj1 = new Object();        // 자바스크립트에 내장된 기본 Object 생성자를 이용해 빈 객체를 생성.
var arrayObj1 = new Array(10);  // 자바스크립트에 내장된 기본 Array 생성자를 이용해 빈 배열 객체를 생성.
var dateObj1 = new Date();      // 자바스크립트에 내장된 기본 Date 생성자를 이용해 날짜 정보를 담은 Date 객체를 생성.
                                // Object, Array, Date 뿐만아니라 여러 다른 기본 내장 객체 생성자가 존재한다.

위처럼 내장된 생성자 객체들을 이용하여 객체를 생성할수 있다.
이런 내장된 생성자 말고 프로그래머가 직접 원하는 객체를 생성할수 있도록 생성자를 만들수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//Duck이라는 생성자를 만든다. 자바스크립트에서는 일반 함수와 생성자의 문법적 차이가 없다.(개인적으로 불만이다.)
//생성자와 함수를 구별하기 위해 보통 생성자의 이름은 대문자로 선언한다.
function Duck(dName, dAge){

	//생성자 함수의 내부에 있는 this라는 키워드는 이 함수가 new로 호출되었을때 생성해서 리턴하는 객체를 가리키며
	//this.name은 그 생성될 객체의 프로퍼티를 생성하겠다라는 의미이다.

	this.name = dName;  // 생성자 함수를 호출시 전달받는 전달인자를 name이라는 프로퍼티에 할당한다.
	this.age = dAge;    // 생성자 함수를 호출시 전달받는 전달인자를 age이라는 프로퍼티에 할당한다.
	this.종 = '오리';

	//객체 리터럴과 다르게 아래처럼은 객체 프로퍼티의 프로퍼티명을 문자열로 만들수 없다.
	//this."home adress" = '디지니 랜드';

	//하지만 이런식으로 객체가 유사배열인 것을 이용하여, 배열 형태로 프로퍼티를 생성할 시 문자열로 프로퍼티명을 생성할수 있다.
	this["home adress"] = '디지니 랜드';

	this.for = '하하하?';

	this.say = function(){
			console.log('꽥 꽥');
	};

}// Duck end

자 위 소스로 객채를 생성할수 있는 함수 즉 생성자를 선언했다.
이제 위 생성자를 통해 객체를 생성해 보자.

1
2
3
4
5
6
//new 라는 키워드의 의미는 new 다음에 올 함수를 생성자로서 호출하겠다는 의미이다.
//여기서 중요한 것은 new로 호출된 모든 함수는 객체를 반드시 생성해서 리턴하게 된다.
//생성자는 어떤 형태의 객체를 만들 목적으로 만들어 진 것일뿐 일반함수와 같다.
var duck1 = new Duck('도날드 덕', 82);

console.dir(duck1);

생성된 객체를 console.dir로 열어보면 Duck생성자로 생성된 객체의 프로퍼티를 확인 할 수 있다.

일단 생성자를 하나 만들었다면,

1
2
var duck2 = new Duck('레임 덕', 5);
var duck2 = new Duck('베이징 덕', 3);

이처럼 반복적으로 객체를 생성하는 것이 가능하다.

지금 설명하는 생성자를 사용하여 객체를 생성하는 이유는 동일 형태의 객체를 반복적으로 생성할 수 있기 때문이다.
(물론 필요에 따라 객체리터럴로 객체를 생성해도 된다. 뭐가 좋고 나쁘다는 말이 아니다.)

자바스크립트에서 생성자가 다른 객체지향 언어와 개념적 차이가 있는데, 일반적인 객체지향언어에서 클래스라는 개념이 있다.
이 클래스라는 개념은 객체의 설계도 역할을 한다. 예를 들어 객체가 가져야 할 프로퍼티들을 정의 하는데, 자바스크립트에서는 이 클래스라는 개념이 없으며,그 대신 자바스크립트에서 생성자에서 this.프로퍼티명 을 이용하여 이 클래스의 설계도와 같은 기능을 포함하고 있다.

  1. Object.create 매소드를 이용해한 객체 생성

자바스크립트의 객체의 상속을 따라가다보면 최상위 객체가 존재하신다.(필자는 god object라고 장난스래 부른다)
그리고 이 최상위 객체를 이용하여 자바스크립트에서 객체를 생산하시는 성모마리아님 같은 최상위 생성자(자바스크립트 내장 상성자)가 역시 존재하는데, 그 분이 Object()생성자 이시다.
이 Object생성자 객체의 create 메소드를 이용하면, 객체 생성과 동시 객체 상속을 조금더 손쉽게 할수 있다.
이 기능은 ecma5(이끄마파이브) 부터 지원하며, 자세한 내용은 아래 MDN을 참고!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create

절대 귀찮아서 Object.create 설명은 글로 안쓴것이 아니다. 솔직히 나도 잘 모ㄹ…. 콜록콜록