Etc/Performence

객체 생성, 초기화 성능을 높이는 코드 스타일

gmta 2022. 1. 13. 17:16
반응형

배열 형식의 객체 사례

- 배열은 생성자와 리터럴 형식을 사용해서 객체를 생성할 수 있습니다.

- 생성방법에는 큰 차이가 없지만, 리터럴 형식을 사용한 경우 다양한 브라우저에서 조금 더 좋은 성능을 보여줍니다.

// 배열 생성자를 사용하여 배열 생성 방법
let arr = new Array(); 

// 리터럴 형식으로 배열 생성
let arr = [];

 

 

접근자 [ ], push() 메서드 사용방법

 

- 접근자 사용의 경우

// 접근자를 사용해서 데이터를 할당했을 경우 경과시간입니다.
let arr = [];

console.time("TEST Time");

for(let i = 0; i<10000; i++){
	arr[i] = i;
};
console.timeEnd("TEST Time");

15번 정도 결과값을 찍어봤습니다.

- push() 사용의 경우

// push를 사용했을 경우 경과시간을 측정하는 코드 입니다.
let arr = [];

console.time("TEST Time");

for(let i = 0; i<10000; i++){
	arr.push(i);
};
console.timeEnd("TEST Time");

 

- 결론: 위의 코드처럼 console.time을 사용해서 시간을 구했을 경우에는 test 시간이 거의 유사하여 어떤것이 더 빠르다 결론을 내리기가 힘들었습니다. 하지만 다른 블로그를 몇몇 찾아 봤을때는 push() 보다 접근자를 사용하여 데이터를 할당하는 것이 코드의 성능에 좋다고 합니다. 

 

 

Object 객체의 생성, 초기화 성능비교

- 배열과 달리 두 방법은 어떤 방식이 월등히 성능이 좋다라고 판단하기 어렵습니다.

- 성능속도에서의 빠름보다 리터럴 사용방식이 코드를 다운받는 관점에서 텍스트가 적기에 조금 더 효율적이다고 판단할 수 있습니다.

// 리터럴을 사용한 오브젝트 객체 생성
let obj = {};

// 생성자를 사용한 오브젝트 객체 생성
let obj = new Object();

 

- 객체에 '.' 연산자를 이용한 데이터 삽입 방법

console.time("TEST time");
let obj = {};

obj.a = 1;
obj.b = 2;
obj.c = 3;
obj.d = 4;
obj.e = 5;
console.timeEnd("TEST time");

 

- [] 연산자를 이용한 데이터 삽입 방법

console.time("TEST time");
let obj = {};

obj["a"] = 1;
obj["b"] = 2;
obj["c"] = 3;
obj["d"] = 4;
obj["e"] = 5;

console.timeEnd("TEST time");

 

- 결론: 작성코드 크기, 가독성을 고려해서 작성할 것을 추천합니다.