객체
객체 기초 - 1
- 여러개의 값을 한번에 접근할 수 있도록 자바스크립트는 객체(Object)를 제공하고 있습니다.
- 객체는 값들을 그룹으로 묶은 데이터 모음입니다.
- 객체를 만드는 방법은 중괄호{}를 사용하면 됩니다.
- 중괄호 안에 여러 값들을 넣을 수 있는데 키, 값을 한쌍으로 정의하여 속성(Properties)라고 부릅니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let family = {
addresss : 'Seoul',
members : {},
addFamily : function(age, name, role){
this.members[role] ={
age : age,
name : name
}
}
getHeadcount : function(){
return Object.keys(this.members).length;
}
}
family.addFamily(30, 'kim', 'aunt')
family.addFamily(3, 'lee', 'niece')
family.addFamily(30, 'getto', 'dog')
console.log(family.getHeadcount()); <-- 실행 결과 3
1 코드 설명
- 변수 family에 중괄호를 사용해 객체값을 할당하여 선언합니다.
2 코드 설명
- 키 address에 값은 문자열 ‘seoul’인 속성을 객체에 추가합니다.
- 객체에 키를 작성 할 때는 문자열(‘’) 기호를 넣은 것과 넣지 않은 것의 차이를 두지 않습니다.
3 코드 설명
- 키 member에 새로운 객체 리터럴을 대입합니다.
- 아직 family 객체에 새롭게 추가된 member는 없는 상태 입니다.
4 코드 설명
- 키 addFamily 이름으로 함수 리터럴을 대입합니다.
- 함수 표현식으로 변수에 대입했던 것처럼 키 값으로 함수를 할당합니다.
5 ~ 8 코드 설명
- this 키워드를 통해 family 객체 내부 속성에 접근할 수 있습니다.
- 객체가 선언된 이후에도 속성을 추가적으로 더 넣을 수 있습니다.
10 ~ 12 코드 설명
- 키 getHeadCount에 함수 리터럴을 할당합니다
- 이 함수는 member의 key들을 모아 객체로 반환 하고 반환된 객체의 길이를 통해 family 사이즈를 알 수 있습니다.
15 ~ 17 코드 설명
- faimly 객체의 속성 addFamily 함수를 호출하여 member를 추가합니다.
18 코드 설명
- family 객체의 속성 getHeadCount 함수를 호출해 member에 추가된 갯수를 출력합니다.
객체 기초 - 2
- 속성 접근, 추가, 수정, 삭제
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
let family = {
addresss : 'Seoul',
members : {},
addFamily : function(age, name, role){
this.members[role] ={
age : age,
name : name
}
}
getHeadcount : function(){
return Object.keys(this.members).length;
}
}
family.addFamily(30, 'kim', 'aunt')
family.addFamily(3, 'lee', 'niece')
family.addFamily(30, 'getto', 'dog')
let printMembers = function(){
let members = family.members
for(role in members){
console.log(`
role => ${role}
name => ${members[role.name]}
age => ${members[role.age]} `)
}
}
printMembers()
let members = family.members
members['off'] = {age : 3, name : 'dw'}
members.nice = {age : 5, name : 'lyn'}
delete members.aunt;
delete members['dog'];
printMembers()
19 코드 설명
- 변수 printMembers에 함수 표현식을 대입합니다.
20 코드 설명
- family 변수 객체의 members에 접근합니다.
- 별도의 members 변수를 선언하고 해당 값을 할당합니다.
21 ~ 23 코드 설명
- for-in 키워드를 사용해 members 객체를 순회합니다.
- members 속성을 하나씩 접근할 때마다 name과 age 속성값을 반환하여 출력합니다.
26 코드 설명
- 선언한 printMembers 함수를 호출하여 실행합니다.
29 코드 설명
- 객체에 새로운 속성을 추가하는 방법입니다.
- 키가 ‘off’ 이고 값은 {age : 3, name : ‘dw’}인 속성을 memebers에 추가합니다.
30 코드 설명
- ‘niece’ 라는 키 속성은 members 객체 변수 안에 원래 있는 값입니다.
- 존재하는 속성 값을 수정하기 위해 콤마(.)로 접근하여 새로운 값을 할당합니다.
31 코드 설명
- 객체의 특정 속성을 삭제하는 방법입니다.
- delete 키워드를 앞에 두고 특정 객체의 속성을 뒤에 작성하면 members 객체에 콤마로 접근한 aunt 속성이 삭제 됩니다.
32 코드 설명
- 속성에 접근하는 두가지의 방법처럼 삭제할 때에도 콤마와 대괄호를 사용할 수 있습니다.
33 코드 설명
위에서 실행된 추가, 수정, 삭제에 대한 결과값을 확인하기 위해 한번더 printMembers를 호출하여 members의 값을 출력합니다.