1.객체의 소개와 문법
배열은 아이템에 대한 식별자로 숫자를 사용했다. 데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서
추가된 데이터에 대한 식별자가 된다. 이 인덱스를 이용해서 데이터를 가져오게 되는 것이다. 만약 인덱스로 문자를 사용하고 싶다면
객체(dictionary)를 사용해야 한다. 다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.
( 객체= 연관 되어 있는 그릇을 말한다 배열과 유사한 역할 을 한다 )
하지만 배열 과의 차의 점이 있다 위에서 말한것 처럼 인덱스의 값을 배열을 숫자 ,객체는 문자를 넣어 준다
객체의= 생성
빨간 부분은 인덱스 부분 파란 부분은 값이다
grades
{egoing: 10, k8805: 6, sorialgi: 80}//객체object타입이라는 것을 알수 있다
2.객체와 반복문
배열은 저장된 데이터 들의 순서를 가지고 있다(추가된 데이터도 중요 ) 하지만 객체는 순서가 없다 .
다만 key와 value가있다 . 이것들이 객체에 저장되지만 순서가 없다
//key값을 받고 싶을 때
for in문
for(key in grades) {
console.log(key);
}
egoing
k8805
sorialgi
//value값을 받고 싶을 때
for(key in grades) {
console.log(grades[key]);//grades에 대한 key값을 받아 올 수 있다
}
10
6
80
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {// 앞쪽은 키 값 뒤에 value넣어준다
//여기서 key는 grades 가 갖고 있는 key값이 된다 /반복문에 대한 key변수
document.write("key : "+key+" value : "+grades[key]+"<br />");
}
결과는 아래와 같다.
key : egoing value : 10
key : k8805 value : 6
key : sorialgi value : 80
for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name에 담아서 반복문을 실행한다. 반복문이 실행될 때 변수 key의 값으로 egoing, k8805, sorialgi가 순차적으로 할당되기 때문에 grades[key]를 통해서 객체의 값을 알아낼 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <!-- html 어떤 항목을 출력 할 때는 LIST라는 형태의 태그를 사용한다 --> <!-- '목록식을 확인할 수 있다 ' --> <!-- <UL> <LI>egoing</LI> <LI>k8805</LI> <LI>sorialgi</LI> </UL> --> <script type="text/javascript"> var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; for(key in grades) { document.write("<LI> key : "+key+" value : "+grades[key]+"</LI>"); } </script> </body> </html> | cs |
객체에는 객체를 담을수도 있고, 함수도 담을 수 있다.
3.객체지향 프로그래밍
객체안에 담길수 있는 값은 무엇인가 에 대해서 알 아보자
var grades = {
'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
'show' : function(){
for(var name in this.list){
document.write(name+':'+this.list[name]+"<br />");
}
}
};
grades.show();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <script type="text/javascript"> //grades 변수안에 LIST 라는 키안에 담겨있는 값은 또다른 객체이다 //grades 는 list와show(데이터와 함수 )를 그룹핑한 그릇이라 할 수 있다 // 이러한 것을 객체 지향 프로 그램이라고 한다 'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80}, 'show' : function(){//값을로서의 함수 저장 alert(this.list);// 객체가 가르키는 list의 값을 말한다 for(var name in this.list){ console.log(name,this.list[name]); document.write(name+':'+this.list[name]+"<br />"); } } // 객체안에는 함수가 들 어갈 수 있는데 그이유는 함수도 변수에 저장될 수 있기 때문 alert(grades['show']());//객체 안에 함수 호출하는 것 //grades.show());//위와 같은 결과를 갖고 온다 객체에 소속된 함수 호출 //alert(grades['list']['egoing']) /*['list']={'egoing': 10, 'k8805': 6, 'sorialgi': 80} ['egoing']=10*/ //this=약속 되어 있는 변수이다 함수가 속해 있는 객체를 가르킨다 /*var grades = { 'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80}, 'show' : function(){ for(var name in this.list){ document.write(name+':'+this.list[name]+"<br />"); } } };*/ grades.show(); </script> </body> </html> | cs |
이것은 자바스크립트를 이용한 객체 지향 프로그래밍 기법의 핵심이 되는 성질로 취지에 따라서 로직을 객체에 그룹핑해서 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다.
객체 지향에 대해서는 뒤에서 자세히 살펴본다.
'생활코딩 JavaScript' 카테고리의 다른 글
| UI와 API 그리고 문서보는 법1.UI와 API 소개 2.문서보는법 (0) | 2018.11.26 |
|---|---|
| 모듈 1.모듈이란? 2.모듈화 3.Node.js 4.라이브러리 5.라이브러리사용하기 (2) | 2018.11.25 |
| 배열-1.배열의 문법 2.배열의 효용성 3.배열의 사용-배열과 반복문 4.배열의 조작-추가 5.배열의 조작-제거 ,정렬 (0) | 2018.11.19 |
| 함수-1함수란? 2.함수의 효용성 3.함수 입력4.함수쳘력5.다양한 함수 (0) | 2018.11.18 |
| 반복문-1.반복문의 기본문법-while 2.반복조건 3.for문 4.반복문의 효용성 5.반복문의 제어 6.반복문의 중첩사용과 디버거 (0) | 2018.11.17 |
