JSON.parse(), JSON.stringify()

JSON 이란?

 

JSON란 javaScript Object Notaion 의 약자로 네트워크 전송방식 중 하나이며 XML을 대체하는 주요 데이터 포맷이다.

특히 인터넷에서 자료를 주고 받을 때 자료를 표현하는 방법이며, 변수 값을 표현하는데 적합하다.

 

JSON.stringify()

JSON.stringify()는 javascript의 값이나 객체(object)를 문자열(string) 값으로 변환해준다.

다음 예시를 살펴보자

 

const nameObject = {name: "junho"}
console.log(typeof nameObject)
//object

const WhatIsStringify = JSON.stringify(nameObject)
console.log(typeof WhatIsStringify)
//string

console.log(WhatIsStringify)
//{"name": "junho"}

 

object를 JSON.parse 값에 넣어주면 그 값의 타입은 string으로 변한다. 눈여겨 볼 점은 nameObject의 key 값인 name이 "name" 으로 변환되었다는 것이다.

 

다음 간단한 예제를 살펴보자

console.log(typeof true) //true

JSON.stringify(true) //"true"
console.log(typeof JSON.stringify(true)) // string 

console.log(typeof 55) //number

JSON.stringify(55) //"55"
console.log(typeof JSON.stringify(55)) //string

boolean 값인 true값을 stringify를 사용하면 "true"로 바뀌어 string값으로 변환된다.

number값인 55 또한 stringify를 사용하면 string값으로 변환되는 것을 확인할 수 있다.

 

JSON.parse()

JSON.parse()는  문자열(string)을 javascript의 값이나 객체(object)를 변환해준다.

위에 살펴보았던 stringify()랑 반대라고 생각하면 된다.

const nameObject = '{"name": "junho", "age": "19"}'
console.log(typeof nameObject)
//string

const WhatIsParse= JSON.parse(nameObject)
console.log(typeof WhatIsParse)
//Object

console.log(WhatIsParse)
//{name: "junho", age: "19"}

위 예시와 같이 JOSN.parse는 string을 obect를 바꾸어준다.

 

 

그렇다면 이것들을 왜 사용할까?

서버로 데이터를 보내야 할 때 object를 문자열(string)으로 전송해야하기 때문에 JSON.stringify()를 사용해서 타입을 변환하여 준다.

반대로 서버에서 받은 데이터를 사용할 때는 string으로 되어있기 때문에 자바스크립트로 사용하기 위해서 string 형태가 아닌 obect형태로 변환시켜줘야하기 때문에 JSON.parse()를 사용한다.