[JavaScript] JSON.stringify가 빈 배열을 반환하는 경우 (JSON.stringify returns an empty array)

object에 이것저것 property를 실컷 세팅해놓고 JSON.stringify() 함수에 담갔다 뺐더니 빈 배열을 표시하는 문자열만 반환되는 허무한 경우가 있었다.

// 최초 선언부분은 아직 비밀이다..;
 
arr['name'] = '백충덕';
arr['age']  = 100;
 
console.log(JSON.stringify(arr));
// 콘솔에 찍힌 값은 "[]"

원인은 arr 변수가 object가 아니라 array로 선언되었던 것이었다.

var arr = []; // 혹은 new Array();
 
arr['name'] = '백충덕';
arr['age']  = 100;
 
console.log(JSON.stringify(arr));
// 콘솔에 찍힌 값은 "[]"

잠시 정신이 나간 상태에서 신내림을 받고 코딩하다 일어날 수 있는 실수인데,

array의 경우 일반적으로는 object처럼 named property를 이용해서 값을 할당하거나 꺼내 쓰거나 할 수 있지만,

JSON.stringify()의 경우 array의 named property(non-enumerable property)는 무시하는 방식으로 동작한다는게 문제다.

쉽게 이해하기 위해 부연하자면,

array에는 length 같은 built-in property가 있지만 console.log() 함수로 출력해보면 length는 출력되지 않는 것과 동일하다고 보면 된다.

array라도 named property가 아니라 정상적인 index를 할당받은 값은 JSON.stringify를 이용해 문자열로 변환이 가능하다.

// 1. 위의 array 문제의 경우 선언할 때 아래처럼 object로 선언하면 정상동작함.
var arr = {};
 
arr['name'] = '백충덕';
arr['age']  = 100;
 
console.log(JSON.stringify(arr));
// 콘솔에 찍히는 값은 {"name":"백충덕","age":100}
 
// 2. array의 경우에도 named property가 아니라 정상적으로 할당된 index를 가진 값은 JSON.stringify()가 정상동작함.
var arr = [];
 
arr[0] = '백충덕';
arr.push(100);
arr['named_property'] = '이건 안나온다';
 
console.log(JSON.stringify(arr));
// 콘솔에 찍히는 값은 ["백충덕",100]

[참고]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify