자바스크립트에서 빈 배열 여부를 확인할 때?
배열의 빈 상태를 판별할 때, array.length ? true : false의 방식은 문제가 있다.
그 이유는, 만약 배열이 JSON 형식이나 혹은 예상하지 못한 데이터를 얻거나, undefined 혹은 null을 얻을 수 있으며 이는 타입 에러를 일으킬 수 있다. (length를 읽지 못하는 문제)
이 때문에 안전한 방법으로 배열이 비어있는지 확인하는 것이 중요하다. 빈 배열인지 확인하는 방법은 아래와 같다.
다음의 방법으로 약간 안전한 해결을 할 수 있다.
Array Length 여부 확인
- array && array.length ? true : false
이 방법이 잘못된 것은 아니다.
하지만, 만약 해당 배열의 기본값이 빈배열로 초기화 되지 않았다면 이 역시 오류가 생길 수 있다.
Optional Chaining
- array?.length ? true : false;
만약 array에 length 속성이 없으면 (= 배열이 아니라면) false를 반환하기 때문에, 올바른 확인법이라 할 수 있다.
인덱스 접근
또한 배열의 인덱스에 접근하고자 할 때, 흔히 사용하는 방법은 array[0]이다. 하지만 array[0] 는 완벽하게 안전하지 않다. 배열이 해당 인덱스에 데이터를 가지고 있을지 완벽하게 보장하지 않기 때문이다. array값이 만약 배열이 아니라면, [0] 값은 찾을 수 없기에 오류를 일으킨다.
array?.[0]?.id ?? 'No id property' 는, true인 경우 왼쪽이, null이나 undefined인 경우에만 오른쪽이 반환된다.
또한 만약 array 값이 'hello' 와 같은 문자열일 때,
myArray && myArray.length 나 myArray?.length를 통해 배열의 길이를 얻는 법도 문제가 있다.
Array.isArray(array)
이를 완벽히 해소하는 것이 Array.isArray(array) 이다. 이 함수는 해당 array값이 배열인지 아닌지를 boolean 값으로 판별해준다. 또한 이 함수와, array.length === 0 을 같이 사용하면, 해당 배열변수가 확실히 배열임을 보장해주면서 길이가 0인, 즉 빈 배열 값임을 완벽하게 제어할 수 있다
if (Array.isArray(array) && array.length === 0) {
// 로직 작성
}