학습 출처 : JavaScript 객체 기본 - Web 개발 학습하기 | MDN (mozilla.org)
객체
객체 선언 및 사용
자바스크립트에서는 map을 객체라고 표현을 한다
객체는 {}를 사용해서 생성하고,
{} 중괄호 안에 객체에 필요한 속성들을 정의한다
객체를 파일로 저장할 때 확장자를 .json으로 설정한다
json 형식이라고 표현하기도 한다
변수 = {
속성명 : 속성값,
속성명 : 속성값,
속성명 : 속성값,
...
};
객체란 여러 가지의 속성을 가지고 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이다
key / value / Pair를 저장할 수 있다
객체 특징 :
객체는 많은 값이 포함될 수 있는 변수이다
객체는 중괄호를 통해서 만들 수 있다
객체의 종류 :
배열/함수/날짜
new 키워드로 정의가 된 경우 Boolean과 숫자, 문자열은 객체가 될 수 있다
객체 선언
const product = {
속성명[key] : 속성값[속성값]
"name": "망고",
"price": "필리핀",
"size":{"width":10, "height":15}
"etc":[1,2,3],
"product number": 100,
"aaa!!":"테스트값"
}
product 변수의 값을 #area1 영역에 출력
const area1 = document.getElementById("area1");
area1.innerHTML = "product : " + product + "<br>";
area1.innerHTML += "<b> 객체['속성명']으로 접근하기</b><br>";
area1.innerHTML += "제품명 : " + product['name'] + "<br>";
area1.innerHTML += "가격 : " + product['price'] + "<br>";
area1.innerHTML += "원산지 : " + product['madeIn'] + "<br>";
area1.innerHTML += "size : " + product['size']['width'] + "<br>";
area1.innerHTML += "기타 : " + product['etc'][0] + "<br>";
area1.innerHTML += "제품번호 : " + product['product number']+ "<br>";
area1.innerHTML += "테스트 : " + product['aaa!!'] + "<br>";
2) 연결(접근)연산자(.)를 사용하여 접근 : 객체.속성명(key) => 속성값(value)
area1.innerHTML += "<b>객체.속성명 으로 접근하기 </b> <br>";
area1.innerHTML += "제품명1 : " + product.name + "<br>";
area1.innerHTML += "가격1 : " + product.price + "<br>";
area1.innerHTML += "원산지1 : " + product.madeIn + "<br>";
area1.innerHTML += "size : " + product.size.height + "<br>";
area1.innerHTML += "기타 : " + product.etc[0] + "<br>";
area1.innerHTML += "size : " + product.' + "<br>";
속성명에 띄어쓰기(공백)또는 특수문자가 포함된 경우는 문자열로 묶어줘야함
=> 접근 연산자로 사용하여 접근할 수 없다 대괄호를 사용하여 접근해야한다
속성명에 띄어쓰기(공백) 또는 특수문자가 포함된 경우는
문자열로 묶어줘야한다
=> 접근 연산자로 사용하여 접근할 수 없다
대괄호를 사용하여 접근해야한다.
// for(let value of person){ 오류 발생
of 사용 시 오류가 발생한다.
for(let key in person){
area2.innerHTML += key + ", " + person[key] + "<br>";
}
-->key 이름의 속성명을 찾는다.
객체의 함수
객체의 함수(메소드) 속성
: 객체의 속성 중 함수 자료형인 속성을 메소드라고 한다
메소드 선언
name: '바빔이',
kind: '믹스견',
eat: function(food){
}
<p>
* in : 객체 내에 해당 속성이 있는 지 확인해주는 키워드 <br>
(true : 존재하는 속성, false : 존재하지 않는 속성)
</p>
in : 객체 내에 해당하는 속성이 있는지 확인해주는 키워드
true, false를 반환해준다
IN 사용 예시 )
area4.innerHTML += "name 이라는 속성이 있는지...?" + ('name' in student);
area4.innerHTML += "age 이라는 속성이 있는지...?" + ('age' in student);
<p>
* with : 객체의 속성 접근 시 객체 별로 속성을 제시하는 것을
생략할 수 있게 해주는 키워드(코드를 간결하게 도와줌..!)
</p>
<script>
function test4(){
// 입력 요소에 입력된 값들을 각 속성에 저장
const student = {
// input 요소니까. value
name : document.getElementById("name").value,
kor : parseInt(document.getElementById("kor").value),
math : parseInt(document.getElementById("math").value),
eng : parseInt(document.getElementById("eng").value),
toString: function(){
return this.name + " : " + this.kor + ", " + this.math + ", " + this.eng;
},
getsum: function(){
return this.kor + this.math + this.eng;
},
getavg: function() {
return this.getsum() /3;
}
};
// 값이 입력되지 않은 경우 parseInt()의 경우 NaN이라는 결과를 반환해주고
// number()의 경우 0이라는 결과를 반환해준다!
console.log(student);
const area4 = document.getElementById("area4");
area4.innerHTML = "학생 정보 : " + student + "<br>"
area4.innerHTML += "name 이라는 속성이 있는지...?" + ('name' in student);
area4.innerHTML += "age 이라는 속성이 있는지...?" + ('age' in student);
with(student){
// student.name 또는 student['name']
area4.innerHTML += "이름 : " + name + "<br>";
area4.innerHTML += "국어 점수 : " + kor + "<br>";
area4.innerHTML += "수학 점수 : " + math + "<br>";
area4.innerHTML += "영어점수 : " + eng + "<br>";
area4.innerHTML += "총점 : " + getsum() + "<br>";
area4.innerHTML += "평균 : " + getavg() + "<br>";
}
}
</script>
parseInt :
사용자가 입력하는 값은 항상 문자열로 반환되기 때문에,
숫자로 연산이나 비교를 하려면 이를 정수로 변환해야한다.
student 객체 속성명으로
함수를 넣었다
getsum, getavg
getsum: function(){
return this.kor + this.math + this.eng;
},
getavg: function() {
return this.getsum() /3;
}
with(객체명) :
with(student){
// student.name 또는 student['name']
area4.innerHTML += "이름 : " + name + "<br>";
area4.innerHTML += "국어 점수 : " + kor + "<br>";
area4.innerHTML += "수학 점수 : " + math + "<br>";
area4.innerHTML += "영어점수 : " + eng + "<br>";
area4.innerHTML += "총점 : " + getsum() + "<br>";
area4.innerHTML += "평균 : " + getavg() + "<br>";
}
객체의 속성 접근 시 객체 별로 속성을 제시하는 것을
생략할 수 있게 해주는 키워드이다
객체의 속성 추가 / 삭제 :
student[객체명].name[속성명] = "[속성값]";
// 객체 속성 제거
student.hobby = null;
console.log(student);
// 속성자체가 삭제된다
delete(student.hobby);
console.log(student);
delete(student.hobby);
속성 자체가 삭제된다.