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
코드스테이츠 + 코딩앙마를 참조했습니다.
감사합니다.
반응형
'개발 공부 > 웹개발' 카테고리의 다른 글
자바스크립트 객체 개념정리(2) 객체메소드_assign_keys_values_fromEntries_entries (0) | 2021.04.28 |
---|---|
자바스크립트_화살표함수(arrow function) 개념정리 (0) | 2021.04.28 |
Dom 기본개념 정리(1)_querySelector_setAttribute_textContent_innerHTML (2) | 2021.04.27 |
자바스크립트(java script) 배열(Array) 정리(1) 배열의 순서,요소,pop,push,shift,unshift (0) | 2021.04.25 |
HTML 필수 태그 정리(1)_제목_문단_강조_링크_이미지 태그_Heading, paragraph, anchor, image, emphasis, breakline (0) | 2021.04.21 |
댓글