JavaScript - 객체 안 배열에 반복문 사용하기

 

 

 

요즘 객체를 가공하는 일이 부쩍 늘었다. 

처음 공부를 시작하던 때, 데이터 가공이 내 맘대로 안되서 답답해하던 기억이 떠올랐다. 

그때에 비하면 감사하게도 잘 가고 있다고 생각한다. 하지만 아직 가야할 길이 멀고 공부할 것은 많다!

자 객체를 다루러 가보자!

 

---

JavaScript - 객체 안 배열에 반복문 사용하기

 

아래와 같은 형식의 객체를 만났다. ( 객체 안에 배열들이 늘어져있는 ... )

당신의 미션은 이 배열들을 동적으로 출력하는 것이다. (자, 당황하지 말자.)

일단 객체를 반복해서 하나하나의 키 값(배열) 을 알아내고, 배열을 돌려서 하나하나 아이템들을 뽑아내보자.

const obj = {
  a: ['apple', 'alarm', 'air'],
  b: ['bear', 'bee'],
  c: ['car', 'cook', 'cake', 'career']
}

 

 

 

객체에 반복문 사용하기

객체를 직접 반복하려면 for  in 을 사용해야만 한다. (for of / for / map / filter 은 안먹힌다.)

 

 

- 객체의 키(key)만 따로 뽑으려면

for (item in obj){  // 객체의 키(key)를 따로 뽑으려면,
  console.log(item) // 이렇게 뽑으면 되고, 
}

 

 

- 객체의 키의 값(value)만 따로 뽑으려면

for (item in obj){       // 객체의 키값(value)를 따로 뽑으려면,
  console.log(obj[item]) // 이렇게 뽑으면 된다
}

 

 

- 객체의 키(key) 나 키의 값(value) 만 배열화시키려면

Object.keys(obj); // ["A", "B", "C", "D"];

Object.values(obj);  // [['apple', 'alarm', 'air'], ['bear', 'bee'], ['car', 'cook', 'cake', 'career']]

 

 

 

 

객체 안 키 값(value) 인 배열에 반복문 사용하기

이런 객체가 있다. (다시한번 소환)

여기서 키 을 받아서 따로 출력해주고, 속의 배열을 받아서 출력해주려고 한다.

const obj = {
  a: ['apple', 'alarm', 'air'],
  b: ['bear', 'bee'],
  c: ['car', 'cook', 'cake', 'career']
}

 

 

useMemo 로 객체를 반복해서 하나하나의 키 값(배열) 을 알아내고, 

배열을 돌려서 하나하나 아이템들을 뽑아내 배열 형식으로 저장했다.

const alphabet = useMemo(() => {
    let array = [];	     		  // 키 값(value)을 넣을 빈 어레이 하나 선언하고

    for (const item in obj) { 		  // obj 객체 반복문으로 돌리기
      const words = obj[item].map( 	  // 키 값(배열)을 map 으로 돌려주자
        (word, i) => {
          return <li key={i}>{word}</li>; // 배열 원소를 하나하나 출력해주자
        }
      );

      array.push( 	    // 여기서  html 태그로 리턴한 값들을 합쳐 element node로 배열화시키기 
        <div key={item}>
          <div>{item}</div> // 키를 출력해주고
          <ul>{words}</ul>  // 이러면 출력된 배열 원소가 쫘라락 출력돠게 된다
        </div>
      );
    }
    
    return array; // 리턴해주기
}, []);

 

 

가공한 객체속 배열들을 여기서 보여주자

<div>{alphabet.map(item => item}</div> // 가공되어 배열에 담긴 html 태그들은 여기서 보여지게 된다

 

 

 

결과화면 

A B C D 키도 잘나오고,  배열 값들도 잘 출력되었다.