JavaScript로 개발하다 보면 특정 값이 진짜 배열인지 아닌지를 판별해야 하는 상황이 자주 발생합니다. 이때 가장 확실하고 널리 권장되는 방법은 바로 Array.isArray() 메서드를 사용하는 것입니다.
Array.isArray()란?
Array.isArray() 메서드는 인자로 전달된 값이 배열이면 true, 그렇지 않으면 false라는 불리언(Boolean) 값을 반환합니다. 이 반환값을 기준으로 객체가 배열인지 여부를 간단하게 검증할 수 있습니다.
참고로 typeof []는 배열임에도 불구하고 "object"를 반환하기 때문에 배열 판별에는 적합하지 않습니다. 따라서 배열 여부를 정확히 확인하려면 반드시 Array.isArray()를 사용해야 합니다.
예제 코드
다음은 Array.isArray() 메서드를 활용해 JavaScript 객체가 배열인지 확인하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript 객체가 배열인지 확인하기</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 해당 객체가 배열인지 여부를 확인할 수 있습니다.
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resEle = document.querySelector(".result");
let arr = [1,2,3,4,'A','B','C'];
sampleEle.innerHTML = arr;
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = '위 객체는 배열인가요? : '+Array.isArray(arr);
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같이 해당 객체가 배열인지 여부가 결과 영역에 표시됩니다.
정리
JavaScript에서 객체가 배열인지 확인할 때는 Array.isArray() 메서드를 사용하는 것이 가장 안전하고 명확한 방법입니다. 배열이면 true, 아니면 false를 반환하기 때문에 조건문과 함께 활용하면 타입 검증 로직을 손쉽게 구현할 수 있습니다.