Qvil Blog

[JS] Object 속성 갯수에 따라 참조하는 속도가 달라질까? No

2018.04.17 — javascript, object — 1 min read

1. Summary

2. Why

왜 Object 속성 갯수 참조 속도가 궁금했을까?

Redux 에서 bindActionCreators 를 사용해서 Action 을 모두 Injection 시켜주는 패턴이 있는데

1import * as FirstActionCreators from "redux/FirstAction";
2import * as SecondActionCreators from "redux/SecondAction";
3import * as ThirdActionCreators from "redux/ThirdAction";
4
5const mapDispatchToProps = (dispatch) => ({
6  actions: bindActionCreators(
7    {
8      ...FirstActionCreators,
9      ...SecondActionCreators,
10      ...ThirdActionCreators,
11    },
12    dispatch
13  ),
14});
15const MyComponentContainer = connect(null, mapDispatchToProps)(MyComponent);
16
17export default MyComponentContainer;

위 코드는 개발자가 사용하기에는 편리하지만 쓸데없는 Action 까지 모두 Injection 된다는 단점이 있다. (FirstAction.a 만 필요해도 FirstAction.b, c... 모두 props 로 접근 가능해진다.)그렇다면 쓸데없는 Action 이 Object 의 Property 로 Injection 되면 성능에 영향을 미칠까?

3. Test Code

1const miniObj = {
2  1: 1,
3  2: 2,
4};
5let maxObj = {};
6for (let index = 0; index < 100000; index++) {
7  maxObj[index] = index;
8}
9
10let startMax = Date.now();
11console.log(maxObj[50000]); // Object 속성 접근
12let endMax = Date.now();
13let elapsedMax = endMax - startMax;
14console.log(`elapsedMax : ${elapsedMax}`); // 경과 시간
15
16let startMin = Date.now();
17console.log(miniObj[1]); // Object 속성 접근
18let endMin = Date.now();
19let elapsedMin = endMin - startMin;
20console.log(`elapsedMin : ${elapsedMin}`); // 경과 시간

4. Result

Object 속성이 10 만개 생겨도 속도 차이는 거의 없다.

나는 일단 그냥 편하게 쓰기로 했다.