객체
1. 객체(Object)
- 프로그램 : 데이터(값) + 기능
- 프로그램 : 변수(variable) + 함수(function)
- 변수 : 데이터(값)를 저장
- 객체 : 데이터(변수) + 기능(함수)
- 객체 : 속성(property) + 메서드(method)
2. JavaScript 객체
- 배열과 비슷하게 값을 여러 개 가지고 있는 자료형
- 배열(array)은 인덱스(index)로 각 원소(item)에 접근하지만
- 객체(object)는 키(key)로 각 속성(property)에 접근
- 객체의 속성에는 모든 자료형이 가능
- 객체의 속성 중 자료형이 함수인 속성은 메서드(method)라고 함
| 배열(array) | 원소(item) | 인덱스(index) | 데이터 |
| 객체(object) | 속성(property) | 키(key) | 데이터와 동작 |
1) 객체(object) : 저장 공간과 함수의 집합
- 특정 대상을 표현하기 위한 여러 값들과 이 값들을 사용하는 기능들의 집합
- 객체 리터럴({})을 이용해서 생성할 수 있다.
2) 객체의 속성(property) : 객체에서 값을 저장하는 저장 공간(변수)
- 객체의 속성에 접근할 때는 키(key)를 사용한다.
3) 객체의 메서드(method) : 객체의 속성 중 함수를 저장하고 있는 속성
- 객체에서 속성에 저장되어 있는 값들을 활용하는 함수
객체의 예시
<script>
var object = {
// 속성(property)
"firstName": "Michael", // 객체의 키는 문자열로 지정한다. // 속성을 나열할때는 콤마(,)로 연결한다
lastName: "Jackson", // 또는 큰따옴표를 생략하고 식별자(?)로 지정할 수도 있다
// 메서드(method): 객체의 속성 중 함수를 저장하고 있는 속성
printName: function () {
// this 키워드: 객체의 메서드에서 객체를 나타내는 키워드
document.writeln("My name is " + this.firstName + " " + this.lastName);
// → document.writeln("My name is " + object.firstName + " " + object.lastName);
}
}; // 객체의 리터럴 끝에는 세미콜론(;)을 붙인다
// "출력" 방법(1)
document.writeln("My name is " + object["firstName"] + " " + object["lastName"]);
// "출력" 방법(2)
document.writeln("My name is " + object.firstName + " " + object.lastName);
// 속성 접근 연산자(.)
// → 객체의 속성에 접근할 때 사용하는 연산자
// 첫 번째 피연산자는 객체, 두 번째 피연산자는 속성(property)
// 객체의 메서드 "호출"
object.printName();
object["printName"]();
// 객체의 속성에 새로운 값을 대입
object.firstName = "Alex";
object.printName();
// 생성되어 있는 객체에 속성 추가
object.age = 31;
// 생성되어 있는 객체에 메서드 추가
object.getAge = function () { return this.age; };
document.writeln("jackson.getAge() = " + object.getAge());
document.writeln("jackson.age = " + object.age);
document.writeln("jackson.getAge = " + object.getAge);
</script>
연습문제
다음 내용을 포함하는 JavaScript 프로그램을 작성하라.
- 직사각형을 표현하는 객체를 생성
- 객체에 넓이를 계산하는 메서드와 지름을 계산하는 메서드를 추가
- 생성한 객체의 넓이와 지름을 출력
<script>
var rect = {
width: 13,
height: 8,
getArea: function () {
return this.width * this.height;
}
};
document.writeln("Area = " + rect.getArea());
// document.writeln("Area = " + rect.width * rect.height);
rect.getPerimeter = function () { return (this.width + this.height) * 2; }
document.writeln("Perimeter = " + rect.getPerimeter());
</script>
