3.9.1) 사용자 정의 객체
그러면 바로 사용자 정의 객체를 생성해보자. 사람을 의미하는 Person을 정의하고 필드로 이름과 나이가 있다고 하자. JS에서는 객체를 만들기 위해 흥미롭게도 함수를 정의한다. 이때 객체를 만들기 위해 정의하는 함수를 생성자(constructor)라고 한다. 그러면 생성자를 만들고 이를 이용해 객체도 만들어보자.
|
constructor.htm |
|
// Person 객체를 만들기 위한 생성자를 정의합니다. function Person(name, age) { // this 키워드를 이용하여 필드를 초기화합니다. this.myName = name; this.myAge = age; }
function main() { // new 키워드와 생성자를 이용하여 Person 객체를 생성합니다. var person = new Person("Handy", 20);
// person 객체의 필드를 가져와 출력합니다. Log(person.myName); Log(person.myAge); } |
|
실행 결과 |
|
Handy 20 |
new 키워드를 이용하여 객체를 생성하고 객체의 멤버에 접근하는 단순한 예제다. Java나 C#과 같은 고급 언어를 공부한 사람은 익숙한 방식이지만, C++만 공부한 사람은 new로 생성한 객체의 멤버에 접근할 때 화살표 연산자(->)가 아닌 점 연산자(.)를 쓰는 것을 의아하게 느낄 수 있다. JS의 객체의 멤버에 접근할 때는 점 연산자만 사용한다. JavaScript에서 생성자는 단지 new 연산자를 사용할 때 호출되는 함수이다.
생성자에 속성을 추가하는 방법은 알았지만 멤버 함수, 즉 메서드를 추가하는 방법은 아직 배우지 않았다. 그런데 이전 절에서 변수가 함수를 가리킬 수 있다고 설명한 것을 기억하는가? 이를 기억한다면 그냥 다음과 같이 쓰는 것만으로 메서드를 생성자에 추가하는 것이 가능함을 알 수 있다.
|
constructor_method.htm |
|
function Person(name, age) { this.myName = name; this.myAge = age;
// 자신의 정보를 문자열로 반환하는 myInfo 메서드를 정의합니다. this.myInfo = function() { // return 'Person: <name>, <age>' return 'Person: ' + this.myName + ', ' + this.myAge; }; }
function main() { // new 키워드와 생성자를 이용하여 Person 객체를 생성합니다. var person = new Person("Handy", 20);
// person 객체의 myInfo 메서드를 호출하고 값을 infoString에 저장합니다. var infoString = person.myInfo(); Log(infoString); } |
객체는 사용자가 정의한 속성이나 메서드 외에도 기본적으로 속성과 메서드를 가진다. 문자열의 길이를 얻기 위해length 속성을 얻은 것이 기억나는가? 그와 같은 식이다. 기본으로 제공되는 메서드 중의 하나인 toString에 대해 살펴보자.
|
toString.htm |
|
function Person(name, age) { this.myName = name; this.myAge = age; this.myInfo = function() { return 'Person: ' + this.myName + ', ' + this.myAge; };
// 자신의 정보를 문자열로 반환하는 기본 메서드 toString을 재정의합니다. this.toString = function() { return this.myInfo(); } }
function main() { // new 키워드와 생성자를 이용하여 Person 객체를 생성합니다. var person = new Person("Handy", 20);
// person 객체를 Log 함수의 인자로 넘겨 출력합니다. Log(person); } |
|
실행 결과 |
|
Person: Handy, 20 |
Person 객체를 생성하고 person 객체에 대입했다. 그리고 Log 함수를 호출할 때 person을 문자열로 변환하는 함수를 별도로 호출하지 않았는데도 실행 결과가 잘 나온다. 어떻게 된 일일까?
JS에서는 어떤 객체를 문자열로 변환해야 하는 일이 생기면 내부적으로 toString 메서드를 호출한다. 이 경우toString 메서드를 myInfo 메서드가 반환하는 값을 다시 반환하도록 정의했기 때문에 올바른 출력이 나온 것이다.만약 'this.toString = ...'의 정의를 주석 처리하고 프로그램을 실행하면 다음 결과를 얻는다.
|
실행 결과 |
|
[object Object] |
이전에 JS의 모든 객체의 조상이 object라고 설명한 바 있다. 이 결과는 toString을 재정의 하지 않았기 때문에 그 조상인 object에 정의된 기본 메서드 toString이 호출된 결과로 봐야 한다.
생성자를 이용하지 않고 바로 객체를 생성할 수도 있다.
|
singleton.htm |
|
function main() { // 생성자를 이용하지 않고 객체를 생성합니다. 중괄호('{', '}')를 이용합니다. var person = { myName: 'HDNua', myAge: 24, toString: function() { return 'Person: ' + this.myName + ', ' + this.myAge; } };
// person 객체를 Log 함수의 인자로 넘겨 출력합니다. Log(person); } |
이렇게 만든 객체는 프로그램에 단 하나만 생성되며, 이러한 객체를 싱글톤(singleton)이라고 한다.
JS에서는 기존 객체에 멤버를 추가할 수 있다. JS의 모든 객체는 확장 가능하다. 이는 C++과 같은 언어가 객체를 확장할 때 클래스부터 수정해나가야 한다는 점과 크게 대조적이다. JS의 객체는 그 자체로 하나의 딕셔너리 자료구조로 보는 것이 바람직하다. 실제로 빈 객체를 딕셔너리처럼 사용하는 방식을 jscc에서 사용하는데, 이는 다른 문서에서 보이겠다. 다음은 기존 객체에 멤버를 추가하는 코드다.
|
object_extension.htm |
|
function main() { // 객체를 생성합니다. var person = { myName: 'HDNua', myAge: 24, toString: function() { return 'Person: ' + this.myName + ', ' + this.myAge; } };
// 기존 객체에 속성을 추가합니다. person.myHeight = 100;
// 기존 객체에 정의된 toString 메서드를 재정의 합니다. person.toString = function() { // return 'Person: <name>, <age>, <height>' return 'Person: ' + this.myName + ', ' + this.myAge + ', ' + this.myHeight; };
// person 객체를 Log 함수의 인자로 넘겨 출력합니다. Log(person); } |
|
실행 결과 |
|
Person: HDNua, 24, 100 |
그런데 아주 재미있는 사실은, 객체의 멤버에 접근할 때 문자열을 사용할 수 있다는 것이다.
|
member_access_string.htm |
|
function main() { // 객체를 생성합니다. var person = { myName: 'HDNua', myAge: 24 };
// 문자열을 사용하여 객체의 멤버에 접근하고 값을 설정할 수 있다. var name = person['myName']; Log(name); person['myAge'] = 28; Log(person['myAge']); } |
|
실행 결과 |
|
HDNua 28 |
그래서 JS에서는 위와 같이 간단한 방법으로 객체의 멤버에 접근하는 것이 가능하다.
JS의 객체는 딕셔너리와 같다고 했다. 따라서 멤버의 이름을 키(key), 멤버의 값을 값(value)이라고 할 수 있다.객체의 키를 얻을 때 for-in 루프를 활용할 수 있다.
|
member_access_forin.htm |
|
function main() { // 객체를 생성합니다. var person = { myName: 'HDNua', myAge: 24 };
// 문자열을 사용하여 객체의 멤버에 접근하고 값을 설정할 수 있다. for (key in person) { var keyStr = 'Key: ' + key; var valStr = 'Value: ' + person[key];
// 'Key: <key>, Value: <value>' Log(keyStr + ', ' + valStr); } } |
|
실행 결과 |
|
Key: myName, Value: HDNua Key: myAge, Value: 24 |
C# 프로그래밍 언어를 배우다 온 사람이면 in의 왼편에 들어가는 것이 key라는 사실 때문에 많이 헛갈릴 텐데 이에 주의하기 바란다.
