내부적으로 toString이 사용되는 대표적인 예는 DOM프로퍼티인 innerHTML을 사용할 때이다.
var obj = {name : 'owen'};
document.getElementById('demo').innerHTML = obj;
이렇게 하면 자바스크립트는 demo아이디를 가진 엘리먼트에 "[object Object]"를 출력한다. 즉, 사용자는 사용하지 않았지만, 자바스크립트 내부적으로 toString 매쏘드를 사용해서 객체의 내용을 출력한 것이다.
valueOf가 가장 흔하게 사용되는 경우는 객체를 비교하는 연산자에서이다. ">, <, >=, <="등의 연산자가 객체간에 실행될때 자바스크립트 내부적으로는 valueOf 매쏘드를 호출한다.
이런 특성을 이용하면 흥미로운 예제를 만들 수 있다.
toString, valueOf은 결국 프로토타입으로부터 상속받은 매쏘드이기 때문에, 사용자가 같은 이름의 매쏘드를 선언함으로써 위 두 매쏘드를 원하는 형태로 바꿀수 있다는 것이다.
다음 예제를 보면... (자바스크립트의 프로토타입에 대해 잘 모르시는 분은 이해하기 어려울 수 있습니다.)
var students = [
{name : 'owen', idx : 5},
{name : 'jason', idx : 3},
{name : 'justin', idx : 4}
];
var proto = {
toString : function(){return this.name;},
valueOf : function(){return this.idx}
};
var students2 = [];
for(var i = 0 ; i < students.length ; i++){
var F = function(){};
F.prototype = proto;
students2[i] = new F();
students2[i].name = students[i].name;
students2[i].idx = students[i].idx;
}
console.log(students2[0] < students2[1]); //false
document.getElementById('demo').innerHTML = students2[0]; //owen 출력
- 이는 학교에서 학생들의 번호와 이름을 객체로 만드는 상황을 가정한 것이다. 첫번째로 학생들을 배열로 만들고 이름과 번호(idx)를 선언한다.
- proto라는 객체를 만들어서 toString과 valueOf매쏘드를 새롭게 정의한다. 즉 toString은 학생의 이름을, valueOf는 학생의 번호를 가져오는 매쏘드가 된 것이다.
- for문을 실행시켜 새로운 배열을 생성하면서 각각의 요소에 toString과 valueOf를 프로토타입 상속을 통해 선언하고, 각이름과 idx값을 넣어준다.
- 이제 각요소의 idx프로퍼티나 name프로퍼티를 찾아가지 않아도 값비교나 이름 출력이 가능해 졌다.
이 예제는 크게 실용적으로 보이지는 않지만, 이런 자바스크립트 특성을 잘 활용하면 보다 효율적인 코드를 작성할 수 있을것 같다.^^
댓글 없음:
댓글 쓰기