JavaScript에서 객체 값으로 숫자를 반복하고 결과를 배열로 출력하는 방법

개요

JavaScript에서 객체의 키 값을 기준으로 숫자를 반복 처리하고, 그 결과를 새로운 배열로 만들어야 하는 경우가 종종 있습니다. 예를 들어 다음과 같이 객체 값으로 구성된 숫자 데이터가 있다고 가정해 보겠습니다.

var numberObject = { 2: 90, 6: 98 }

이럴 때 Array.from() 메서드를 활용하면 아주 간단하게 해결할 수 있습니다.

Array.from()을 활용한 해결 방법

Array.from()은 유사 배열 객체(array-like object)를 기반으로 새로운 배열을 생성하는 메서드입니다. 두 번째 인자로 전달되는 콜백 함수를 이용하면 각 요소의 값을 원하는 형태로 변환할 수 있습니다.

var fillThePositionValue = Array.from(
  { length: 15 },
  (value, index) => numberObject[index + 1] || "novalue"
)

위 코드의 동작 방식을 살펴보면 다음과 같습니다.

{ length: 15 } : 길이가 15인 유사 배열 객체를 만들어 총 15개의 요소를 가진 배열을 생성합니다.
(value, index) : 콜백 함수는 현재 값(value)과 인덱스(index)를 매개변수로 받습니다.
numberObject[index + 1] : 인덱스에 1을 더한 값을 객체의 키로 사용하여, 1번째부터 15번째 위치까지 객체에 해당 키가 있으면 그 값을 가져옵니다.
|| "novalue" : 해당 키가 객체에 존재하지 않아 값이 undefined일 경우, 대체 문자열 "novalue"를 할당합니다.

예제 코드

객체 값으로 숫자를 반복하고 결과를 배열로 출력하는 전체 코드는 다음과 같습니다.

var numberObject = { 2: 90, 6: 98 }
console.log("원본 객체:");
console.log(numberObject);
var fillThePositionValue = Array.from(
  { length: 15 },
  (value, index) => numberObject[index + 1] || "novalue"
)
console.log("값을 채운 후의 결과 배열:");
console.log(fillThePositionValue)

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다.

node fileName.js

여기서는 파일 이름이 demo215.js라고 가정하겠습니다.

node demo215.js

실행 결과

실행 결과는 다음과 같습니다.

PS C:\Users\Amit\JavaScript-code> node demo215.js
원본 객체:
{ '2': 90, '6': 98 }
값을 채운 후의 결과 배열:
[
  'novalue', 90,
  'novalue', 'novalue',
  'novalue', 98,
  'novalue', 'novalue',
  'novalue', 'novalue',
  'novalue', 'novalue',
  'novalue', 'novalue',
  'novalue'
]

결과 해석

출력 결과를 보면 배열의 2번째 위치(인덱스 1)에는 객체의 키 2에 해당하는 값 90이, 6번째 위치(인덱스 5)에는 키 6에 해당하는 값 98이 들어간 것을 확인할 수 있습니다. 나머지 위치는 객체에 해당 키가 없기 때문에 모두 'novalue' 문자열로 채워졌습니다.

이처럼 Array.from()과 콜백 함수, 논리 OR(||) 연산자를 조합하면 객체의 키-값 쌍을 기반으로 손쉽게 배열을 생성하면서 기본값까지 설정할 수 있습니다.