[JavaScript] JSON.stringify(), JSON.parse()사용법

자바스크립트에서 자주 사용하는 JSON 이라는 데이터 유형과,
이를 활용할 때 사용하는 stringify, parse 사용법에 대해 알아보자.

 

1) JSON?

: JavaScript Object Notation 의 약자로 "자바스크립트 객체 표기법"을 뜻한다.
텍스트 기반으로 데이터를 쉽게 교환하고 저장하기 위한 데이터 타입이다.

• Ajax로 서버와 통신
• 텍스트(문자) 기반

 

2) JSON의 구조

• JSON의 자료형은 string, number, true, false, null, object, array가 올 수 있다.
• key : value 형태의 구조를 가지고 있다.
• 중괄호 {} 로 감싸게 되며, 이는 객체(Object)를 의미한다.
• key 값은 문자열이기 때문에 쌍따옴표 "" 를 붙여줘야 하고, value에는 기본 자료형, 배열 혹은 객체를 넣으면 된다.

예시

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

자바스크립트에서 JSON 데이터 타입을 사용하기 위해 아래 두 개의 메소드를 제공하고 있다.

1. JSON.stringify(arg)
2. JSON.parse(arg)

두 메소드의 사용 목적은 객체와 문자열로의 변환 이다.

 

3) JSON.stringify()

: 객체를 문자열로 변환하는 함수이다.

• JavaScript 객체를 JSON 문자열로 변환

예시

const obj = {
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "수영"],
  "jobs": null
};
const str = JSON.stringify(obj);
console.log(str);

 

결과값

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

 

4) JSON.parse()

: 문자열을 객체로 변환하는 함수이다.

• JSON 문자열을 JavaScript 객체로 변환

예시

const str = `{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "수영"],
  "jobs": null
}`;
const obj = JSON.parse(str);
console.log(obj);
console.log(obj.name + ", " + obj.age);

 

결과값

> {name: '홍길동', age: 25, married: false, family: {…}, hobbies: Array(2), …}
홍길동, 25

위 결과값을 보면, obj 값은 JSON 형태로 출력된 것을 알 수 있고,
객체의 각 요소들은 obj.name 등의 형태로 접근할 수 있는 것을 알 수 있다.

 

 

[reference]
https://gxnzi.tistory.com/61
https://www.daleseo.com/js-json/