Binary World

자바스크립트 객체(Object) 본문

개발자의 길/Javascript

자바스크립트 객체(Object)

모쿠 2017. 4. 5. 16:28

<자바스크립트의 객체>


* JSON: JavaScript Object Notation(자바스크립트 객체 표기법)

 {프로퍼티: 값, 프로퍼티: 값, ...}

 {userid: "admin", password: "admin123", email: "admin@test.com"}

 

 자바스크립트 객체의 프로퍼티의 값을 참조:

 객체이름.property1, 객체이름['property1']


* 자바스크립트의 객체 선언/초기화 방법1

 var 객체이름 = {

 property1: value1,

 property2: value2,

 ...

 };

 

* 자바스크립트의 객체 선언/초기화 방법2 : Object 생성자 함수 이용

 - 권장하지 않음(성능이 떨어짐)


* 자바스크립트의 객체 선언/초기화 방법3 : 생성자 함수를 작성/호출


<16_object1.html>


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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>JavaScript 객체(Object)</h1>
<div id="output"></div>
 
<script>
var output = document.getElementById('output');
 
/* JSON: JavaScript Object Notation(자바스크립트 객체 표기법)
 {프로퍼티: 값, 프로퍼티: 값, ...}
 {userid: "admin", password: "admin123", email: "admin@test.com"}
 
 자바스크립트에서 객체를 선언/초기화:
    var 객체이름 = {
         property1: value1,
         property2: value2,
         ...
 };
 자바스크립트 객체의 프로퍼티의 값을 참조:
     객체이름.property1, 객체이름['property1']
 */
 
 var person = {
         name: '길동',
         age: 16,
         email: 'gil@test.com'
 };
 output.innerHTML += person + '<br/>';
 output.innerHTML += '이름 : ' + person.name + '<br/>';
 output.innerHTML += '나이 : ' + person.age + '<br/>';
 output.innerHTML += '이메일 : ' + person['email'] + '<br/>';
 
output.innerHTML += '<hr/>';
 
// for-in 구문을 사용한 자바스크립트 객체의 프로퍼티 접근
for (x in person){
    output.innerHTML += person[x] + '<br/>';
}
 
// 자바스크립트 객체 생성 방법 2: Object 생성자 함수 이용
// -> 권장하지 않음(성능이 떨어짐)
var person2 = new Object();
person2.name = '설현';
person2.age = '22';
person2.email = 'seol@test.com'
 
for(x in person2){
    output.innerHTML += x + ' : ' + person2[x] + '<br/>';
}
 
 
// 자바스크립트 객체 선언/초기화 방법3: 생성자 함수를 작성/호출
function Person(name, age, email) {
    this.name = name;
    this.age = age;
    this.email = email;
}
 
var p1 = new Person('공유', 40, 'ky@test.com');
 
for (x in p1) {
    output.innerHTML += x + ' : ' + p1[x] + '<br/>';
}
 
output.innerHTML += p1.name + '<br/>';
output.innerHTML += p1.age + '<br/>';
output.innerHTML += p1.email + '<br/>';
 
 
</script>
</body>
</html>
cs



<17_object2.html>


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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>JavaScript Object</h1>
<div id="output"></div>
 
<script>
var output = document.getElementById('output');
 
var person = {
        name: '도봉순',
        phone: {
            home: '02-1234-5678',
            mobile: '010-1234-5678'
        }, /* object(객체) */
        email: ['123', 'abc'] /* 배열 */
};
 
output.innerHTML += 'phone : ' + person.phone.home + '<br/>';
output.innerHTML += 'phone : ' + person.phone['mobile'] + '<br/>';
output.innerHTML += 'phone : ' + person['phone']['mobile'] + '<br/>';
output.innerHTML += 'phone : ' + person.email[0] + '<br/>';
 
output.innerHTML += '<hr/>';
 
function Person(name, phone, email){
    this.name = name;
    this.phone = phone;
    this.email = email;
}
 
function Phone(home, mobile){
    this.home = home;
    this.mobile = mobile;
}
 
var phone = new Phone('02-1111-2222', '010-1111-2222');
var person2 = new Person('아이유', phone, ['eu@test.com', 'ddsd@sads.com']);
 
output.innerHTML += person2.name + '<br/>';
output.innerHTML += person2.phone.home + '<br/>';
output.innerHTML += person2.email[0] + '<br/>';
 
output.innerHTML += '<hr/>';
var person3 = new Person('이유', {
    home : '1212', 
    mobile : '1355', 
    office : '02-222-22'}, 'saam@test.com');
    
output.innerHTML += person3.name + '<br/>';
output.innerHTML += person3.phone.home + '<br/>';
output.innerHTML += person3.email + '<br/>';
 
 
</script>
</body>
</html>
cs


<출력화면>




저작자표시 비영리

'개발자의 길 > Javascript' 카테고리의 다른 글

자바스크립트 프로퍼티(Property> 01  (0) 2017.04.06
자바스크립트 메소드(Method)  (0) 2017.04.06
자바스크립트 배열(Array) 02  (0) 2017.04.05
자바스크립트 배열(Array) 01  (1) 2017.04.05
자바스크립트 이벤트 처리  (0) 2017.04.05
'개발자의 길/Javascript' Related Articles more
Comments