1. 객체 선언 및 사용
객체는 중괄호 {} 를 사용해서 생성하고, 중괄호 안에는 객체에 필요한 속성(property)들을 정의함
속성명 : 속성값 의 형태로 정의 (키: 밸류)
속성값으로는 모든 자료형의 값을 담을 수 있음
변수 = {
속성명:속성값,
속성명:속성값,
..
};
- 객체 속성에 접근하는 방법
1) 대괄호 이용하는 방법 : 객체명["속성명"]
2) . 을 이용하는 방법 : 객체명. 속성명
<script>
function test1(){
const product = {
pName:"Dry Mango",
price:4000,
kind : "pickle",
ingredient : ["mango","sugar"]
};
//자바스크립트에서 객체 == 자바에서의 컬렉션(HashMap)
const divEl = document.getElementById("area1");
divEl.innerHTML = "product : "+ product +"<br>"; //자료형이 출력 (toString 정의해야 내용확인)
//객체의 속성에 접근하는 방법
//방법1. 대괄호 이용하는 방법 : 객체명["속성명"]
divEl.innerHTML += "<b>객체명['속성명']으로 접근하기</b><br>";
divEl.innerHTML += "pName : " + product["pName"] + "<br>";
divEl.innerHTML += "price : " + product["price"] + "<br>";
divEl.innerHTML += "kind : " + product["kind"] + "<br>";
divEl.innerHTML += "ingredient : " + product["ingredient"] + "<br>";
divEl.innerHTML += "ingredinet[0] : " + product["ingredient"][0] + "<br>";
//방법2. .을 이용하는 방법 : 객체명.속성명
divEl.innerHTML += "<b> 객체명.속성명 으로 접근하기 </b><br>";
divEl.innerHTML += "pName : " + product.pName + "<br>";
divEl.innerHTML += "price : " + product.price + "<br>";
divEl.innerHTML += "kind : " + product.kind + "<br>";
divEl.innerHTML += "ingredient : " + product.ingredient + "<br>";
divEl.innerHTML += "ingredient[1] : " + product.ingredient[1];
}
</script>
- 객체 생성시 특이 케이스
속성명에 공백이나 특수문자가 있을 경우 따옴표 안에 작성하여 문자열로 묶어주어야한다.
> 객체 속성에 접근할 경우 객체명.속성명 의 방법으로 접근 불가 > 객체명["속성명"]으로 접근해야함
<button onclick="test2();">실행확인</button>
<div id="area2" class="area small"></div>
<script>
function test2(){
const user = {
"user name" : "홍길동",
"age!!" : 20,
};
console.log(user);
const divEl = document.getElementById("area2");
//[]를 이용 => 객체명["속성명"]
divEl.innerHTML += "user name : " + user["user name"] + "<br>";
divEl.innerHTML += "age!! : " + user["age!!"] + "<br>"
}
</script>2. 객체에서의 반복문
객체가 가지고 있는 모든 속성들에 순차적으로 접근하고자 한다면 반복문 제시가능
단, 단순한 for loop 문으로는 불가 / for in문만 사용 가능함
for ( let 변수 in 객체명) { };
>> in뒤에 객체 제시시 반복문 돌 때 마다 해당 객체에 순차적으로 접근되는 속성명이 변수에 담김
<button onclick="test3()">실행확인</button>
<div id="area3" class="area small"></div>
<script>
function test3(){
const arr = ["김말똥",10,true];
const game = {
title: "오버워치",
price: 35000,
language : "한국어지원",
company : "블리자드"
};
const divEl = document.getElementById("area3");
for(let key in game){//변수 = 속성값(변수="title"-> 변수="price"..)
divEl.innerHTML += key + " : " + game[key] + "<br>";
};
}
</script>>> 반복문 안에서 객체의 속성에 접근할때 객체명["속성명"] 을 이용해서 접근해야함 ( 객체명.속성명 이용시 속성명을 하나의 문자열로 인식)
3. 객체의 메소드 속성
객체의 속성 중 함수 자료형인 속성을 메소드라고 부름
<button onclick="test4();">실행확인</button>
<div id="area4" class="area small"></div>
<script>
function test4(){
const divEl = document.getElementById("area4");
const name = "유한빛";
const dog = {
name : "까비",
kind : "요크셔테리어",
eat : function(food){ //객체내 함수자료형 - 메소드 속성
// kind 종류인 name 이가 xxx을 먹고있어요
// 메소드내에서 같은 객체내의 속성에 접근하고자 할 경우 this.붙여야됨
divEl.innerHTML += this.kind + "종류인 " + this.name +"가 "+ food +"를 먹고있어요.";
}
}
dog.eat("사료");
}
</script>
4. in 과 with 키워드
- in : 객체 내 해당 속성이 있는지 확인해주는 연산자 ( 존재하면 true , 아니면 false)
- with : 객체의 속성 접근시 객체명 제시하는 것을 생략할 수 있음 ( 코드 줄여주는 존재)
이름 : <input type="text" id="name"> <br>
국어 : <input type="number" id="kor"> <br>
수학 : <input type="number" id="math"> <br>
영어 : <input type="number" id="eng"> <br><br>
<button onclick="test5();">실행확인</button>
<div id="area5" class="area big"></div>
<script>
function test5(){
const student = {
name:document.getElementById("name").value,
kor:Number(document.getElementById("kor").value),
math:Number(document.getElementById("math").value),
eng:Number(document.getElementById("eng").value),
getSum:function(){
return this.kor + this.eng + this.eng;
},
getAvg:function(){
return this.getSum()/3;
},
toString:function(){ // 오버라이딩처럼 메소드로 정의
return this.name +" " + this.kor +" " + this.math + " " + this.eng;
}
};
console.log(student);
const divEl = document.getElementById("area5");
divEl.innerHTML += "student : " + student+ "<br>" //object
//"속성명" in 객체명 : 객체에 해당 속성이 있으면 true, 없으면 false반환
divEl.innerHTML += "name속성 있나 : " + ("name" in student) + "<br>"
divEl.innerHTML += "age속성 있나 : " + ("age" in student) + "<br>"
with(student){
divEl.innerHTML += "학생이름 : " + name + "<br>";
divEl.innerHTML += "국어점수 : " + kor + "<br>";
divEl.innerHTML += "수학점수 : " + math + "<br>";
divEl.innerHTML += "영어점수 : " + eng + "<br>";
divEl.innerHTML += "총점 : " + getSum() + "<br>";
divEl.innerHTML += "평균 : " + getAvg() + "<br>";
}
}
</script>국어 :
수학 :
영어 :
5. 객체의 속성 추가 및 제거
<button onclick="test6();">실행확인</button>
<div id="area6" class="area small"></div>
<script>
function test6(){
const student = {};// 빈 객체생성
// 객체에 속성 추가
student.name = "홍길동";
student.hobby = ["게임","음악감상"];
student.dream = "프로게이머";
student.age = 20;
student.dream = "프로그래머"; // 객체내에 중복된 속성 존재불가
student.toString = function(){
const str = "name : "+this.name + "<br>"
+ "hobby : "+this.hobby +"<br>"
+ "dream : "+this.dream + "<br>"
+ "age : "+this.age + "<br>";
return str;
}
const divEl = document.getElementById("area6");
divEl.innerHTML += student + "<hr>";
//객체의 속성 제거
delete(student.hobby);
divEl.innerHTML += student;
}
</script>'Front > JavaScript' 카테고리의 다른 글
| JavaScript 09. Window 객체 (0) | 2022.12.21 |
|---|---|
| JavaScript 08. 객체_ 2 (0) | 2022.12.20 |
| JavaScript 07. 함수 (0) | 2022.12.19 |
| JavaScript 06. 배열 (0) | 2022.12.19 |
| JavaScript 05. 문자열과 숫자 (0) | 2022.12.16 |