코딩 팁

JavaScript Array to Object 변환 3가지 방법

코딩 기록 vicddory 2019. 12. 11. 07:00
반응형

아래와 같은 JavaScript 배열을 객체로 변환하고자 합니다.


['a','b','c']


위 배열을


{

  0: 'a',

  1: 'b',

  2: 'c'

}


이런 오브젝트로 변환하는데 몇 가지 방법이 있습니다. 자바스크립트 2가지 방법 + jQuery 1가지 방법, 총 3가지 소개합니다.

1. ECMAScript 6 : Object.assign


Object.assign() 함수는 열거 가능한 값을 하나씩 대상 오브젝트로 복사할 때 사용합니다.


Object.assign({}, ['a','b','c']); // {0:"a", 1:"b", 2:"c"}


length 배열은 열거할 수 없어서 복사되지 않습니다.


ES6 스프레드 사용하여 같은 결과를 얻을 수도 있습니다.


{ ...['a', 'b', 'c'] }


2. 중간에 변경할 값이 있다면


function toObject(arr) {

  var rv = {};

  for (var i = 0; i < arr.length; ++i)

    rv[i] = arr[i];

  return rv;

}


위 함수를 이용해 배열의 특정 위치 값만 변경하여 오브젝트로 복사할 수 있습니다.


또한, 중간에 비어있는 값을 제어할 수도 있습니다.


function toObject(arr) {

  var rv = {};

  for (var i = 0; i < arr.length; ++i)

    if (arr[i] !== undefined) rv[i] = arr[i];

  return rv;

}


undefined 속성을 알아내어 보다 꼼꼼하게 복사할 수 있죠.


최신 자바스크립트 런타임에서는 다음과 같이 .reduce()를 응용해도 됩니다.


var obj = arr.reduce(function(acc, cur, i) {

  acc[i] = cur;

  return acc;

}, {});


결과는 2번째 JavaScript 소스와 동일합니다.


3. jQuery를 사용한다면


$.extend({}, ['a', 'b', 'c']);


간단하게 extend를 이용하면 됩니다.



관련 글

javascript 형태: date format을 JSON 포맷으로

JavaScript HashMap 사용 put get 예제 (값 가져오기)

자바스크립트 날짜 계산 소스 (Date 함수)

반응형
그리드형