개발/Front-end
[JavaScript] 객체
하더
2022. 10. 31. 18:34
* 자바스크립트의 배열 - 자바의 ArrayList와 비슷
* 자바스크립트의 객체 - 자바의 HashMap과 비슷한 개념
< 자바스크립트 객체 >
- key(속성) + value(속성값)를 한 쌍으로 저장할 수 있는 구조
- 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입
- 중괄호 { } 를 사용하여 생성
- 속성값으로는 모든 자료형을 담을 수 있음
[ 표현법 ]
var 변수명 = {
속성명: 속성값,
속성명: 속성값,
...
}
// 배열
var arr = ['크루아상', 2000, '식사', ['밀가루', '버터'], '뚜레쥬르'];
// 객체
var product = {
pName : '크루아상',
price : 2000,
kind : '식사',
'material' : ['밀가루', '버터'],
company : '뚜레쥬르'
};
< 객체에 속성 추가 / 제거 >
- 추가 방법 : 객체명.속성명 = 속성값(함수 가능)
- 속성명이 중복되면 속성값이 덮어씌워짐
- 삭제 방법 : delete(객체명.속성명)
< 객체의 각 속성에 접근하는 방법 >
1. .을 이용하는 방법 (객체명.속성명)
- 속성명에 직접 접근하는 개념
- 속성명에 공백이나 특수문자가 포함될 경우 해당 방법으로 접근이 불가능
area1.innerHTML += '<b>방법1. 객체명.속성명으로 접근하기 </b><br>';
area1.innerHTML += 'product.pName : ' + product.pName + '<br>';
area1.innerHTML += 'product.price : ' + product.price + '<br>';
area1.innerHTML += 'product.kind : ' + product.kind + '<br>';
area1.innerHTML += 'product.material : ' + product.material + '<br>';
area1.innerHTML += 'product.material[0] : ' + product.material[0] + '<br>';
area1.innerHTML += 'product.material[1] : ' + product.material[1] + '<br>';
area1.innerHTML += 'product.company : ' + product.company + '<br>';
2. 대괄호를 이용하는 방법 (객체명['속성명'])
area1.innerHTML += '<b>방법 2. 객체명["속성명"]으로 접근하기 </b><br>';
area1.innerHTML += 'product["pName"] : ' + product['pName'] + '<br>';
area1.innerHTML += 'product["price"] : ' + product['price'] + '<br>';
area1.innerHTML += 'product["kind"] : ' + product['kind'] + '<br>';
area1.innerHTML += 'product["material"] : ' + product['material'] + '<br>';
area1.innerHTML += 'product["material"][0] : ' + product['material'][0] + '<br>';
area1.innerHTML += 'product["material"][1] : ' + product['material'][1] + '<br>';
area1.innerHTML += 'product["company"] : ' + product['company'] + '<br>';
< 객체의 반복문 >
- 객체는 인덱스 개념이 없어 단순 for문은 사용 불가
- for in 문 사용 가능 : 객체가 가지고 있는 모든 속성들에 순차적으로 접근하고자 할 때 사용 가능
var game = {
title : '스타크래프트',
price : 15000,
language : '한국어',
supportOS : ['windows64', 'MAC'],
service : true
};
for(var key in game){
// . 을통한 방법 => 객체명.속성명 => 사용불가
// area3.innerHTML += key + ':' + game.key + '<br>';
// 대괄호를 이용한 방법 = > 객체명['속성명'] => 사용 가능
area3.innerHTML += key + ' : ' + game[key] + '<br>';
};
< 객체의 메소드 >
- 객체의 속성 중 함수자료형인 속성을 '메소드'라고 함
- 메소드 속성 안에서 같은 객체 내의 속성을 호출할 경우 'this.'을 앞에 붙여 표시
속성명과 변수명이 동일한 경우, this.을 안붙이면 변수가 호출됨
var name = '행복이';
var dog = {
name : '충만이',
kind : '진돗개',
eat : function(food){ // 이 경우 속성명이 function의 이름이 되므로 익명함수로 작성
area4.innerHTML += this.kind + '종류인 ' + name + '가(이) ' + food + '(을)를 먹고있어요. <br>';
// this.kind - 속성 호출 / name - this.없으므로 변수 호출 / food - 전달된 매개변수
}
};
dog.eat('밥');=> 결과 : 진돗개종류인 행복이가(이) 밥(을)를 먹고있어요.
< in / with >
> in
- 객체 내에 해당 속성이 있는지 확인해주는 키워드
- 있으면 true, 없으면 false를 반환
[ 표현법 ]
'속성명' in 객체명
> with
- 해당 객체의 속성에 반복해서 접근하고 싶을 때 사용
- 속성에 접근하는 코드를 줄여서 표현할 수 있음
[ 표현법 ]
with(객체명) {
속성명만으로 접근이 가능
}
이름 : <input type="text" id="name"> <br>
국어 : <input type="text" id="kor"> <br>
수학 : <input type="text" id="math"> <br>
영어 : <input type="text" id="eng"> <br>
<button onclick="test5();">실행확인</button>
<div id="area5" class="area big"></div>
<script>
function test5(){
var name = document.getElementById('name').value;
var kor = Number(document.getElementById('kor').value);
var math = Number(document.getElementById('math').value);
var eng = Number(document.getElementById('eng').value);
var student = {
name : name,
kor : kor,
math : math,
eng : eng,
getSum : function(){
return this.kor + this.math + this.eng;
},
getAvg : function(){
return this.getSum() / 3;
},
toString : function(){
return this.name + ',' + this.kor + ',' + this.math + ',' + this.eng;
}
};
var arr = [1, 2, 3];
var area5 = document.getElementById('area5');
area5.innerHTML += 'student : ' + student.toString() + '<br>';
area5.innerHTML += 'arr : ' + arr.toString() + '<br>';
// 해당 객체에 해당 속성이 존재하나?? => '속성명' in 객체명 : 있으면 true 없으면 false
area5.innerHTML += 'student에 name속성이 존재하나 ? : ' + ('name' in student) + '<br>';
area5.innerHTML += 'student에 kor속성이 존재하나 ? : ' + ('kor' in student) + '<br>';
area5.innerHTML += 'student에 math속성이 존재하나 ? : ' + ('math' in student) + '<br>';
area5.innerHTML += 'student에 eng속성이 존재하나 ? : ' + ('eng' in student) + '<br>';
area5.innerHTML += 'student에 test속성이 존재하나 ? : ' + ('test' in student) + '<br>';
area5.innerHTML += 'student.name' + student.name + '<br>';
area5.innerHTML += 'student.kor' + student.kor + '<br>';
// 해당 객체의 속성에 반복해서 접근하고 싶다 => with(객체명){속성명으로만 접근}
with(student){
area5.innerHTML += '학생이름 : ' + name + '<br>';
area5.innerHTML += '국어점수 : ' + kor + '<br>';
area5.innerHTML += '수학점수 : ' + math + '<br>';
area5.innerHTML += '영어점수 : ' + eng + '<br>';
area5.innerHTML += 'toString : ' + toString() + '<br>';
area5.innerHTML += 'getSum : ' + getSum() + '<br>';
area5.innerHTML += 'getAvg : ' + getAvg() + '<br>';
};
}
</script>