1.for in vs for of 차이점 in JS

위에 데이터가 있다. 크롬에 일단 찍은 이유는 data 배열의 key value가 에디터로 찍으면 사라져서 그런데, 위 사진 보면 아래 빨간 박스에 배열 데이터 key(=index) 0,1,2,3, value {...} 형태로 나와있다.
그래서 위 데이터를 참곻패서 for in, of를 설명해보면..

• for ...of : 배열에서 사용 가능 (=[Symbol.iterator] 속성을 가지고 있어야 함, 객체 사용시 ~ is not iterable란 에러뜸),
  배열의 value 추출 가능
  그래서 아래 사진 보면 data 배열의 value {},{},{},1 형태로 출력 된걸 볼수 있다

• for ...in : 객체,배열 모두 사용 가능,배열, 객체에서 key추출 가능
  아래 사진 보면 data 배열에서 0,1,2,3,foo 로 키가 출력된걸 알수 있다. 여기서 헷갈릴 수 있는게 배열에도 키가 있나? 라고 생각했었는데 키가 있다. 흔히 배열의 인덱스=key 로 말할 수 있다. 따라서 foo를 제외한 {},{},{},1 의 value는 각 인덱스 0,1,2,3을 키로 가지니 저렇게 콘솔에 출력된다.

for ... of 예제

for ... in 예제

참고 : https://jsdev.kr/t/for-in-vs-for-of/2938
https://velog.io/@eomttt/for-...in-for-...of-%EC%B0%A8%EC%9D%B4

2. 객체 배열에서 key, value 추출 방법

2-1. Object.keys(), Object.values() 활용

2-2. Object.entries() 활용

for ...of로 객체배열에서 객체로 한단계 접근해서, 객체 레벨에서 Object.entries()를 사용해 key, val을 추출 하는 방법도 있다. 개인적으론 2-1이 편할듯.