JSON, JSON.parse()와 JSON.stringify()

Deepdive p 819참고

JSON(JavaScript Object Notaion): 클라이언트와 서버 간의 HTTP통신을 위한 텍스트 데이터 포맷. 자바스크립트에 종속되지 않는 언어 독립형 데이터 포멧으로 대부분의 프로그래밍 언어에서 사용할 수 있다.

JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트이지만 JS의 객체 리터럴과 약간은 다르다. JSON의 키는 반드시 큰따옴표(작은따옴표 사용 불가)로 묶어야 한다. 값은 객체 리터럴과 같은 표기법을 그대로 사용할 수 있다. 하지만 문자열은 반드시 큰따옴표(작은 따옴표 사용불가)로 묶어야 한다.

서버에서 클라이언트로의 데이터전송, 클라이언트에서 서버로의 데이터 전송 모~두 JSON포멧의 문자열로 이루어진다. 

직렬화(Serializing):  특정 언어의 내장 타입 객체 ==>> 문자열

역직렬화(Deserializing): 문자열 ==>> 특정 언어의 내장 타입 객체

1. JSON.stringify

JSON.stringify 메서드는 객체를 JSON포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화(serializing)라 한다. (자세한 예시는 Deepdive p 819참고)

2. JSON.parse

JSON.parse메서드는 JSON포멧의 문자열을 객체로 변환한다. 서버에서 클라이언트로 데이터가 전송될때 역시 문자열 형태로 전송이 되고 이것을 받은 클라이언트가 문자열을 객체로 바꾸기 위하여 JSON.parse메서드가 사용된다.

출처: https://www.daleseo.com/js-json/

JSON 이란?

자바스크립트의 JSON 내장 객체에 대해서 배우기 전에 먼저 JSON이 무엇인지에 대해서 간단하게 짚고 넘어가겠습니다.

JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용됩니다. 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포맷입니다. JSON은 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 많이 사용되기 때문에 어렵지 않게 접할 수 있습니다.

 

JSON이 빠르게 기존에 사용되던 XML과 같은 데이터 포맷을 대체한 이유는 무엇보다도 가독성일 것입니다. JSON 포맷의 데이터는 기계뿐만 아니라 사람이 읽기에도 크게 무리가 없습니다.

예를 들어, 한 사람의 데이터를 JSON 포맷으로 나타내보겠습니다. 어떤까요? 한 눈에 파악이 되죠? 👀

{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "도술"],
  "jobs": null
}

 

JSON으로는 객체, 배열, 숫자, 문자열, 불리언(boolean), 널(null)과 같은 다양한 데이터를 나타낼 수 있는데요. JSON의 문법은 매우 간단하고 자바스크립트와 상당히 유사하기 때문에 본 포스팅에서 세세하게 다루지는 않겠습니다. 자바스크립트 개발자라면 누구나 금방 친숙해질 수 있을테니 걱정하지 마시고 따라 오시면 됩니다.

 

JSON 내장 객체

자바스크립트에서는 JSON 포맷의 데이터를 간편하게 다룰 수 있도록 JSON이라는 객체를 내장하고 있습니다. 이 객체는 자바스크립트 코드를 브라우저에서 실행하든 Node.js 런타임에서 실행하든 상관없이 전역(global)에서 접근이 가능합니다.

JSON 내장 객체는 JavaScript 객체와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공합니다.

 

JSON.parse(): JSON 문자열을 JavaScript 객체로 변환

JSON 문자열을 JavaScript 객체로 변환할 때는 JSON 객체의 parse() 메서드를 사용합니다. parse() 메서드는 JSON 문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환합니다.

예를 들어, 위에서 예시로 들었던 JSON 문자열을 str이라는 변수에 저장하겠습니다.

const str = `{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "도술"],
  "jobs": null
}`;

그 다음, JSON.parse() 메서드에 str을 인자로 넘겨 호출해보겠습니다. 결과값을 obj라는 변수에 저장하겠습니다.

const obj = JSON.parse(str);

obj에 저장된 값을 콘솔에 출력해보면 JSON 문자열 형태의 데이터가 JavaScript 객체의 형태로 변환되어 출력되는 것을 확인할 수 있습니다.

console.log(obj);

{
    name: "홍길동",
    age: 25,
    married: false,
    family: {
        father: "홍판서",
        mother: "춘섬"
    },
    hobbies: [
        "독서",
        "도술"
    ],
    jobs: null
}

