[Javascript] JSON.stringify() 와 JSON.parse() 이란? JSON 데이터 파싱하기

오늘 알아볼 두 함수는 Javascript에서 중요한 함수이다. JSON데이터를 문자열로 변환하거나, 문자열을 다시 객체로 변환할 때 사용되는 함수이다. 각각의 역할을 알아보자.

 

 

◾ JSON.stringify()

객체 또는 배열 → JSON 문자열

이 메서드는 객체 또는 배열을 JSON 문자열로 변환한다. 

 

 

JSON 문자열로 변환

const obj = { device: 'tablet', fault: 'battery', price: 80}
const objStr = JSON.stringify(obj);

console.log(objStr); // '{"device":"tablet","fault":"battey","price":80}'

 

맨 바깥의 작은 따옴표는 생략되기도 하는 것 같다.

 

유심히 볼 것은 device와 같은 key값에도 모두 쌍따옴표("") 가 붙은 것을 볼 수 있다. JSON문법에서는 key값도 쌍따옴표가 붙기 때문이다. 

(이게 JSON문법과 Javascript에서의 객체 표기법에 있어 차이점 중 하나이다.)

 

JSON 문자열로 변환을 하는 이유는 여러가지가 있을 수 있는데, DB에 배열이나 객체를 저장을 해야할 때 JSON 형태로 변환하여 저장하기도 한다. 

 

 

◾ JSON.parse()

 

JSON 문자열 → 객체

JSON.stringify()로 변환된 JSON을 다시 객체로 복구시킬 수 있다. JSON으로 인코딩 된 객체를 원래의 객체로 디코딩하는 것이다. 

 

Javascript 객체로 변환

const obj = JSON.parse(objStr);
console.log(obj); // objParse  { device: 'tablet', fault: 'battery', price:80 }

 

JSON문자열을 Javascript객체로 변환한다. key값을 보면 device에서 다시 쌍따옴표가 사라진 `device` 형태인 것을 볼 수 있다. Javascript객체로 돌아왔기 때문이다.

 

 

◾정리

JSON.stringify()와 JSON.parse()의 큰 차이점은 JSON화, 그리고 다시 JSON이 아닌 형태로 변환한다는 점이다.

 

1. JSON.stringify() JSON화

2. JSON.parse() JSON이 아닌 형태로 다시 복구