자바스크립트의 Array.of() 메서드는 전달받은 인수(변수)들을 요소로 하는 새로운 배열 인스턴스를 생성하는 데 사용됩니다. 인수의 개수나 데이터 타입에 관계없이, 전달된 값들이 그대로 배열의 요소가 된다는 점이 특징입니다.
Array.of() 문법
Array.of(elements...)
여기서 elements는 새로 생성될 배열에 포함될 값들로, 쉼표(,)로 구분하여 여러 개를 전달할 수 있습니다.
Array.of()와 Array 생성자의 차이
Array.of()는 new Array() 생성자와 비슷해 보이지만 중요한 차이가 있습니다. new Array(5)는 길이가 5인 빈 배열을 만들지만, Array.of(5)는 요소 5 하나만 담긴 길이 1짜리 배열을 생성합니다. 이러한 동작 차이 때문에 특정 개수의 값을 안전하게 배열로 만들고 싶을 때 Array.of()가 유용합니다.
예제 1: 숫자 값으로 배열 생성하기
버튼을 클릭하면 Array.of()로 생성된 배열이 콘솔에 출력되도록 구현한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>데모 제목</h2>
<p>버튼을 클릭하면 콘솔에 값이 출력됩니다.</p>
<button onclick="display()">결과 보기</button>
<p id="test"></p>
<script>
function display() {
console.log(Array.of(10, 20, 30, 40, 50));
}
</script>
</body>
</html>실행 결과
「결과 보기」 버튼을 클릭한 뒤 브라우저 개발자 도구(F12)의 콘솔(Console) 탭을 확인하면 다음과 같이 [10, 20, 30, 40, 50]이라는 배열이 출력된 것을 볼 수 있습니다.
예제 2: 문자열 값으로 배열 생성하기
숫자뿐 아니라 문자열도 동일한 방식으로 배열 요소로 만들 수 있습니다. 아래 예제에서는 상위 5위 학생 이름을 배열로 생성하여 출력합니다.
<!DOCTYPE html>
<html>
<body>
<h2>데모 제목</h2>
<p>상위 5위 학생 이름 가져오기...</p>
<button onclick="display()">결과 보기</button>
<p id="test"></p>
<script>
function display() {
console.log(Array.of("Kevin", "Tom", "Ryan", "Jacob", "Jack"));
}
</script>
</body>
</html>실행 결과
「결과 보기」 버튼을 클릭하고 콘솔을 확인하면 다음과 같이 5개의 이름이 담긴 배열이 출력됩니다.
정리
Array.of()는 전달된 인수를 그대로 요소로 갖는 새 배열을 반환하는 ES6(ECMAScript 2015) 메서드입니다. 숫자, 문자열 등 다양한 타입의 값을 유연하게 배열로 만들 수 있으며, 단일 숫자 인수가 배열 길이로 해석되는 Array 생성자의 모호한 동작을 피하고 싶을 때 특히 유용합니다.