[typescript] JS에서 length가 undefined로 뜨는 현상 고치기

객체의 개수를 파악하기 위해 diaryList.length를 console.log하면 아래와 같이 나타나는 현상을 수정해보자.

띠용

---

문제점

일단 diaryList가 제대로 넘어온건 맞는지 확인하기 위해 console.log로 diaryList도 쳐보도록 하자.

diaryList는 잘 넘어온 것을 확인할 수 있다.

도대체 왜 length만 이런 것일까?

그 이유는 여기서 알 수 있었다.

 

요약하자면 js에선 배열과 문자열에서만 length 속성이 있고,

Object에선 length 속성이 없어서 그런 것이었다!

 

https://www.delftstack.com/ko/howto/javascript/javascript-length-of-object/

JavaScript에서 객체 길이 가져 오기

Object화가 되어 [key: value] 꼴이 돼버렸기 때문에 length 속성을 사용할 수 없었던 것이다.

 

실제로 prototype은 Object임을 알 수 있고,

key는 각각 0,1,2 

value는 각각 {id: 1, author: ...} 꼴임을 알 수 있다.

---

해결방법

따라서 우리는 Object.keys(), Object.values()를 통해 Object의 속성 배열로 length를 가져와야 한다.

console.log(Object.keys(diaryList));
console.log(Object.values(diaryList));

console.log(diaryList.length); // undefined
console.log(Object.keys(diaryList).length);	// 3
console.log(Object.values(diaryList).length);	// 3

코드(좌)의 5~8번째 라인과 비교하면 된다.

Object.keys()로 가져오니 실제로 키에 해당하는 0,1,2 배열을,

Object.values()로 가져오니 실제로 values에 해당하는 DiaryProps 타입(id, author, content, ...) 배열을 가져오는 것을 확인할 수 있으며,

둘 다 length는 3임을 확인할 수 있다!

 

도움받은 블로그: https://ipex.tistory.com/130

---

이걸로 엄청 고생했는데 

해결법을 찾아서 다행이다.