이전 강좌에서 객체 속성을 다루면서 겟터와 셋터에 대해서 알아 보았습니다. 

그런데.

느리다고 했는데 

그냥 속성을 값으로 사용하는 것과 

겟터와 셋터를 통해서 접근하는 것은 어느정도 차이가 있을까?

이번에는 이 차이를 알아 봅시다. 

우선 여러분은 어떤 처리 속도를 측정하기 위해서는 

시간에 대한 함수를 알아야 합니다. 

시간 함수는 여러가지가 있지만..

다음과 같은 함수 사용이 가장 심플합니다. 

var 시작_미리_초 = new Date().getTime();      
var 종료_미리_초 = new Date().getTime();    

// 측정 구간
var 경과_시간 = 종료_미리_초 - 시작_미리_초;

간단하게 다음 소스를 이용해서 측정해 봅시다. 
[C016_measure_pass_time.html]------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head></head>
<body>
</body>
<script type="text/javascript">

var 시작_미리_초 = new Date().getTime();      

// 측정 구간
var 합계 = 0;

for( var 반복 = 0; 반복 < 100000000; 반복++ ) {
합계 = 합계 + 1;
}

var 종료_미리_초 = new Date().getTime();    
var 경과_시간 = 종료_미리_초 - 시작_미리_초;

document.write('<pre>');
document.writeln('처리 수행 시간 = ' + 경과_시간 + 'ms' );
document.write('</pre>');
</script>
</html>
--------------------------------------------------------------------------------
아마도 갱신할 경우마다 그 결과 값이 조금씩 다를 겁니다. 

이건 운영체제의 스케쥴링 문제로 발생하는 현상인데 

시간을 구하는 방식이 프로세스의 흐름 시간이 아니고 시스템이 제공하는 하드웨어 적인 절대 시간이기 때문에

다른 프로그램들이 스케쥴링 되어서 소모하면 그것만큼 오차가 생깁니다. 

뭐 우리는 셋터와 겟터와 관련된 처리를 했을때 시간 흐름을 측정하고 싶은 거죠..

물론 이 측정은 크롬에서만 한 겁니다. 다른 브라우저에서 어떻게 될지 전 테스트 안했습니다. ^^

[C017_measure_pass_time_setter_getter.html]------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head></head>
<body>
</body>
<script type="text/javascript">

var 시작_미리_초;
var 종료_미리_초;
var 경과_시간;
var 반복;
var 원 = {};

원._반지름 = 0;
Object.defineProperty( 원, '반지름', { 
get : function()   { return this._반지름; },
set : function(값) { this._반지름 = 값;    }
});
document.write('<pre>');

시작_미리_초 = new Date().getTime();      

for( 반복 = 0; 반복 < 100000000; 반복++ ) {
원._반지름 = 원._반지름 + 1;
}

종료_미리_초 = new Date().getTime();    
경과_시간 = 종료_미리_초 - 시작_미리_초;

document.writeln('직접 변수 접근시 처리 수행 시간 = ' + 경과_시간 + 'ms' );
시작_미리_초 = new Date().getTime();      

for( 반복 = 0; 반복 < 100000000; 반복++ ) {
원.반지름 = 원.반지름 + 1;
}

종료_미리_초 = new Date().getTime();    
경과_시간 = 종료_미리_초 - 시작_미리_초;

document.writeln('함수를 이용한 변수 접근시 처리 수행 시간 = ' + 경과_시간 + 'ms' );
document.write('</pre>');
</script>
</html>
--------------------------------------------------------------------------------

이 소스를 크롬에서 실행해 보면 다음과 같은 결과가 나옵니다.

직접 변수 접근시 처리 수행 시간 = 270ms
함수를 이용한 변수 접근시 처리 수행 시간 = 274ms
거의 차의 안나죠?

즉 셋터와 겟터를 쓰는 것이 자바스크립트에서는 아무런 문제도 없고 

유지보수와 확장성을 위해서는 적극 권장할 만한 것입니다.

이 게시물을...