for ...in 반복문

for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습니다.
(모든 객체에서 사용 가능 👍)

for ...in문의 특징

1. for...in 구문은 객체의 key값에 접근할 수 있지만, value값에 접근하는 방법은 제공 하지 않는다.
2. 자바스크립트에서 객체속성들은 내부적으로 사용하는 숨겨진 속성들을 가지고 있다.

var obj = {
    a: 1, 
    b: 2, 
    c: 3
};

for (var prop in obj) {
    console.log(prop, obj[prop]); // a 1, b 2, c 3
}

Object.keys()

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환한다.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

object.values()

Object.values() 메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴합니다. 이 배열은 for...in 구문과 동일한 순서를 갖지만 배열로 리턴한다는 특징을 갖는다.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]

for ...of 반복문

for...of 명령문은 반복가능한 객체(이터러블 객체) (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다.

iterable
반복되는 열거가능(enumerable)한 속성이 있는 객체.

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

for in 반복문과 for of 반복문의 차이점

for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
for of 반복문 : [Symbol.iterator]속성을 가지는 컬렉션 전용 (이터러블 배열)

var iterable = [3, 5, 7];
iterable.foo = "hello";

for (var key in iterable) {
  console.log(key); // 0, 1, 2, "foo"
}

for (var value of iterable) {
  console.log(value); // 3, 5, 7
}

Reference

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