[JS]JSON.stringify, JSON.parse

📌 JSON(JavaScript Object Notation)

웹 개발 시, 서버와 데이터를 교환할 때 사용하는 데이터 형식은 보통 JSON 형식으로 이루어져 있다.

데이터를 외부에서 사용할 수 있게 변환하는 것을 직렬화라고 한다.

JSON은 key:value 형식으로 이루어져있다.

{
	"name": "heedonguri",
    "age": 24,
    "friends": {
    	"name": "friend1",
        "age": 25,
    },
    "hobbies": ["코딩","쇼핑"],
}

데이터 교환을 위해 만들어졌기 때문에 언어에 종속되지 않는다는 장점이 있다.

 

🤔 어디서 많이 본 데이터 형식인데..?

JS의 Object(객체)와 많이 닮았다.

---

📌 JSON과 JS Object

• JSON은 객체의 내용을 기술하기 위한 text 파일
• JS Object는 JS 엔진의 메모리에 있는 데이터 구조

서버에서 받은 데이터는 JSON 형식으로 이루어져있고,

프론트엔드에서 이 데이터를 가공하기 위해서는 JS Object로 변환하는 작업이 필요하다.

반대로 서버로 데이터를 보낼 때는 JS Object를 JSON으로 변환하는 작업이 필요하다.

 

JSON ➡️ JS Object로 변환해주는 메소드 : JSON.parse()

JS Object ➡️ JSON로 변환해주는 메소드 : JSON.stringfy()

---

📌 JSON.stringify

JSON 형식 ➡️ 문자열로 변환해주는 함수이다.

⭐️ 사용 방법

JSON.stringfy(value, replacer, space)

객체 뿐만 아니라 배열, 문자형, 숫자형, Boolean, null에도 적용가능하다.

• value(필수)
  변환하려는 값
• replacer
  변환하려는 프로퍼티를 지정하는 함수 또는 배열 
  생략하면 value의 모든 값이 문자열로 변환됨
• space
  가독성을 위해 사용할 공백 문자의 수 또는 문자열
  생략하면 공백이 없이 변환됨

⭐️ 사용 예시

모든 예시는 아래의 값으로 하겠습니다~!

🚨 콘솔 창에서 문자열을 출력할 때, 큰 따옴표를 생략하기 때문에 객체처럼 보이지만 문자열이란걸 잊지말자!

const obj = {
  name: "heedonguri",
  age: 24,
  hobbies: ["코딩", "쇼핑"],
  job: null,
  isStudent: true,
};

 

✅ 문자형, 숫자형, 배열, Boolean, null 변환

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

출력결과
{"name":"heedonguri","age":24,"hobbies":["코딩","쇼핑"],"job":null,"isStudent":true}

 

✅ replacer, space 사용

- replacer에 배열 사용

console.log(JSON.stringify(obj, ["name", "age"], 2));

출력결과
{
  "name": "heedonguri",
  "age": 24
}

 

replacer에 넣어준 name과 age 프로퍼티만 변환되고, space로 지정한 2만큼 들여쓰기가 됐다.

🚨 배열안의 프로퍼티는 무조건 문자열로 넣어야 한다.(내가 안해서 오류남ㅎ)

 

- replacer에 함수 사용

const replacer = (key, value) => {
  if (key === "age") return value + 1;
  return value;
};

console.log(JSON.stringify(obj, replacer, 2));

출력결과
{
  "name": "heedonguri",
  "age": 25,
  "hobbies": [
    "코딩",
    "쇼핑"
  ],
  "job": null,
  "isStudent": true
}

replacer에 넣어준 함수가 작동해서, age에 +1이 됐다. 

 

⭐️ 특징

1️⃣ 함수 프로퍼티, 심볼형 프로퍼티, undefiend인 프로퍼티는 무시된다.

const obj2 = {
  name: "heedonguri",
  age: 24,
  hobbies: ["코딩", "쇼핑"],
  job: null,
  isStudent: true,
  sayHello: function () { return "Hello!"; },
  [Symbol("id")]: 123,
  address: undefined,
};

console.log(JSON.stringify(obj2, null, 2));

출력결과
{
  "name": "heedonguri",
  "age": 24,
  "hobbies": [
    "코딩",
    "쇼핑"
  ],
  "job": null,
  "isStudent": true
}

 

2️⃣ 중첩된 객체도 변환 가능하다.

const obj2 = {
  name: "heedonguri",
  age: 24,
  hobbies: ["코딩", "쇼핑"],
  address: {
    city: "서울",
    zipcode: 12345
  }
};

console.log(JSON.stringify(obj2, null, 2));

출력결과
{
  "name": "heedonguri",
  "age": 24,
  "hobbies": [
    "코딩",
    "쇼핑"
  ],
  "address": {
    "city": "서울",
    "zipcode": 12345
  }
}

 

3️⃣ 순환 참조를 하는 프로퍼티가 있으면 변환이 불가능하다.

const obj2 = {
  name: "heedonguri",
};

obj2.self = obj2;
console.log(JSON.stringify(obj2));	// TypeError

obj2.self가 자기 자신을 참조하기 때문에 변환이 불가능하다.

 

4️⃣ 객체의 프로퍼티들이 순서대로 변환되지 않을 수도 있다.

const obj2 = {
  b: "banana",
  a: "apple",
  3: "three",
  1: "one",
  2: "two",
};

console.log(JSON.stringify(obj2, null, 2));

출력결과
{
  "1": "one",
  "2": "two",
  "3": "three",
  "b": "banana",
  "a": "apple"
}

숫자는 정렬되고, 문자는 순서가 유지되는 것을 볼 수 있다.

 

단순히 문자열로 변환해주는 줄 알았는데 알고보니 까다로운 녀석이였다.. 🫨

---

📌 JSON.parse

문자열 ➡️ JSON 형식으로 변환해주는 함수이다.

문자열 데이터를 특정 언어의 내장 데이터 타입으로 변환하는 과정을 역직렬화라고도 한다.

(reviver - 부활시키다)

⭐️ 사용 방법

JSON.parse(value, reviver);

• value(필수)
  변환하려는 값
• reviver
  변환 시, 특정 프로퍼티의 값을 가공할 때 사용하는 함수

⭐️ 사용 예시

✅ 기본 사용

const string = '{"name":"heedonguri","age":24,"hobbies":["코딩","쇼핑"],"job":null,"isStudent":true}';

console.log(JSON.parse(string));

출력결과
{
  name: 'heedonguri',
  age: 24,
  hobbies: [ '코딩', '쇼핑' ],
  job: null,
  isStudent: true
}

깔끔하게 변환됐다-!

 

✅ reviver 사용

const string =
  '{"name":"heedonguri","age":24,"hobbies":["코딩","쇼핑"],"job":null,"isStudent":true}';

const parsedObj = JSON.parse(string, (key, value) => {
  if (key === "job") return undefined;
  if (key === "age") return value + 1;
  return value;
});

console.log(parsedObj);

출력결과
{
  name: 'heedonguri',
  age: 25,
  hobbies: [ '코딩', '쇼핑' ],
  isStudent: true
}

job 프로퍼티는 제외되고, age 값에는 +1이 됐다.

⭐️ JSON 포맷 지키기

1️⃣ 프로퍼티 이름은 큰 따옴표로 감싸기(작은 따옴표, 백틱 X)

2️⃣ 주석 포함하면 안됨

3️⃣ new는 사용할 수 없음