[JavaScript] 배열 만들기

Overview

웹 애플리케이션을 만들다 보면 원하는 크기 만큼의 배열을 생성하고 싶을 때가 있습니다.

사실 자바스크립트의 배열은 일반적인 프로그래밍에서 정의하고 배우는 밀집 배열이 아니기 때문에 런타임 중 자유롭게 배열에 요소를 추가하고 삭제하고 할 수 있습니다. 컴파일 시점에 데이터의 갯수가 정해져 있고, 이를 배열로 구현해야 하는 경우에는 어떻게 해야 할까요?

 

for

const dates = [];

for (let i = 1; i <= days; i++) {
  dates.push(`${i}일`);
}

for문을 활용해 계산된 days만큼 loop를 돌아서 날짜를 만들고, 생성한 날짜를 배열에 밀어 넣습니다. 가장 간단한 방법이면서 기초 문법만으로도 쉽게 구현할 수 있는 방법입니다.

 

Array.from

Array.from은 정적 메서드로 순회가 가능하거나 유사 배열 객체를 얕게 복사해 새로운 Array로 만들어주는 메서드 입니다.

여기서 순회 가능한 객체란 Map, Set과 같은 객체를 말하고, 유사 배열 객체란 length 속성과 인덱싱된 요소를 가지고 있는 객체를 뜻합니다.

 

Array.from 메서드에 첫 번째 인자에 length를 가지고 있는 객체를 넘겨주고, 두 번째 인자로 배열의 모든 요소에 대해 호출할 함수(mapFn)를 넘겨줄 수 있습니다. mapFn의 첫 번째 인자로는 각 인덱스의 요소를, 두 번째 인자로는 인덱스를 받을 수 있습니다.

const dates = Array.from({ length: days }, (_, idx) => `${idx + 1}일`);

 

패러다임

구현하는 방식은 다르지만 요구사항은 같습니다. 단순히 해당 월의 첫 날부터 마지막 날을 담은 배열이 필요한 것 입니다. 그럼 for문을 활용해 쉽게 구현할 수 있는 방법을 제치고, 굳이 Array.from 메서드를 사용해야 하는 경우가 있을까요?

만약 팀에서 함수형 프로그래밍을 택해서 프로그래밍을 하고 있다면 for문을 활용해 명령형으로 프로그래밍 하는 것이 어려울 것 입니다.

이때 Array.from 메서드를 활용한다면 함수형 프로그래밍 패러다임을 지키며 요구사항을 손쉽게 구현할 수 있습니다.