배열(Array)에 객체(Object)를 넣었을 때(Push) 발생하는 일

데이터 처리를 하다면 

배열에 객체를 푸시할 일이 종종 발생한다.

이 때 주의할 점이 있다.

Javascript 배열은 객체 자체가 아닌 해당 객체의 참조 값을 보유한다는 것이다.

즉 객체를 배열에 푸시할 시에 새로운 객체(참조값이 다름)를 푸시하는 것이 아닌  참조를 단순히 넣는 경우가 발생할 수 있다.

const ObjKeys = [
  'id',
  'intent',
  'status_msg',
  'keyword',
  'answer',
  'input_date',
  'service_type',
  'lib_name'
]

const columns = []
const headers = {}

for(let i =0; i < ObjKeys.length; i++) {

headers['header'] = ObjKeys[i]
headers['key']    = ObjKeys[i]
headers['width']  = 20

columns.push(headers)

}

console.log('columns', columns);

//예상
// columns [
//   { header: 'id', key: 'id', width: 20 },
//   { header: 'intent', key: 'intent', width: 20 },
//   { header: 'status_msg', key: 'status_msg', width: 20 },
//   { header: 'keyword', key: 'keyword', width: 20 },
//   { header: 'answer', key: 'answer', width: 20 },
//   { header: 'input_date', key: 'input_date', width: 20 },
//   { header: 'service_type', key: 'service_type', width: 20 },
//   { header: 'lib_name', key: 'lib_name', width: 20 }
// ]

// 결과
// columns [
//   { header: 'lib_name', key: 'lib_name', width: 20 },
//   { header: 'lib_name', key: 'lib_name', width: 20 },
//   { header: 'lib_name', key: 'lib_name', width: 20 },
//   { header: 'lib_name', key: 'lib_name', width: 20 },
//   { header: 'lib_name', key: 'lib_name', width: 20 },
//   { header: 'lib_name', key: 'lib_name', width: 20 },
//   { header: 'lib_name', key: 'lib_name', width: 20 },
//   { header: 'lib_name', key: 'lib_name', width: 20 }
// ]

 

위 코드를 보면

예상과 다른 결과값이 나오는 것을 알 수 있다.

 

앞서 언급한 것과 같이

배열은 객체의 참조 값을 보유하고 있기 때문이고

객체는 딱 한번만 정의하고 그 안의 프로퍼티 값만 바뀌고 있기 때문에

최종적으로 'lib_name' 값만 갖는 객체만 푸시된 것을 알 수 있다.

 

즉

{ header: 'lib_name', key: 'lib_name', width: 20 } 객체 참조 값만 8개 보유한 셈인 것이다.

 

 

이를 해결 하기 위해서는 새로운 객체를 매번 생성하여 각 객체의 참조 값이 다르게 만들면 된다.

이에 대한 코드는 다음과 같다.

 

const ObjKeys = [
  'id',
  'intent',
  'status_msg',
  'keyword',
  'answer',
  'input_date',
  'service_type',
  'lib_name'
]

const columns = []

for(let i = 0; i < ObjKeys.length; i++) {
let headers = Object.create(null);
headers['header'] = ObjKeys[i]
headers['key']    = ObjKeys[i]
headers['width']  = 20

columns.push(headers)
}

console.log('columns', columns);

//결과
// columns [
//   [Object: null prototype] { header: 'id', key: 'id', width: 20 },
//   [Object: null prototype] {
//     header: 'intent',
//     key: 'intent',
//     width: 20
//   },
//   [Object: null prototype] {
//     header: 'status_msg',
//     key: 'status_msg',
//     width: 20
//   },
//   [Object: null prototype] {
//     header: 'keyword',
//     key: 'keyword',
//     width: 20
//   },
//   [Object: null prototype] {
//     header: 'answer',
//     key: 'answer',
//     width: 20
//   },
//   [Object: null prototype] {
//     header: 'input_date',
//     key: 'input_date',
//     width: 20
//   },
//   [Object: null prototype] {
//     header: 'service_type',
//     key: 'service_type',
//     width: 20
//   },
//   [Object: null prototype] {
//     header: 'lib_name',
//     key: 'lib_name',
//     width: 20
//   }
// ]

Object.create(null)

프로퍼티가 null인 Object를 매번 생성하여 객체 참조값을 달리하도록 한 것이다.

혹은 간단히

const headers = {};

로 표현해도 된다.

 

 

 

p.s

[참조값의 중요성을 새삼 느낌]