[JavaScript]JSON parse 와 JSON stringify 차이

JSON이란?

JSON(JavaScript Object Notation)은 데이터를 객체로 표현하는 형식으로 JavaScript의 객체 형식을 모방합니다. 처음에는 JavaScript 전용으로 만들어졌지만, 현재는 Java, Python, Go, C#과 같은 다른 프로그래밍 언어에서도 JSON 형식을 사용하여 클라이언트-서버 간 데이터를 공유하는데 사용되고 있습니다.

 

이번 포스팅에서는 JSON.parse와 JSON.stringify의 차이를 설명합니다.

 

목차

1. JSON.parse
2. JSON.stringify

---

JSON.parse

JSON.parse는 JSON 문자열을 파싱합니다.

 

파싱이란?

문장을 문법적 부분으로 나누고 나누어진 부분을 식별하는 것입니다. JSON은 문장을 <key> : <value> 관계로 식별합니다. 

 

클라이언트-서버 간 통신에서 서버가 클라이언트에게 전달하는 데이터는 문자열입니다. JSON.parse()를 사용하면, 데이터를 파싱 하여 JavaScript 객체로 변환합니다. 파싱 하기 전에는 단순 문자열이며, 문자열에 인코딩 된 데이터에는 접근할 수 없습니다. 데이터에 접근하기 위해서는 JSON.parse()의 결과인 JavaScript Object를 이용합니다.

 

다음은 JSON 문자열을 파싱 하는 코드입니다.

const jsonStr = '{"Age": "30"}';
const obj = JSON.parse(jsonStr);

console.log(obj);

실행 결과

 

JSON.parse() 함수의 reviver 매개변수를 사용하면, Object를 반환하기 전에 데이터를 변환(가공)할 수 있습니다.

 

다음은 reviver 매개변수를 사용하는 코드입니다.

const jsonStr = '{"Age": "30", "Name": "Kang"}';
const obj = JSON.parse(jsonStr, (key, value) => key ==='Age' ? value * 2 : value);

console.log(obj);

실행 결과

key가 'Age'인 경우 value에 * 2 연산을 하며, key가 'Age'가 아닌 경우 value를 변환하지 않습니다.

 

JSON 문자열에서 뒤에 쉼표가 있는 경우 JSON.parse()에서 구문 오류가 발생합니다.

---

JSON.stringify

JSON.stringify는 JavaScript Object를 JSON 문자열로 변환합니다.

 

JSON.parse가 서버가 클라이언트에게 전달하는 데이터를 파싱하는 용도였다면, JSON.stringify는 클라이언트가 서버에게 데이터를 전송할 때 사용됩니다.

 

다음은 JavaScript Object를 JSON 문자열로 변환하는 코드입니다.

const obj = {Age: 30, Name: "Kang"};
const jsonStr = JSON.stringify(obj);

console.log(jsonStr);

실행 결과

 

JSON.stringify() 함수는 세 개의 매개변수를 가집니다.

 

첫 번째 매개변수는 JSON 문자열로 변환할 Object입니다.

 

두 번째 매개변수는 replacer 함수입니다.

 

replacer 함수는 key와 value 두 개의 매개변수를 받으며, 필터링 용도로 사용할 수 있습니다.

 

replacer 함수에서 undefined를 반환하면, 해당 속성은 JSON 문자열에 포함되지 않습니다.

 

다음은 JSON.stringify() 함수의 replacer 함수를 사용한 코드입니다.

const obj = {Age: 30, Name: "Kang"};

function replacerFunc(key, value) {
  if(key === "Name") {
    return undefined;
  }
  return value;
}
const jsonStr = JSON.stringify(obj, replacerFunc);

console.log(jsonStr);

실행 결과

 

세 번째 매개변수는 JSON 문자열의 가독성을 위해 공백을 삽입하는데 사용됩니다. 세 번째 매개변수가 생략되거나 빈 문자열("") 또는 null이면, 공백이 추가되지 않습니다.

const obj = {Age: 30, Name: "Kang"};
const jsonStr = JSON.stringify(obj, null, ' ');

console.log(jsonStr);

실행 결과