[Javascript] Object 객체에 .forEach() 가 안먹을 때

화면단 개발을 하면서 화면에 객체를 내릴 일이 생겼다.

 

이 과정에서 나름 화면에 노출되는 정보를 최대한 숨기겠다고 첫 번째 방식이 아닌, 두 번째 방식인 Object 객체로 내렸다.

// 이렇게 내릴까?
user = [
  { 'id':'vvh-avv', 'name':'홈주' },
  { 'id':'hajs', 'name':'하지수' }
]

// 아니야 이렇게 내리자!
user = {
  'vvh-avv' : '홈주',
  'hajs' : '하지수'
}

 

근데 여기서 문제는..  user 를 돌면서 이름을 가져와야 했는데 ㅜㅜ 어느 때와 같이 .forEach() 를 했는데 안먹었다.
하지만 당황하지않고 다른 방법(.map() / .reduce()) 을 써봤는데도 안되더라. 😓

 

여기서 내가 간과했던 점은 Object 는 Interator 가 아니라는 점.
(참고 : Mozilla - object sms interator 또는 interable 인가?)

 

간과했던 점을 찾고나니 해결을 금방 할 수 있었다.

/** 단순 출력 */
user['vvh-avv'];          // '홈주'
user[0];                  // undefined

/** 단순 출력 - Object 활용 */
Object.keys(user);        // 'vvh-avv', 'hajs'
Object.values(user);      // '홈주', '하지수'

/** Object for - 1 */
Object.values(user).forEach(v => {
  console.log(v);         //'홈주', '하지수'
});

/** Object for - 2 */
for (key in user) {
  console.log(user[key]); //'홈주', '하지수'
}

 

결국, 보다 눈에 잘 보이는 2번 방법을 통해 개발을 했다 ^^

(까먹지 않기 위해 다시 열심히 포스팅해야지 💪)