객체란 ?
선언과 출력
- 키와 값의 형태로 하나의 변수, 상수를 선언
- 키에 해당하는 부분은 공백이 없어야 한다
- 공백이 필요하다면 ‘‘로 감싸준다
1
2
3
4
5
6
7
8
9
const product = {
'상 품 명' : '삼다수2L',
가격 : 1000
}
// { '상품명': '삼다수2L', '가격': 1000 }
console.log(product['상 품 명'])
// 삼다수2L
console.log(product.가격)
// 1000
구조 분해 할당
비구조화 할당(Destructuring assignment)
- 비구조화 할당을 사용하지 않은 경우
1
2
3
4
5
6
7
8
9
10
11
12
13
const product = {
goods : '삼다수',
amount : '2L',
price : 1000
}
function test(product) {
console.log(`${product.goods}(${product.amount})는
${product.price}원 입니다.`);
}
test(product)
// 삼다수(2L)는 1000원 입니다.
- 비구조화 할당을 사용한 경우
- 키값을 정확히 입력하지 않으면 안 된다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const product = {
goods : '삼다수',
amount : '2L',
price : 1000
}
function test(product) {
const {goods,a,p} = product
console.log(`${goods}(${a})는
${p}원 입니다.`);
}
test(product)
// 삼다수(undefined)는 undefined원 입니다.
- 파라미터에서 비구조화
- 마찬가지로 키값은 일치시켜야 한다
1
2
3
4
5
6
7
8
9
10
11
12
13
const product = {
goods : '삼다수',
amount : '2L',
price : 1000
}
function test({goods,amount,p}) {
console.log(`${goods}(${amount})는
${p}원 입니다.`);
}
test(product)
// 삼다수(2L)는 undefined원 입니다.
- 객체가 아니라 배열일 경우
1
2
3
4
5
6
7
8
const array = ['block', 'inline', 'flex']
const [a,b,c,d] = array
console.log(a,b,c,d)
// block inline flex undefined
const [, , a] = array
console.log(a)
// flex
객체 내 함수 this
- 객체 안의 함수의 this는 객체를 의미한다
- 화살표 함수의 경우는 this를 사용할 수 없다
- 함수의 이름은 생략 가능(키값으로 호출)
1
2
3
4
5
6
7
8
9
10
11
const product = {
goods : '삼다수',
amount : '2L',
price : 1000,
tax : function() {
console.log(this.price * 1.1);
}
};
product.tax();
// 1100
Getter & Setter 함수
기본 형태
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const sample = {
get someting() {
// 외부로 나갈 내용
},
set someting(value) {
// value를 처리할 내용
}
};
// 호출 방법
// getter
sample.someting
// setter
sample.someting = value
객체 지향 프로그래밍
- javascript는 프로토타입 기반, 다중 패러다임 스크립트 언어이며,
동적이고 명령어, 객체 지향, 함수 프로그래밍 스타일을 지원한다 - 객체의 데이터에 대해 외부에서 직접적으로 접근하는 것은
객체의 무결성이 유지되지 않기에 권장되지 않는다 - 메소드를 통한 데이터 변경 방법이 권장된다(Setter)
- 메소드를 통하여 데이터에 접근하는 방법은 읽기에도 적용(Getter)
예시
- 예시에서는 getter와 setter의 역할과 의미를 확인한다
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
class Check {
constructor(student, score) {
this._student = student;
this._score = score;
}
// 입력된 점수가 출력때는 등급으로 나가게 만들 수 있다
get grade() {
if (this._score >= 90) {
return this._student + ' A'
} else if (this._score >= 70) {
return this._student + ' B'
} else if (this._score >= 50) {
return this._student + ' C'
} else {
return this._student + ' F'
}
}
// 잘못된 점수 부여로 점수를 고쳐주어야 할 때
set score(score){
if(score >= 0){
this._score = score;
}
}
}
// A 학생은 존이고 80점이다
const studentA = new Check('John', 80);
// 이름 직접 접근, 점수는 잘못된 접근, getter호출
console.log(studentA._student, studentA.score,studentA.grade);
// John undefined John B 의 결과가 나온다
// 점수 재설정 setter 호출
studentA.score = 40
// 이름 직접 접근, 점수는 잘못된 접근, getter호출
console.log(studentA._student, studentA.score,studentA.grade);
// John undefined John F 의 결과가 나온다
- score getter를 추가해 보자
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
class Check {
constructor(student, score) {
this._student = student;
this._score = score;
}
get grade() {
if (this._score >= 90) {
return this._student + ' A'
} else if (this._score >= 70) {
return this._student + ' B'
} else if (this._score >= 50) {
return this._student + ' C'
} else {
return this._student + ' F'
}
}
// 추가한 부분
get score(){
return `현재 ${this._student}의 점수는 ${this._score}`
}
set score(score){
if(score >= 0){
this._score = score;
}
}
}
const studentA = new Check('John', 80);
console.log(studentA.score,studentA.grade);
// 현재 John의 점수는 80 John B
studentA.score = 40
console.log(studentA.score,studentA.grade);
// 현재 John의 점수는 40 John F