객체 - WEB2 - JavaScript (opentutorials.org)
객체 - WEB2 - JavaScript
객체 2017-11-28 23:32:58 객체의 쓰기와 읽기 변경사항 객체와 반복문 변경사항 프로퍼티와 메소드 변경사항
opentutorials.org
1.객체의 쓰기와읽기 / 2.객체와반복문 / 3.프로퍼티와메소드
객체의 쓰기와 읽기
배열(array) - 정보를 담는 그릇이면서, 순서대로 정보가 저장된다.
예) var coworkers = ['egoing', 'leezche']
coworkers[0]
→ egoing
coworkers[1]
→ leezche
그러면 반대로, 순서없이 정보가 저장되는 것은? : 객체
객체 - 이름이 있는 정리정돈 상자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Object</h1>
<h2>Create</h2>
<script>
var coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
document.write("programmer : "+coworkers.programmer+"<br>");
document.write("designer : "+coworkers.designer+"<br>");
coworkers.bookkeeper = "duru";
document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
coworkers["data scientist"] = "taeho";
document.write("data scientist : "+coworkers["data scientist"]+"<br>");
</script>
</body>
</html>* 배열을 [ ] 대괄호, 객체는 { }중괄호
* . = objects acess operator
객체를 만드는 방법 ↓
var coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
만들어져있는 객체에서 데이터를 가져오는 방법 ↓
document.write("programmer : "+coworkers.programmer+"<br>");
document.write("designer : "+coworkers.designer+"<br>");
객체를 추가하는 방법 ↓
coworkers.bookkeeper = "duru";
document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
+
coworkers.data scientist = "teaho";를 입력해야 할 경우,
data scientist 사이에 띄어쓰기 때문에 문법적으로 맞지 않는다.
이름에는 공백을 넣을 수 없어 .을 통해서는 할 수는 없고, 배열에서 어떤 정보를 가져올 때 [] 인덱스를 쓰는 것 처럼,
coworkers["data scientist"] = "taeho"; 이렇게 가져오면 알맞게 출력된다.
객체와 반복문
배열에선 반복문으로 데이터를 다 가져왔던 것 처럼, 객체에서는?
JavaScript object iterate (객체에서 반복적으로 가져오는 것) 검색
*iterate - 반복하다
<h2>Create</h2>
coworkers["data scientist"] = "taeho";
document.write("data scientist : "+coworkers["data scientist"]+"<br>");
</script>
<h2>Iterate</h2>
<script>
for(var key in coworkers) {
document.write(key+' : '+coworkers[key]+'<br>');
}
</script>
</body>
</html>for(var key in coworkers) { }
for 라고 하는 것을 쓰면 coworkers 라는 변수가 가르키는 객체에 있는 key 값들을 가져오는 반복문이다.
key값 : programmer , designer, programmer, data scientist 이다.
즉 key 라고하는 것은 가져오고 싶은 정보에 도달할 수 있는 열쇠다.
*배열에서는 index라고 하는데, 객체에서는 key.
for(var key in coworkers) {
document.write(key+'<br>'); }
출력 ↓
programmer
designer
bookkeeper
data scientist
for(var key in coworkers) {
document.write(coworkers[key]+'<br>'); }
출력 ↓
egoing
leezche
duru
teaho
document.write(key+' : '+coworkers[key]+'<br>');
출력 ↓
programmer:egoing
designer:leezche
bookkeeper:duru
data scientist:teaho
프로퍼티와 메소드
객체에는 어떤 데이터든 담을 수 있다, 함수도 담을 수 있다.
<h2>Iterate</h2>
document.write(key+' : '+coworkers[key]+'<br>');
}
</script>
<h2>Property & Method</h2>
<script>
coworkers.showAll = function(){
for(var key in this) {
document.write(key+' : '+this[key]+'<br>');
}
}
coworkers.showAll();
</script>
</body>
</html>ㅇ 객체에는 이름이든 숫자든 뭐든 넣을 수 있으며, 함수도 담을 수 있다.
1. 객체에 소속된 변수의 값으로 함수를 지정할 수 있고.
2. 객체에 소속된 함수를 만들 수 있다. → 객체에 소속된 함수는 '메소드 = Method'라고 한다. (예시에서 .showAll() 을 가르킴)
3. 객체에 소속된 변수는 변수라고 하지않고 '프로퍼티 = Property' 라고한다. (예시에서 programmer 을 가르킴)
coworkers.showAll = function(){
for(var key in this) {
document.write(key+' : '+this[key]+'<br>');
}
}
coworkers.showAll();
showAll()이라는 함수안에서 이 함수가 소속된 객체를 가르키는 약속된 기호 = this
coworkers.showAll = function(){}
=
var showAll = function(){}
=
function showAll(){}
'STUDY > JavaScript' 카테고리의 다른 글
| [JavaScript-생활코딩] 27. 파일로 쪼개서 정리 정돈하기 (0) | 2022.06.01 |
|---|---|
| [JavaScript-생활코딩] 26. 객체 활용 (0) | 2022.06.01 |
| [JavaScript-생활코딩] 24. 객체예고 (0) | 2022.06.01 |
| [JavaScript-생활코딩] 23. 함수의 활용 (0) | 2022.06.01 |
| [JavaScript-생활코딩] 22. 함수 (0) | 2022.06.01 |