[JavaScript]배열인지 확인하는 방법

JavaScript에서 배열을 typeof 연산자로 체크하면 object가 반환됩니다.

typeof []
// 'object'

typeof 연산자는 JavaScript에서 원시 타입만 체크 가능하므로 배열은 체크할 수 없습니다. 이번 포스팅에서는 JavaScript의 변수 또는 객체가 배열인지 확인하는 방법과 사용하면 안 되는 방법들을 소개합니다.

 

목차

1. Array.isArray
2. Object.prototype.toString.call
3. Lodash의 isArray
4. constructor의 문제점
5. instanceof의 문제점

---

Array.isArray

ECMAScript 5(ES5)에서 도입된 Array.isArray() 함수를 사용하여 배열인지 확인할 수 있습니다. 불리언 값을 반환하며, 현재 배열을 확인하는 방법으로 가장 좋은 방법입니다.

 

다음은 Array.isArray() 함수 사용 방법입니다.

console.log(Array.isArray([]))
// true

console.log(Array.isArray({}))
// false

console.log(Array.isArray(new Date()))
// false

console.log(Array.isArray(''))
// false

console.log(Array.isArray(null))
// false

console.log(Array.isArray(123))
// false

---

Object.prototype.toString.call

원시적인 방법으로 Object.prototype.toString.call() 함수가 있습니다. 객체 또는 값의 타입을 문자열로 반환합니다.

 

다음은 Object.prototype.toString.call() 함수 사용방법입니다.

console.log(Object.prototype.toString.call([]))
// [object Array]

console.log(Object.prototype.toString.call({}))
// [object Object]

console.log(Object.prototype.toString.call(new Date()))
// [object Date]

console.log(Object.prototype.toString.call(''))
// [object String]

console.log(Object.prototype.toString.call(null))
// [object Null]

console.log(Object.prototype.toString.call(123))
// [object Number]

타이핑이 많지만, JavaScript 모든 타입을 체크하며 인자에 대한 생성자의 이름을 반환합니다.

---

Lodash의 isArray

외부 라이브러리인 Lodash의 isArray() 함수를 사용하여 배열인지 확인할 수 있습니다. Lodash의 isArray() 함수는 불리언 값을 반환합니다.

console.log(_.isArray([]));
// true

console.log(_.isArray({}));
// false

---

constructor의 문제점

타입을 확인하기 위해 constructor를 사용하는 것도 좋은 방법이지만, 다중 컨텍스트(같은 도메인의 다른 iframe)에서 작동하지 않는 단점이 존재합니다. 여러 개의 iframe은 다른 컨텍스트를 가지며 하나의 컨텍스트에서 생성된 객체는 컨텍스트와 연결된 프로토타입을 가집니다.

 

객체가 다른 컨텍스트에서 접근되면 constructor은 현재 컨텍스트에서 해당 객체의 프로토타입 체인을 식별하지 못합니다.

const frameNode = document.createElement('iframe'); 
// iframe 엘리먼트 생성

document.body.appendChild(frameNode); 
// 현재 document에 위에서 생성한 iframe 엘리먼트 추가

const frameBrowser = window.frames[window.frames.length - 1]; 
// frameBrowser 변수는 위에서 생성한 iframe에 접근

frameArray = frameBrowser.Array; 
// 위에서 생성한 프레임에서 Array 객체에 접근

const newFrameArray = new frameArray('A', 'B', 'C');
// 생성한 프레임에서 배열을 생성

console.log(newFrameArray.constructor === Array); 
// false

console.log(Array.isArray(newFrameArray)); 
// true

---

instanceof의 문제점

constructor와 마찬가지로 instanceof 연산자도 다중 컨텍스트에서 작동하지 않습니다. 

const frameNode = document.createElement('iframe'); 
// iframe 엘리먼트 생성

document.body.appendChild(frameNode); 
// 현재 document에 위에서 생성한 iframe 엘리먼트 추가

const frameBrowser = window.frames[window.frames.length - 1]; 
// frameBrowser 변수는 위에서 생성한 iframe에 접근

frameArray = frameBrowser.Array; 
// 위에서 생성한 프레임에서 Array 객체에 접근

const newFrameArray = new frameArray('A', 'B', 'C');
// 생성한 프레임에서 배열을 생성

console.log(newFrameArray instanceof Array); 
// false

console.log(Array.isArray(newFrameArray)); 
// true

---

참고

▶ instanceof Array와 Array.isArray의 차이점

https://www.webatoms.in/blog/general/Difference-between-instanceOf-Array-and-Array-isArray-2f#contextId=3

Difference between `instanceOf Array` and `Array.isArray`