프로젝트를 진행하면 해당 에러 Uncaught TypeError: Array.map is not a function가 지속적으로 나타났다.
에러가 뜨는 이유는 배열이 비었기 때문이었다. 서버와 통신하기 전에는 임의로 배열을 만든 상태에서 테스트를 진행했기 때문에 해당 에러가 나타나지 않았던거였다. 통신을 진행한 후에는 게시글을 작성해야 배열에 값이 들어오게 되는데, 게시글을 작성하지 않았기 때문에 배열에 값이 존재하지 않아서 map 에러가 발생했던 것이다.
Array.map 에러 해결
해당 에러를 해결하는 방법은 매우 간단하다. 하지만 에러를 해결하기에 앞서 우리가 알아야 할 JS 지식이 있다.
array가 빈배열일때 boolean값
JS를 잘 모른다면 arr라는 배열이 존재하는데 값이 빈배열이라면, boolean값은 흔히 false라고 생각하게 될 것이다. (내가 그랬다)
하지만 아니다! 빈 배열이라면 boolean값은 true이다.
이유를 명확히는 알지 못하지만, JS에서 그렇게 정의한다. (그래서 그냥 받아들이기로 했다)
비교연산자(===)를 사용하지 않았을 때, false가 나오는 것은 다음과 같다.
- 0
- false
- undefined
- null
- ’’ 혹은 “” (빈 문자열)
- NaN
빈 배열은 위에 해당하지 않기 때문에 true가 나온다..! 이 뿐만아니라 {}, function(){}, "0", "false", "null" 등도 true값을 가진다.
여기서 주의해야 할 것은 위의 결과값은 동등 연산자(==)일 때의 값이라는 것이다. 비교 연산자(===)는 값과 타입을 모두 비교하기 때문에 빈 배열일때 false를 반환한다. 주의하도록 하자!
Chrome console에서는 arr == true는 false?!
사실 위의 이론을 직접 확인하고 싶어서 크롬 console 란에 코드를 작성해서 확인해봤다. 근데 빈배열이 false라고 하는 것이다..? arr == true라고 작성했는데.. 그래서 Boolean(arr)라고 작성해보니 true값이 나왔다.
왜 위의 개념과 다른 값이 나오는지 궁굼해서 Bard에게 물어봤다.
그렇다. 내가 동등 연산자(==)로 입력했어도 크롬 console은 비교 연산자(===)를 사용하는 것이다. 그렇기에 true가 아닌 false로 반환하는 것이었다. Boolean으로 했을 경우에는 값만 확인하기 때문에 true를 반환하는 것이고!
혹시 나 같은 사람이 또 있을까봐.. 적어봤다ㅎ
Array.map Error 해결하기
위 개념처럼 빈 배열 array는 true를 반환하기 때문에 map을 사용하는 조건으로 그냥 array가 아닌 array.length를 사용하면 된다.
빈 배열 array는 true이지만 array.length는 값이 0 이기 때문에 비교연산자에서 false를 반환한다!
따라서 빈 배열로 인한 map TypeError는 length를 활용하여 해결하자.
해당 코드를 확인하면 meetingList가 빈 배열일때 meetingList.length는 0이므로 false이기에 논리 연산자 (&&)의 조건(모두 true)에 성립하지 않는다. 따라서 map 함수가 실행되지 않기에 TypeError는 발생하지 않는다.
만약 meetingList가 빈배열이 아니고 값이 1개라도 존재한다면, meetingList.length는 최소 1이 되기 때문에 true값을 가져서 map함수가 실행될 것이다. 배열이 빈배열이 아니기 때문에 map TypeError도 발생하지 않는다.
참고
Array.map is not a function 에러
왜 텅 빈 Array는 true인가
Bard: Chrome console에서 빈배열이 false인 이유
Comments