[Javascript] JSON.parse(), JSON.stringify()에 대해 알아보자

JSON은 자바스크립트의 객체 표기법을 제한해서 만든 '텍스트'기반의 데이터 교환 표준이다.

JSON은 여러가지 데이터를 받아와 활용을 할때 많이 사용이 된다.

---

오늘은 JSON.parse()와 JSON.stringify()에 대해서 알아보려고 한다. 알아보기 위해 예시로 서울시 일별 평균 대기오염도 정보를 JOSN형식으로 받아온다.

위 사진 우측 하단의 JSON버튼을 누르면 서울시 일별 평균 대기오염도 정보가 JSON형식으로 다운로드가 된다.

다운로드하여 열면 아래와 같이 데이터가 들어있다

JSON.parse()와 JSON.stringify의 개념을 알기 위한 포스트이므로 저렇게 많은 데이터는 필요없다. 

딱 2줄만 해보자.

두 줄의 데이터만 가져와 data라는 변수안에 넣었다.

그런데 여기서 알아둬야 할 점은 원래 웹 상에서 데이터를 받아올 때는 위와 같이 받아오지 않는다는 것이다. 위의 사진에서는 서울시 대기오염도 JSON 파일을 다운로드 받아 열었을 때이다.

원래는 데이터를 받아오면 문자열로 받아온다. 아래와 같이 사진으로 되어있다.

그런데 문제는 data가 문자열로 되어있기 때문에 콘솔을 해도 undefined가 출력된다.

console.log(data[0].co);  // undefined

---

eval( ) & JSON.parse( )

그렇다면 데이터를 받아오면 문자열인데 어떻게 저 데이터를 활용할 수 있지? 라는 생각이 든다.

이럴 때 사용하는 것이 JSON.parse()이다.

사실 JSON.parse()를 사용하지 않아도 eval()함수를 사용하면 불러온 데이터의 형식을 배열 형식으로 바꿀 수 있다.

eval()을 사용해서 불러온 데이터를 활용할 수도 있지만, eval()함수는 보안상에 취약하다. 왜냐하면 누군가 함부로 손댄(예를 들어 네트워크에서 가져온)코드를 실행시키게 될 수도 있기 때문이다.

eval()함수를 대체해서 사용할 수 있는 것이 JSON.parse()이다.

eval()과 JSON.parse()의 결과값은 동일하다.

---

JSON.stringify( )

JSON.parse()가 불러온 데이터의 자료형을 문자열에서 배열로 바꿔줬다면 JSON.stringify()는 말 그대로 배열에서 문자열로 바꾸는 것이다.

var data = [
{name: "Kim", age: 30},
{name: "Lee", age: 40}
];

var stringData = JSON.stringify(data);
console.log(stringData); 
/*
"[
{"name": "Kim", "age": 30},
{"name": "Lee", "age": 40}
]"
*/