자바스크립트 객체 JSON화 하기

1. JSON.stringify(), JSON.parse()

자바스크립트 객체를 JSON화 하는 방법에 대해 알아보자. 가끔 자바스크립트 객체와 JSON의 차이를 헷갈려하는 분들을 볼 수 있는데 JSON(JavaScript Object Notation)은 자바스크립트의 리터럴 표현식을 적극적으로 활용해 간단한 포맷으로 데이터를 구분할 수 있는 문자열 포맷일뿐 크게 대단한게 아니다. POJO(Plan Old Java Object) 처럼 용어를 참 잘 지은것같다.

JSON이 자바스크립트 문법을 기반으로 하고있기때문에 JSON 형태로 변경하는건 어렵지않다. 더군다나 최근의 브라우저들은 전부 내장 객체로 JSON변환을 지원한다. 내장객체명은 JSON이다.

var target = {
    age: 29,
    name: "LichKing"
};

console.log(JSON.stringify(target));

프로퍼티에 값이 할당되지 않은 undefined 프로퍼티나 데이터를 표현한다는 목적에 부합하기힘든 function 프로퍼티는 변환시 자동으로 제거된다. 참고로 null은 제거되지않고 문자열로 변환된다.

var target = {
    age: 29,
    name: "LichKing",
    address: undefined,
    birthday: null,
    run: function(){
        
    }
};

console.log(JSON.stringify(target));

JSON객체를 사용할때 자동완성이 지원되는 환경이라면 stringify 외에 parse 메서드도 있는걸 확인했을텐데 이 메서드는 JSON을 자바스크립트 객체로 변환해준다.

var target = {
    age: 29,
    name: "LichKing",
    address: undefined,
    birthday: null,
    run: function(){

    }
};

var json = JSON.stringify(target);

var deserialize = JSON.parse(json);

console.log(deserialize);

JSON으로 변환할때 사라졌던 undefined, function 프로퍼티는 재변환할때 추적할 방법이 없으므로 사라진채로 변환된다.

여기까진 많은 분들이 알고계신내용일텐데 이제 이번 포스팅을 작성하게된 계기를 만들어준 각 함수들의 2번째 인자를 확인해보자.

var target = {
    age: 29,
    name: "LichKing",
    address: undefined,
    birthday: null,
    run: function(){

    }
};

console.log(JSON.stringify(target, ["age"]));
console.log(JSON.stringify(target, function(key, value){
    return key !== "age" ? value : undefined;
}));

먼저 stringify의 2번째 인자다. 배열이나 함수를 인자로 받으며, 배열일경우 JSON 변환에 포함할 프로퍼티의 키 배열을 받는다. 함수로 넣을경우 첫번째는 target 객체 자체가 인자로 넘어오며(value에 넘어옴), 두번째 호출부터 각 프로퍼티의 key, value가 넘어와 실행되게된다.

고로 결과는 첫번째는 age프로퍼티만 들어있는 JSON이 나오게되고, 두번째는 age만 빠진 결과가 나오게된다. 객체 변환시 포함되지않길 바라는 프로퍼티가있다면 유용히 사용할 수 있을듯하다. 아마 이걸 모르고있다면 불필요 프로퍼티를 제거한 객체를 하나 더 만들어서 해결하지않았을까...

한가지 주의할 점은 두번째 인자로 함수를 넘길시에 target 객체가 넘어오는 첫번째 실행시 undefined를 반환하게되면 JSON화가 이루어지지않게된다는 점이다.

예를들어 위에있는 예제는 key가 age가 아닌필드만 걸러내는 일종의 블랙리스트 방식이므로 age만 아니면 전부 value를 리턴하지만 age만 출력하는 화이트리스트 방식의 조건문일 경우 정상적 변환이 이루어지지않는다.

console.log(JSON.stringify(target, function(key, value){
    return key === "age" ? value : undefined;
}));

value에 target 객체가 들어오는 경우 key는 ""로 들어오기때문에 key === "age"에서 false가 반환된다. 이경우엔 전체 필드에 대해 JSON 변환이 이루어지지않는다.

참고로 stringify 같은 경우 3번째 인자도 선택적으로 받게되는데 JSON 변환시 가독성을 위한 들여쓰기 공백수를 받게된다. String, Number를 인자로 받으며 String으로 들어오면 공백에 사용될 문자를, Number가 들어오면 공백개수를 지정받게된다. 말로설명은 힘드나 한번 봐보면 확 와닿을 것이다.

console.log(JSON.stringify(target, function(key, value){
    return value;
}, "&&"));

console.log(JSON.stringify(target, function(key, value){
    return value;
}, "  "));

console.log(JSON.stringify(target, function(key, value){
    return value;
}, 8));

parse() 도 두번째인자를 받게되는데 함수만 지원하며 함수 시그니처는 stringify과 같다. stringify() 의 함수인자와 동일하다.

var target = {
    age: 29,
    name: "LichKing",
    address: undefined,
    birthday: null,
    run: function(){

    }
};

var json = JSON.stringify(target);

var result = JSON.parse(json, function(key, value){
    return key !== "age" ? value : undefined;
});

console.log(result);

2. toJSON()

JSON.stringify() 에 첫번째 인자로 전달될 객체 인자가 toJSON() 메서드를 구현했다면 toJSON() 형태로 출력이 되게된다. 예제를 확인해보자.

var target = {
    age: 29,
    name: "LichKing",
    adrress: "설남시",
    birthday: "19900202",
    toJSON: function(){
        return {
            age: this.age,
            name: this.name
        };
    }
};

console.log(JSON.stringify(target));

이런식으로 특정 객체 내에서 JSON으로 변환할 프로퍼티만 모아놓은 객체를 반환하게 구현하면 된다. 잘 보면 알겠지만 toJSON() 메서드는 구현만 했을뿐 명시적 호출부분이 없다. stringify() 메서드가 내부에서 사용하는 것이다. toJSON() 메서드를 잘못 이해할경우 객체를 반환하는게 아니라 정말 JSON 문자열을 반환하게 만드는 경우가 있을 수 있는데 잘 생각해보자. 어차피 toJSON이 완성된 문자열 형태의 JSON을 반환한다면 굳이 stringify()를 호출할 필요도 없을것이다. 객체의 프로퍼티가 많고, 모든 프로퍼티를 전부 JSON화 할필요가 없다면 toJSON() 메서드를 구현해주는것도 좋을것이다.