반응형
객체형(Object type)
필요한 데이터와 기능을 가지고 있다.
▶ 개념
- Primitive type을 제외한 데이터 타입의 베이스 인스턴스.
- JavaScript의 거의 모든 객체는 Object의 파생 인스턴스다.
- 데이터를 읽고 쓰는 가장 기본적인 기능을 탑재하고 있다.
▶ 구성
- Object는 {}로 생성한다.
- key-value 형식으로 데이터 유지. (key : value)
- web환경에서도 key-value 형식이다.
▶ 객체형의 선언 및 연산
- 객체 내부에는 Primitive type뿐만 아니라 객체형도 들어갈 수 있다.
<body>
<script>
const product =
{
//object 생성
name : 'mouse',
type : 'wireless',
color : 'black',
buttons : 6,
scroll : true
}
//object 데이터 타입 확인
console.log(typeof(product))
//object의 property(속성) 읽기
console.log(product)
console.log(product.name)
console.log(product['type'])
</script>
</body>
//object
//{name: 'mouse', type: 'wireless', color: 'black', buttons: 6, scroll: true}
//mouse
//wireless
예제
※ 학생을 추상화하여 object를 object 만들고 object 내부의 값을 출력하시오.
* 추상화 : 핵심적인 개념 또는 기능을 간추려 내는 것
<body>
<script>
const student =
{
name : 'Snag Rok Jung',
id : '220001',
major : 'SC',
}
console.log(typeof(student))
console.log(student)
console.log(student.name)
</script>
</body>
▶ 객체 속성(property)의 변경
- 속성 변경
- 속성 추가
- 속성 변경과 같은 방식이며 속성이 없다면 추가가 됨
- 속성의 삭제
- delete 객체. 속성
<body>
<script>
const student =
{
name : 'Snag Rok Jung',
id : '220001',
major : 'SC',
gender : ''
}
//속성 변경 (UPDATE)
student.major = 'SDC'
console.log(student.major)
//속성 추가 (WRITE)
student.gender = 'Man'
console.log(student.gender)
//속성 삭제 (DELETE)
delete student.id;
console.log(student.id)
//SDC
//MAN
//undefined
</script>
</body>
예제
※ 학생 object에 국어, 영어, 수학 성적이 저장되어 있는 배열을 속성으로 추가하시오.
<body>
<script>
const student =
{
name : 'Snag Rok Jung',
id : '220001',
major : 'SC',
gender : ''
}
student.score = [['국어', 98], ['수학', 44], ['영어', 22]]
console.log(student.score)
</script>
</body>
▶ Method(메서드)
- 객체에 포함되는 함수
<body>
<script>
const student =
{
name : 'Snag Rok Jung',
id : '220001',
major : 'SC',
gender : '',
fun : function(){
console.log("FUN")
}
}
student.fun()
//FUN
</script>
</body>
- this : 객체 자신을 나타내는 레퍼런스 값
- 메서드에 default로 전달된다.
- 화살표 함수(arrow function exepress)의 경우 this를 사용할 수 없음
- this가 해당 Object의 레퍼런스 값은 아님.
- 속성의 형식 출력 : JSON.stringify()
<body>
<script>
const student =
{
name : 'Snag Rok Jung',
id : '220001',
major : 'SC',
gender : '',
fun : function(){
console.log("FUN")
}
}
console.log(JSON.stringify(student, null, 2))
</script>
</body>
예제
※ 학생을 추상화한 object를 만들고 과목별 점수를 출력하는 함수와 모든 점수의 평균을 구하는 함수를 작성하여 출력하시오.
<body>
<script>
const student =
{
name : 'Snag Rok Jung',
id : '220001',
major : 'SC',
gender : '',
score : [['국어', 99],['수학', 91],['영어', 98]],
getScore : function(subject){
for (let i = 0; i < this.score.length; i++)
{
if (this.score[i][0] === subject)
{
return this.score[i][1];
}
}
return null
},
avg : function(){
let avgScore = 0;
for (let i = 0; i < this.score.length; i++)
{
avgScore = avgScore + this.score[i][1];
}
return avgScore / this.score.length
}
}
console.log(student.getScore('국어'));
console.log(student.getScore('수학'));
console.log(student.getScore('영어'));
console.log(student.getScore('과학'));
console.log(student.avg());
//99
//91
//98
//null
//평균 = 96
</script>
</body>
예제
다음을 object로 만들고 이하의 문제를 수행하시오.
| 속성명 | 값 |
| name | Macbook pro |
| type | notebook |
| USB | 3 |
| price | $1,300 |
- name을 출력하는 메서드를 추가하시오.
- 10개 이상 구입 시엔 10%를 할인해준다고 한다. 구매 가격을 계산하는 메서드를 추가하시오.
- 위 노트북은 다양한 언어를 지원한다. 지원하는 언어를 속성으로 추가하시오.
<body>
<script>
const product = {
name : 'Macbook pro',
type : 'notebook',
USB : '3',
currency : '$',
price : 1300,
getName : function(){
return this.name
},
getPrice : function(n){
if(n >= 10)
{
return this.currency + ((this.price * n) * 0.9)
}
else if (n < 10)
{
return this.currency + (this.price * n)
}
else{}
return null;
}
}
console.log(product.getName())
console.log(product.getPrice(26))
product.lang = ['KOR', 'JPN', 'ENG'];
//Macbook pro
//$30420
</script>
</body>
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] Primitive type을 Object literal(Object type)으로 변환 (0) | 2022.04.14 |
|---|---|
| [JavaScript] Object literal(object type), object 순회 (0) | 2022.04.13 |
| [JavaScript] 함수 호출시 주의사항(선언함수 vs 익명함수), Hoisting (0) | 2022.04.12 |
| [JavaScript] IIFE(즉시 실행 함수 표현식), strict mode(엄격 모드) (0) | 2022.04.12 |
| [JavaScript] Method Chaining (메서드 체인) (0) | 2022.04.12 |