Array.isArray() 메서드는 범용적(universal)이기 때문에 어떤 환경에서도 정상적으로 동작합니다. 반면 instanceof 연산자는 범용적이지 않아, iframe처럼 새로운 실행 환경이 만들어진 경우에는 올바른 결과를 반환하지 못합니다.
구문 1
Array.isArray(array);
구문 2
array instanceof Array;
다음 예제에서는 새로운 환경을 따로 만들지 않았기 때문에 Array.isArray()와 instanceof 모두 동일한 결과를 출력합니다.
예제
<html>
<body>
<script>
var a = [1,2,3,4,5];
document.write(Array.isArray(a));
document.write("</br>");
document.write((a instanceof Array));
document.write("</br>");
var b = {}
document.write(Array.isArray(b));
document.write("</br>");
document.write((b instanceof Array));
</script>
</body>
</html>출력 결과
true true false false
이번에는 새로운 환경(new environment), 즉 새로운 프레임을 직접 만들어서 instanceof 연산자가 그 환경에서도 정상적으로 작동하는지 확인해 보겠습니다.
다음 예제에서는 'iframe' 요소를 사용해 새로운 프레임을 생성합니다. 이후 해당 프레임 내부에서 배열과 유사한 객체를 만들어 두 방식에 모두 적용해 봅니다. instanceof는 범용적이지 않기 때문에 프레임 안에서 생성된 배열을 실제 배열로 인식하지 못하고 false를 반환하는 반면, Array.isArray()는 아래 출력 결과에서 볼 수 있듯이 true를 반환합니다.
예제
<html>
<body>
<script>
var iframeE = document.createElement('iframe');
iframeE.style.display = "none";
document.body.appendChild(iframeE);
iframeArray = window.frames[window.frames.length - 1].Array;
var a = new Array(1,2,3,"hi",4, "hello");
var b = new iframeArray(1,2,3,4);
document.write(Array.isArray(a));
document.write("</br>");
document.write(a instanceof Array);
document.write("</br>");
document.write(Array.isArray(b));
document.write("</br>");
document.write(b instanceof Array);
</script>
</body>
</html>출력 결과
true true true false
왜 이런 차이가 발생할까요?
iframe은 자체적인 JavaScript 실행 환경(realm)을 가지며, 각 환경마다 서로 다른 Array 생성자와 프로토타입이 존재합니다. instanceof 연산자는 현재 컨텍스트의 Array.prototype과 객체의 프로토타입 체인을 비교하기 때문에, 다른 환경에서 생성된 배열은 비교 기준이 맞지 않아 false를 반환하게 됩니다. 반면 Array.isArray()는 객체의 내부 슬롯을 직접 검사하므로, 배열이 어떤 환경에서 생성되었는지와 관계없이 항상 정확하게 판별할 수 있습니다. 따라서 실무에서는 배열 여부를 확인할 때 Array.isArray()를 사용하는 것이 더 안전하고 권장되는 방법입니다.