반응형
객체란?
배열은 아이템에 대한 식별자로 숫자를 사용했다면 객체란 문자를 사용하고 싶을때 사용한다. 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 되는데 이 인덱스를 이용하해서 데이터를 가져오게 되는데 이때 객체로 인덷스를 문자로 사용한다.
객체의 생성
var grades = {'kim': 10, 'jin': 6, 'seok': 80};
- 'kim'은 key가 되고, 10은 value가 된다.
var grades = {};
grades['kim'] = 10;
grades[jin'] = 6;
grades['seok'] = 80;var grades = new Object();
grades['kim'] = 10;
grades['jin'] = 6;
grades['seok'] = 80;
- 객체를 만드는 방법은 위의 코드들처럼 여러가지이다.
var grades = {'kim': 10, 'jin': 6, 'seok': 80};
alert(grades['seok']);
- 객체에서 필요한 값을 가져오기 위해 'seok'이라는 이름(key)으로 저장된 값을 가져오는 법이다. 결과는 80이다.
var grades = {'kim': 10, 'jin': 6, 'seok': 80};
alert(grades.seok);
- 이런 방법으로도 객체의 필요한 값을 가져올 수 있다.
객체 데이터의 반복작업
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var grades = {'kim': 10, 'jin': 6, 'seok': 80};
for(key in grades) {
document.write("key : "+key+" value : "+grades[key]+"<br />");
}
</script>
</body>
</html>
- for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name에 담아서 반복문을 실행한다.
- 반복문이 실행될 때 변수 +key+의 값으로 kim, jin, seok가 순차적으로 할당되기 때문에 따로 +grades[key]+를 통해서 객체의 value 값을 알아낼 수 있다.
객체로 객체와 함수 담기(객체 지향 프로그래밍)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var grades = {
'list': {'kim': 10, 'jin': 6, 'seok': 80},
'show' : function(){
for(var name in this.list){
document.write(name+':'+this.list[name]+"<br />");
}
}
};
grades.show();
</script>
</body>
</html>
- grades 객체안에 'show'는 함수를 담게 하였고 'list'에는 또 하나의 객체를 담게 하였다.
- 'show'안에 있는 function() 함수의 for문과 in을 사용하여 this.list을 적어주어 'list'의 key값을 변수 name을 담도록 하였다.
- 여기서 this는 'show'의 function() 함수가 속해있는 grades 객체를 가리키는 약속되어진 변수이다.
- for문 안의 name은 in과 this 변수를 사용하여 담아준 list에 담은 객체의 key값이고, 또 this.list[name]은 list안의 객체의 value 값을 담고 있는 것으로 볼 수 있다.
- 마지막으로 grades.show();을 적어주어 grades 객체 안에 있는 'show', 바로 그 안에 들어있는 function() 함수를 호출하도록 해준다.
- grades 객체 안에 'list'와 'show'을 그룹화한 것처럼 이렇게 한 그릇에 하나의 그룹을 이루게 하는 방식을 "객체 지향 프로그래밍"이라고 불리고 있다.
반응형
'프로그래밍 개발 > JS 기본 언어' 카테고리의 다른 글
| Javascript API 기본과 언어 문서 (0) | 2020.11.09 |
|---|---|
| Javascript 모듈(module)에 대하여 (0) | 2020.11.06 |
| Javascript 배열(array) (0) | 2020.11.06 |
| Javascript 함수(Function) (0) | 2020.11.05 |
| javascript 반복문(Loop) (0) | 2020.11.05 |
댓글