자바스크립트에서 객체를 순회하는 방법은 여러 가지가 있지만, 순회할 때의 성능 차이가 중요할 수 있습니다. 이번 블로그에서는 객체를 순회하는 여러 가지 방법과 그 성능을 비교해보겠습니다.

1. for…in 문

for...in 문은 객체의 모든 열거 가능한 속성에 대해 반복할 수 있습니다. 하지만, 이 방법은 속성뿐만 아니라 프로토타입 체인까지 모두 순회하므로 성능에 영향을 줄 수 있습니다.

for (const key in obj) {
  console.log(key, obj[key]);
}

2. Object.keys와 forEach

Object.keys 메서드는 객체의 모든 열거 가능한 속성을 배열로 반환해줍니다. forEach 메서드를 사용하여 배열을 순회하면 됩니다.

Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

3. Object.entries와 forEach

Object.entries 메서드는 [key, value] 형태의 배열을 반환합니다. 이를 사용하여 키와 값을 함께 순회할 수 있습니다.

Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});

성능 비교

실제로 이 세 가지 방법을 사용하여 성능을 비교해보면, for...in 문이 가장 느리고, Object.entries 메서드가 그 다음이며, Object.keys 메서드와 forEach 메서드를 조합한 방법이 가장 빠른 것으로 나타납니다.

따라서, 객체를 순회할 때는 for...in 대신에 Object.keys와 forEach 를 조합하여 사용하는 것이 성능적으로 더 좋을 수 있습니다.

참고 자료: MDN Web Docs