출력 결과를 자세히 관찰해보시면 JavaScript 객체와 JSON 문자열 간에는 아주 미묘한 차이가 있는 것을 알 수 있습니다. JSON 문자열에서는 키(key)를 나타낼 때 반드시 쌍따옴표로 감싸줘야 하는 반면에, JavaScript 객체에서는 쌍따옴표를 꼭 사용할 필요는 없습니다. (특수 문자나 영어 외의 언어와 같이 키로 허용되지 않는 문자를 키로 사용해야하는 경우에는 쌍따옴표를 사용해야 합니다.)

 

이렇게 JavaScript 객체로 변환된 데이터는 .나 [] 기호를 사용하여 각 속성에 접근할 수 있습니다.

> obj.name
< '홍길동'
> obj.age
< 25
> obj.married
< false
> obj.family
< {father: '홍판서', mother: '춘섬'}
> obj.family.mother
< '춘섬'
> obj.hobbies
< ['독서', '도술']
> obj.hobbies[1]
< '도술'
> obj.jobs
< null

 

이렇게 외부에서 문자열의 형태로 주어진 데이터를 해당 언어에서 다루기 용이하도록 내장 데이터 타입으로 변환하는 과정을 CS(Computer Science)에서는 소위 역직렬화(deserialization)이라고 부릅니다. 대표적인 사례로 클라이언트에서 JSON 포맷으로 데이터를 보내면, 서버에서 우선 JavaScript 객체로 변환한 후에 데이터를 처리하게 되는 것을 들 수 있습니다.

 

JSON.stringify(): JavaScript 객체를 JSON 문자열로 변환

역으로 JavaScript 객체를 JSON 문자열로 변환할 때는 JSON 객체의 stringify() 메서드를 사용합니다. stringify() 메서드는 JavaScript 객체를 인자로 받고 JSON 문자열을 반환합니다.

예를 들어, 위에서 parse() 메서드의 호출 결과로 얻은 JavaScript 객체를 obj이라는 변수에 저장하겠습니다.

const obj = {
  name: "홍길동",
  age: 25,
  married: false,
  family: {
    father: "홍판서",
    mother: "춘섬",
  },
  hobbies: ["독서", "도술"],
  jobs: null,
};

 

그 다음, JSON.stringify() 메서드에 obj를 인자로 넘겨 호출해보겠습니다. 결과값을 str라는 변수에 저장하겠습니다.

const str = JSON.stringify(obj);

str에 저장된 값을 콘솔에 출력해보면 JavaScript 객체의 형태였던 데이터가 JSON 형식의 문자열로 변환되어 출력되는 것을 확인할 수 있습니다.

console.log(str);

'{"name":"홍길동","age":25,"married":false,"family":{"father":"홍판서","mother":"춘섬"},"hobbies":["독서","도술"],"jobs":null}'

여기서 약간의 팁을 드리자면 변환해야하는 JavaScript 객체가 많은 양의 데이터를 담고 있는 경우에는 이렇게 한 줄의 문자열로 변환되면 알아보기 힘들어지는데요. 이럴 때는 stringify() 메서드의 3번째 인자로 들여쓰기할 공백의 크기를 지정해줄 수 있습니다.

예를 들어, 변환된 JSON 문자열이 2개의 공백으로 들여쓰기가 되도록 해보겠습니다.

const str2 = JSON.stringify(obj, null, 2);
console.log(str2);

어떤가요? 데이터를 한 눈에 알아보기가 훨씬 쉽죠? 😁

{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": {
    "father": "홍판서",
    "mother": "춘섬"
  },
  "hobbies": [
    "독서",
    "도술"
  ],
  "jobs": null
}

당연한 얘기이겠지만 이렇게 JSON 형식의 문자열로 변환된 데이터는 더 이상 .나 [] 기호를 사용하여 각 속성에 접근할 수 없게 됩니다.

> str.name
< undefined

이렇게 특정 언어의 내장 타입의 데이터를 외부에 전송하기 용이하도록 문자열로 변환하는 과정을 CS(Computer Science)에서는 소위 직렬화(serialization)이라고 부릅니다. 대표적인 사례로 서버에서 클라이언트의 요청을 처리 후에 JavaScript 객체 형태의 데이터를 JSON 형태의 문자열로 변환하여 응답하는 것을 들 수 있습니다.