자바스크립트(JavaScript)에서 어떤 변수가 배열인지 아닌지 판별해야 하는 경우가 종종 있습니다. 예를 들어, 함수에 전달된 인수가 배열일 때만 반복문을 실행하거나 배열 전용 메서드를 사용하고 싶을 때가 그렇습니다. 이때 활용할 수 있는 대표적인 방법은 다음과 같이 세 가지입니다.
1) Array.isArray() 메서드
Array.isArray() 메서드는 인수로 전달된 변수가 배열인지 여부를 검사합니다. 변수가 배열이면 true를, 그렇지 않으면 false를 반환합니다. ES5부터 도입된 공식 표준 메서드로, 가장 권장되는 방식입니다.
문법
Array.isArray(variableName)
예제
<html>
<body>
<script type="text/javascript">
arr = [1,2,3,4,5];
str = "i love my india";
document.write( Array.isArray(arr));
document.write("</br>");
document.write( Array.isArray(str));
</script>
</body>
</html>실행 결과
true false
위 예제에서 arr은 배열이므로 true, 문자열인 str은 false가 출력됩니다.
2) instanceof 연산자
instanceof 연산자는 생성자(constructor)의 prototype 속성이 객체의 프로토타입 체인 어딘가에 존재하는지 검사할 때 사용됩니다. 즉, 해당 객체가 특정 생성자 함수로부터 만들어진 인스턴스인지 판별합니다. 아래 예제에서는 instanceof 연산자를 통해 변수가 Array 프로토타입을 가지고 있는지 확인합니다.
문법
variable instanceof Array
예제
<html>
<body>
<script type="text/javascript">
arr = [1,2,3,4,5];
str = "i love my india";
document.write(str instanceof Array);
document.write("</br>");
document.write(arr instanceof Array);
</script>
</body>
</html>실행 결과
false true
문자열은 Array의 인스턴스가 아니므로 false, 배열은 true가 반환됩니다. 단, instanceof는 서로 다른 프레임(iframe) 간에 객체를 주고받는 경우 정확하게 동작하지 않을 수 있다는 점에 유의해야 합니다.
3) constructor 속성 확인하기
모든 자바스크립트 객체는 자신을 만든 생성자 함수를 가리키는 constructor 속성을 가집니다. 이 속성이 Array와 일치하는지 비교하면 해당 변수가 배열인지 판별할 수 있습니다. 변수가 배열이면 true, 아니면 false를 반환합니다.
문법
variable.constructor === Array
예제
<html>
<body>
<script type="text/javascript">
arr = [1,2,3,4,5];
str = "i love my india";
document.write(str.constructor === Array);
document.write("</br>");
document.write(arr.constructor === Array);
</script>
</body>
</html>실행 결과
false true
다만 constructor 속성은 프로토타입이 변경되거나 상속 구조가 복잡한 경우 결과가 왜곡될 수 있으므로, 신뢰성이 중요한 코드에서는 Array.isArray()를 사용하는 것이 가장 안전합니다.
정리
세 가지 방법 모두 배열 여부를 확인할 수 있지만, 상황에 따라 적합한 방법이 다릅니다.
- Array.isArray(): 가장 확실하고 권장되는 표준 방법
- instanceof: 프로토타입 기반으로 직관적으로 확인 가능, iframe 환경에서는 주의 필요
- constructor === Array: 간단하지만 프로토타입 변경 시 오작동 가능
일반적인 개발 환경에서는 호환성과 안정성이 뛰어난 Array.isArray() 사용을 우선적으로 고려하는 것이 좋습니다.