객체 for문

객체를 이용해 for문을 사용할 때 보통 for in 문을 사용했었다.

for in 문 사용법

const data = { timestamp: "1657786015951", x: 1455.1276, y: 7974.64 }

for(let key in data) {
	console.log(`${key}: ${data[key]}`)
}

value에 접근하기 위해선 obj[key]형태로 접근해야한다.

key value 모두 가져오기

근데 나는 이걸 매번 작성하는게 매우 귀찮았음

한번에 key와 value에 접근 하는 방법은 없을까 찾아봤는데 있었다.

그 방법은 Object.entries를 이용하는 방법

Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다).

const data =  { timestamp: "1657786015951", x: 1455.1276, y: 7974.64 }

console.log(Object.entries(data)) 
/* 
output [
  [ 'timestamp', '1657786015951' ],
  [ 'x', 1455.1276 ],
  [ 'y', 7974.64 ]
]
*/

이 방식을 이용해 key와 value 값을 바로 변수에 담아 사용 가능하다.

const data =  { timestamp: "1657786015951", x: 1455.1276, y: 7974.64 }

for (const [key, value] of Object.entries(data)) {
	console.log(key, value)
}

근데 내가 작업하는 프로젝트의 eslint에서는 사용을 금지하였다.

iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations.(eslintno-restricted-syntax)

그냥 쓰던거 쓰고 알고만 있어야 겠다.

참고 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries