[JavaScript] Array.isArray 함수 사용

Array.isArray 함수 사용

JavaScript Array에는 isArray 함수가 있습니다.
해당 함수의 인자로 넘어온 변수가 배열인지 확인하는 함수입니다.

이 함수는 왜 사용하는지 예시를 보아도 너무 뻔한 예시 밖에 없습니다.
즉, 예시를 만들기 위해 억지로 만든 예시만 있었습니다.

왜 이 함수를 잘 사용하지 않는 지? 사용한다면 어디에 사용하는 지 제 경험을 바탕으로 작성하였습니다.

isArray를 함수를 사용하지 않는 이유

JavaScript로 개발하면서 배열을 다룰 때 중요한 것은 배열의 크기인 경우가 대부분입니다.
따라서 코드도 아래와 같은 방식이 많이 있습니다.

const arr = [];

if(arr.length) {}
else {}

대부분의 경우 해당 변수가 배열인 것을 알고 있기 때문에 isArray 함수를 사용할 필요가 없습니다.

최근에 해당 함수를 적절한 경우에 사용한 것 같아 공유하려고 작성합니다.

Array.isArray 사용하기

백엔드에서 MongoDB로 검색을 요청할 일이 있었습니다.
MongoDB에서 필드가 배열에 포함되어 있는 지 검색을 하기 위해서는 아래처럼 검색합니다.

const names = ["a", "b", "c"];
const users = this.model.find({ name: { $in: names } })

• 프론트에서 배열을 보낸준 경우는 해당 값으로 필터링하겠다.
• 프론트에서 값을 안보내준 경우는 검색을 하지 않겠다. 라는 조건을 함수로 구현하면 아래와 같이 구현할 수 있습니다.

const searchUser = (names?: string[]) => {
  if(names?.length) {
    return this.model.find({ name: { $in: names } })
  }
  return this.model.find({})
}

위 코드처럼 구현할 수 있는데 잘못된 코드입니다.

프론트에서 names을 빈 배열로 보내게 되면 $in: [] 으로 검색이 되면 안됩니다.
그러나 위 같은 경우는 모든 값이 검색이 됩니다.

이때 Array.isArray를 사용할 수 있습니다.

const searchUser = (names?: string[]) => {
  if(Array.isArray(names))
    return this.model.find({ name: { $in: names } })
  }
  return this.model.find({})
}

위처럼 if문을 변경하게 되면 조건대로 잘 동작하게 됩니다.
names 값이 빈 값으로 오면 어떠한 값도 검색이 되지 않을 것입니다.

물론 아래처럼 구현할 수도 있습니다.

const searchUser = (names?: string[]) => {
  if(!names) return this.model.find({});
  if(!names.length) return [];

  return this.model.find({ name: { $in: names } })
}

위처럼 구현하면 애초에 DB에 접근하지 않기 때문에 더 빠르게 동작할 수 있습니다.

상황에 맞게 구현하면 좋을 것 같습니다.