JSON.stringify()와 JSON.parse()

개발을 하다보면, JSON 형태의 객체를 문자열 String으로 변환하고 싶거나, 반대로 문자열을 JSON 형태로 변환하고 싶은 경우가 생긴다면, 어떻게 해야 할까요?

이 때, 사용하는 메서드가 JSON.stringify()와 JSON.pase()입니다.

지금부터 이 두 메서드가 어떤 의미이며, 어떻게 사용하는 지 알아봅시다!

 

---

1. JSON.stringify()

JSON.stringify() 메서드는 객체를 JSON 형식의 문자열로 변환하는 메서드에요.

주로 데이터를 서버로 전송하거나 파일로 저장할 때, 사용합니다.

 

1-1. 사용방법

사용방법은 아주 간단합니다. 객체인 변수에 JSON.stringify()를 추가하면,  그 변수는 문자열 형태로 변환해요.

예를 들어봅시다.

const user = {
  name: "홍길동",
  age: 30,
  isStudent: false
};

const jsonString = JSON.stringify(user);
console.log(jsonString) // '{"name":"홍길동","age":30,"isStudent":false}'

user라는 객체를 JSON.stringify(user)로 하면, user의 값들을 문자열 형태로 변환할 수 있어요.

 

1-2. 객체의 배열 변환

배열도 JSON 문자열로 변환할 수 있습니다.

예를 들어볼께요.

const array = [1, 2, 3, 4];
const jsonString = JSON.stringify(array);
console.log(jsonString); // '[1,2,3,4]'

array라는 변수를 JSON.stringify(array)로 하면, 배열도 문자열로 변환할 수 있습니다.

 

또한, 두 번째 인자로 배열을 전달하면, 해당 속성만 포함하여 변환할 수 있어요.

const user = {
    name: "홍길동",
    age: 30,
    isStudent: false
};

const jsonString = JSON.stringify(user, ["name", "age"]);
console.log(jsonString) // {"name":"홍길동","age":30}'

두 번째 인자로 ["name", "age"]를 주었기에 console.log에 name과 age만 나타나게 됩니다.

 

1-3. 변수 함수 사용

세 번째 인자로 들여쓰기를 위한 공백 수를 저장할 수 있어요.

예를 들어 봅시다.

const user = {
    name: "홍길동",
    age: 30,
    isStudent: false
};

const jsonString = JSON.stringify(user, null, 2);
console.log(jsonString);
/*
{
  "name": "홍길동",
  "age": 30,
  "isStudent": false
}
*/

여기서 마지막 인자인 2는 JSON 문자열을 포맷할 때, 사용할 들여쓰기(공백)의 수를 지정하는 것이에요. 즉, 2칸 씩 들여쓰기가 되는 것이죠.

 

---

2. JSON.parse()

JSON.parse()는 JSON 형식의 문자열을 객체로 변환하는 메서드입니다.

주로 서버로부터 받은 JSON 데이터를 JavaScript에서 사용할 수 있는 객체로 변환할 때, 사용해요.

 

2-1. 사용방법

사용 방법은 다음과 같습니다.

const jsonString = '{"name": "홍길동", "age": 30}';
const user = JSON.parse(jsonString);

console.log(user.name); // "홍길동"
console.log(user.age); // 30

문자열 변수인 jsonString을 JSON.parse(jsonString)로 하면, 객체로 변환하여, console.log(user.name)처럼 특정 키의 값을 출력할 수 있어요.

 

2-2. 구문 오류 처리

잘못된 JSON 형식의 문자열을 파싱하려고 하면, SyntaxError가 발생합니다. 변수의 값이 제대로 된 JSON 형태가 맞는 지 확인할 때, 사용하면 좋을 것 같아요.

const jsonString = '{"name": "홍길동", "age":}';
try {
  const user = JSON.parse(jsonString);
} catch (error) {
  console.log("파싱 오류: ", error);
}

jsonString의 값이 올바른 JSON 형태가 아니여서 JSON.parse(jsonString)을 할 때, 오류가 발생하게 됩니다.

 

2-3. 변환 함수 사용

JSON.parse()는 두 번째 인자로 변환 함수를 받을 수 있어요. 이 함수는 각 키-값 쌍을 변환할 때, 사용합니다.

const jsonString = '{"name": "홍길동", "age": 30}';
const user = JSON.parse(jsonString, (key, value) => {
  if (key === 'age') {
    return value + 1 // age + 1
  }
  return value;
});

console.log(user.age); // 31

JSON.parse(jsonString)에서 key가 age일 경우, value + 1을 합니다. 즉, age의 값인 30에서 31로 되는 것이죠.

 

---

3. 정리하며

지금까지 JSON.stringify()와 JSON.parse() 메서드에 대해 알아보았습니다.

이를 활용하여, 문자열에서 JSON으로, JSON에서 문자열로 원하는 방식으로 변환할 수 있을 것 같아요!

 

참고

sewonzzang123 님의 [JavaScript] JSON stringify 사용법, parse 사용법(JSON과 메서드)

누리 님의 [ Javascript ] string을 json 으로, json을 string 으로 변환 방법

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