본문 바로가기
개발 공부/웹개발

자바스크립트 객체 개념정리(1)_javascript_Object_객체접근,객체추가,객체삭제,객체만들기

by 크롱이크 2021. 4. 27.

object

 

오늘은 자바스크립트에서 꽃이라고 하는 '객체'에 대해 알아보겠습니다.

객체를 가장 쉽게 말하면 '키와 밸류의 집합체'입니다.

배열은 순서에 따라서 정해지지만

객체는 의미에 따라 접근할 수 있습니다.

 

밑에 있는 것을 천천히 읽다보면 쉽게 이해가능하실겁니다.

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
object
 
 
highperformer
name: adam
age:28
 
하이퍼포머의 프로필을 객체로 만들면 다음과 같다.
 
const highperformer = {
    name : ‘adam’.
    age : 28,
}
 
객체는 {}로 감싸고 ,(쉼표)로 구분하며,
key: value 의 값을 가진다.
 
 
object - 접근, 추가, 삭제 
객체에 접근하는 방법
highperformer.name;     //adam
highperformer[‘age’];     //28
 
키와 밸류 추가하는 방법
highperformer.gender =  ‘male’;
highperformer[‘job’] = student;
 
키와 밸류 삭제하는 방법
delete highperformer.job;
 
 
object - 단축 프로퍼티\
 
const name = ‘adam’;
const age = 28;
 
const highperformer = {
    name : ‘adam’.
    age : 28,
    gender : 'male'
}
위에 처럼 사용된 객체는 밑에와 위에서 선언한 name과 age를 이용하여 다음과 같이 바뀐다.
 
const highperformer = {
    name,
    age,
    gender : 'male'
}
 
 
object - 프로퍼티 존재 여부 확인
 
highperformer.birthDay;
//undefined
 
‘birthDay’ in highperformer
//false
 
‘age’ in highperformer
//true
 
in을 사용하여 boolean타입의 값을 가질 수 있고,
없는 값에 접근하면  undefined 나온다.
 
 
for … in  반복문
 
for(let key in highperformer) {
    console.log(key)
    console.log(superman[key])
}
 
예시하나
 
function isAdult(user) {
    if (!(‘age’ in user) || user.age < 20) {
      return false;
    }
    return true;
}
 
const Mike = {
    name : ‘Mike’,
    age : 30
}
 
 
const Jun = {
    name : ‘Jun’
};
 
console.log(isAdult(Mike)) //true
console.log(isAdult(Jun)) //false
 
 
예시 둘
const Mike = {
    name : ‘Mike’,
    age : 30
}
 
for (x in Mike) { 
    console.log(x)    //"name", "age"
    console.log(Mike[x])      //30
}
 
 
 
 
cs

 

www.youtube.com/playlist?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI

 

왕 초보 자바스크립트

 

www.youtube.com

코드스테이츠 + 코딩앙마를 참조했습니다.

감사합니다.

반응형

댓글