1. 객체 개요
- 객체는 키(식별자 또는 문자열)와 값(속성)으로 이루어 짐
- { } 중괄호로 객체 생성
- 객체의 속성 값에 접근할 때 키로 접근
- 객체의 키로 식별자가 아닌 문자를 사용했을 때는 무조건 대괄호를 사용하여 접근
<!-- object.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>object</title>
<script type="text/javascript">
var phone = {
name: 'iPhone 5S',
manufacturer: 'apple',
};
alert('phone.name : ' + phone.name + "\n" + 'phone.manufacturer : ' + phone.manufacturer);
</script>
</head>
<body>
</body>
</html>
2. 속성과 메서드
- 속성(property) : 객체 내부에 있는 값
- 객체 속성은 모든 형태의 자료형을 가질 수 있음
- 메서드(method) : 객체의 속성 중 함수 자료형인 속성
- 메서드 내에서 자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용
<!-- object2.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>object2</title> <script type="text/javascript"> var object = { number: 123, string: 'Gz', boolean: true, array: [12, 34], method: function() {} }; alert( 'object.number : ' + typeof(object.number) + "\n" + 'object.string : ' + typeof(object.string) + "\n" + 'object.boolean : ' + typeof(object.boolean) + "\n" + 'object.array : ' + typeof(object.array) + "\n" + 'object.method : ' + typeof(object.method) ); var exercise = { name: 'Gz', play: function(sports) { alert(this.name + '이(가) ' + sports + ' 을(를) 합니다.'); } }; exercise.play('축구'); </script> </head> <body> </body> </html>
3. 객체와 반복문
- 객체의 속성을 사용하기 위해서 for in 반복문을 사용
- for in 반복문에 객체를 넣으면 객체의 속성 개수 만큼 반복문을 실행
<!-- object3.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>object3</title>
<script type="text/javascript">
var phone = {
name: 'iPhone 5S',
manufacturer: 'apple',
price: 540000
};
var output = '';
for (var i in phone) {
output += '* ' + i + ' : ' + phone[i] + '\n';
}
alert(output);
</script>
</head>
<body>
</body>
</html>
4. 객체 관련 키워드
- in 키워드와 with 키워드
4.1. in 키워드
- for 키워드와 별도로 사용하면 객체 안에 해당 키의 존재 여부를 확인 가능
- 키가 존재하면 true를 리턴
<!-- object4.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>object4</title>
<script type="text/javascript">
var output = '';
var student = {
name: 'Gz',
kor: 99,
eng: 88,
math: 77
};
output += "'name' in student: " + ('name' in student) + '\n';
output += "'gender' in student: " + ('gender' in student) ;
alert(output);
</script>
</head>
<body>
</body>
</html>
4.2. with키워드
- 복잡하게 사용해야 하는 코드를 짧게 줄여줌
- with 키워드를 사용하는 객체의 속성이름과 외부 변수의 이름이 같으면 객체의 속성을 우선
<!-- object6.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var student = {
name: 'Gz',
kor: 99,
eng: 88,
math: 77
};
var output = '';
/*
output += 'name : ' + student.name + '\n';
output += 'kor : ' + student.kor + '\n';
output += 'eng : ' + student.eng + '\n';
output += 'math : ' + student.math + '\n';
output += '총점 : ' + (student.kor + student.eng + student.math);
*/
with (student) {
output += 'name : ' + name + '\n';
output += 'kor : ' + kor + '\n';
output += 'eng : ' + eng + '\n';
output += 'math : ' + math + '\n';
output += '총점 : ' + (kor + eng + math);
}
alert(output);
</script>
<title>object6</title>
</head>
<body>
</body>
</html>
5. 객체의 속성 추가와 제거
- 객체의 속성을 동적으로 추가하거나 제거
5.1. 속성 추가
<!-- object6.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>object6</title>
<script type="text/javascript">
var student = {};
student.name = 'Gz';
student.kor = 99;
student.eng = 88;
student.math = 77;
student.toString = function() {
var output = '';
for (var i in this) {
if (i != 'toString') {
output += i + ' : ' + this[i] + '\n';
} // if
} // for
return output;
};
alert(student.toString());
</script>
</head>
<body>
</body>
</html>
5.2. 속성 제거
- 동적으로 객체의 속성을 제거할 때는 delete 키워드를 사용
- delete 키워드 뒤에 삭제 할 객체의 속성을 입력
<!-- object7.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>object7</title>
<script type="text/javascript">
var student = {};
student.name = 'Gz';
student.kor = 99;
student.eng = 88;
student.math = 77;
student.toString = function() {
var output = '';
for (var i in this) {
if (i != 'toString') {
output += i + ' : ' + this[i] + '\n';
} // if
} // for
return output;
};
delete (student.math);
alert(student.toString());
</script>
</head>
<body>
</body>
</html>
6. 객체와 배열을 사용한 데이터 관리
<!-- object8.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>object8</title> <script type="text/javascript"> var student = []; student.push({name: 'student1', kor: 99, math: 99, eng: 99}); student.push({name: 'student2', kor: 88, math: 88, eng: 88}); student.push({name: 'student3', kor: 77, math: 77, eng: 77}); student.push({name: 'student4', kor: 66, math: 66, eng: 66}); student.push({name: 'student5', kor: 55, math: 55, eng: 55}); student.push({name: 'student6', kor: 44, math: 44, eng: 44}); for (var i in student) { student[i].getSum = function() { return this.kor + this.math + this.eng; } student[i].getAvg = function() { return this.getSum() / 4; } } var output = 'name ---------- sum ---------- avg\n'; for (var i in student) { with (student[i]) { output += name +' ---------- ' + getSum() + ' ---------- ' + getAvg() + '\n'; } } alert(output); </script> </head> <body> </body> </html>
'Web > JavaScript' 카테고리의 다른 글
| 자바스크립트(JavaScript) 메서드 체이닝(Method Chaining) (0) | 2013.11.18 |
|---|---|
| 자바스크립트(JavaScript) 생성자 함수(constructor) (4) | 2013.11.18 |
| 자바스크립트(JavaScript) 내장 함수 (0) | 2013.11.14 |
| 자바스크립트(JavaScript) for in 반복문 (0) | 2013.11.14 |
| 자바스크립트(JavaScript) 자료형 변환 - Number() 함수, String() 함수, Boolean() 함수 (0) | 2013.11.13 |