Array 정적 메소드란?
자바스크립트 배열(Array) 정적 메소드는 배열 인스턴스가 아닌 Array 클래스 자체에서 호출합니다. 대표적으로 다음 세 가지를 가장 많이 사용합니다.
| 메소드 |
핵심 기능 |
한눈에 보기 |
Array.isArray() |
값이 배열인지 판별 |
Array.isArray([1]) → true |
Array.from() |
유사 배열·iterable → 진짜 배열 |
Array.from("hello") → ['h','e','l','l','o'] |
Array.of() |
전달된 값 그대로 요소로 배열 생성 |
Array.of(10) → [10] |
1. Array.isArray() – 배열 타입 판별의 표준
사용법 & 특징
Array.isArray([1, 2]); // ✔ true
Array.isArray("hello"); // ✘ false
Array.isArray({ 0: "a", length: 1 }); // ✘ false
instanceof Array 는 iframe·다중 렌더러 환경에서 실패할 수 있으므로, Array.isArray() 가 더 안전합니다.- 브라우저·Node.js 전 버전 지원 (IE9+).
2. Array.from() – iterable을 손쉽게 배열로
기본 예제
Array.from("hello"); // ['h','e','l','l','o']
Array.from(new Set([1, 2])); // [1, 2]
Array.from({ 0: "a", 1: "b", length: 2 }); // ['a','b']
매핑 함수 & thisArg
Array.from([1, 2, 3], (x) => x * 2); // [2, 4, 6]
Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]
- 두 번째 인자에 매핑 콜백을 넣어
map() 과 동일한 효과를 한 번에!
- 지원 범위: IE는 미지원 → Babel/polyfill 필요
3. Array.of() – 값 그대로 배열 생성
why new Array(1) 과 다를까?
new Array(3); // [empty × 3] (길이가 3인 *빈* 배열)
Array.of(3); // [3] (숫자 3을 요소로 갖는 배열)
다양한 타입도 즉시 배열화
Array.of(1, "a", true, { x: 1 }); // [1, "a", true, {x:1}]
- 전달된 인자가 곧 배열 요소가 됩니다.
- 구형 사파리·IE는 미지원 → polyfill 권장
실전 활용 꿀팁
1) arguments → 배열
function toArray() {
return Array.from(arguments); // 유사 배열 → 배열
}
2) NodeList → 배열, forEach 사용
const buttons = Array.from(document.querySelectorAll("button"));
buttons.forEach((btn) => (btn.disabled = false));
3) 문자열을 한 글자씩 분리
const chars = Array.from("🍎🍊"); // ['🍎', '🍊'] (UTF-16 안전)
4) Set·Map 데이터 직렬화
const nums = new Set([1, 2, 3]);
JSON.stringify(Array.from(nums)); // "[1,2,3]"
혼동 주의 ⚠️
| 표현 |
결과 |
설명 |
new Array(5) |
[empty × 5] |
길이 5, 요소 없음 |
Array.of(5) |
[5] |
값 5를 요소로 |
질문 정리
| 질문 |
답변 |
Q1. Array.isArray([])와 instanceof Array 차이? |
isArray는 서로 다른 프레임(Window) 간 배열도 인식, instanceof는 실패할 수 있음 |
Q2. Array.from() vs 스프레드([...]) 차이? |
스프레드는 iterable만, from은 유사 배열({length: n})도 변환 + 매핑 콜백 지원 |
Q3. 구형 브라우저에서 Array.of를 쓰려면? |
Babel 또는 core-js polyfill을 적용하세요. |
마무리 요약
Array.isArray 로 배열 판별 – 타입 안정Array.from 으로 iterable/유사 배열을 한 줄에 배열화 + 매핑Array.of 로 “값 그대로” 배열 생성 – new Array() 와 헷갈림 방지
댓글남기기