[Javascript] 객체에 들어 있는 Key의 값 만큼 반복문 돌리는 법

옛날에 했던 프로젝트 리팩토링하는데, React의 state에 있는 객체의 값을 반복문 돌려서 다른 객체 변수에 저장해주는 코드가 있었다ㅋㅋㅋㅋㅋㅋㅋ

react와 node.js를 학습하면서 만든 첫 프로젝트였기 때문에 이런 일이 발생한 것 같다...

그냥 지우기엔 나중에 쓸 일이 분명 있을 것이므로 글을 쓰기로 했다

---

// ...생략

const [review, setReview] = useState({
        ocode: "", pcode: "", category : "후기", rating: 5, title: "", content: ""
});

// ...생략

let data = {};

//data 객체에 inputs state에 있는 값들을 for 문을 통해 간편히 추가
for(let i in Object.keys(review)){
	data[Object.keys(review)[i]] = review[Object.keys(review)[i]];
}//end of for

// ...생략

뭐 이렇게 되어있던 건데... 이해를 돕기 위해 관련된 것을 가져왔다.

 

review라는 state에 저장된 값들을 data 변수에 반복문을 돌리며 담아주는 것이다. 

중요한 것은 for문의 내용이다.

 

 

■ Object.keys(객체명)

라이브러리 참고

→ js에 내장되어있는 Object 클래스의 keys 함수를 이용하는 것이다.

    이렇게 하면 저 함수의 매개변수로 전달해준 객체의 key 값을 String 배열로 반환해준다.

 

그럼 이 함수를 호출하면 결과는? [ ocode, pcode, category, rating, title, content ]

이렇게 배열 안에 review 객체의 key 값이 문자 형태로 들어있을 것이다. 

그럼 배열로 해당 객체의 모든 Key값을 뽑았으니 반복문을 돌릴 수 있겠지?

■ ■ for(let i in Object.keys(review)){  }

→ 알겠지만, Object.keys(review)로 받아온 배열의 길이 만큼 반복문을 돌릴 것이다.

i에는 해당 배열의 index 값이 들어있을 것임

Object.keys(review)[i] 반복문 안에서 이렇게 하면 무슨 값이 반환될까?

답은 review 객체의 key 값이 나온다!

순서는 어떻게 들어있을 지 모르지만, 대충 배열 내에 순서가 [ ocode, pcode, category, rating, title, content ]  이렇게 되어있다고 하면 반복문을 돌릴 때마다 ocode, pcode 등... 순서대로 반환될 것이다.

■ data[Object.keys(review)[i]]

이건 data 객체 변수에 Object.keys(review)[i]에서 나온 이름으로 Key 값을 정한다는 의미이다.

 

■ review[Object.keys(review)[i]]

그럼 이것도 똑같겠네.

review객체의 Object.keys(review)[i] 해당 키 값을 조회하면, 해당 Key 값의 Value가 반환될 것이다.

 

저렇게 꼬부랑 글씨가 많으니까 헷갈릴 수도 있는데 단순하게 컴터가 받아들이는 결과만 생각하면

review["ocode"] ==> "" 반환 / review["category"] ==> "후기" 반환

이렇게 생각하면 된다.

---

혹시 이해가 안되는 분들을 위해

개발자 모드로 간단하게 console 찍어보쟈

이해가 안될 땐 결과를 눈에 보면서 확인하는 것이 개인적으로 젤 이해가 빨리 되는 느낌이다.

---

여기서 주의할 점!

우리가 알고 있는 객체의 특정 key의 value값을 뽑아내기 위해서는 이렇게 두가지 방법이 있다.

객체명.key값: review.ocode

객체명["key값"]: review["ocode"]

이렇게 해도 동일한 결과가 나오는데, 지금과 같은 형태로 반복문을 돌릴때는 첫번째 방법을 사용하면 에러난다.

 

review.Object.keys(review)[i] 이렇게 쓰면 에러난다는 뜻임

Uncaught SyntaxError: Unexpected string이 발생하였다. 문법 에러 바로 발생해버리쥬

왜냐? Object.keys(review) 요놈을 쓰면 아까 문자열로 반환된다고 했다.

결국 review.Object.keys(review)[i] 는 위의 사진처럼 review."key값" 이랑 똑같다.

이야기가 다른 곳으로 샜는데, 결국 이 코드가 review객체에 있는 키 값과 저장된 값으로 data 객체에 복사해서 저장해준다는 얘기였다.

 

진짜 걍 객체 복제랑 똑같으니까 객체의 key값을 어떻게 뽑아내는지 뭐 그런 방법 위주로 글을 보면 좋을 것 같습니당...

---

이제 리팩토링할 때는 지금 코드를 지우고 

ES6인가 거기서 제공하는 간편한 객체 복사 문법을 사용하겠지^^