FE/JavaScript

[JSON] JSON.stringify와 JSON.parse의 차이점

콩다영 2022. 2. 25.
728x90

JSON.stringify 와 JSON.parse의 차이점 및 사용시점 알기


AJAX 통신을 하다 보면 누구나 한 번쯤은 JSON.stringify와 JSON.parse를 접해봤을 거고
누군가는 왜 사용하는지 헷갈리는 경우가 있을 것이다.

 



JSON.stringifyJSON.parse의 차이점을 비교해보며 각각 어떤시점에 사용해야 하는지 확실하게 알아두자 ! ! !

 



먼저 JSON을 간략하게 정의하면,
JavaScript Object Notation의 약자로, Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷.
웹 애플리케이션에서 데이터를 전송할 때 일반적으로 사용한다.

(브라우저와 서버 사이에서 오고 가는 데이터의 형식)

 

여기에 간단히 JSON.stringify와 JSON.parse를 비교해보면,

 

JSON.stringify()는 데이터를 전송하기 전에 javascript 객체를 JSON 텍스트로 변환해주는 것이고

JSON.parse()는 AJAX통신으로 받은 JSON형태의 데이터를 javascript 객체로 변환해주는 역할을 해준다.

간단하죠 ? - u - ㅎㅎㅎ

 



아래는 JSON.stringify()와 JSON.parse()의 특징(?)들을 정리해보았다 !

각각의 특징들을 유의해두고 JSON 데이터를 주고받을 때 잘 사용할 수 있도록 :) +++




* JSON.stringify()
: JavaScript 객체 -> JSON 텍스트로 바꾸고 해당 JSON 텍스트를 문자열에 저장할 때 사용.
: 객체나 배열을 JSON 문자열로 직렬화 하기 위해 사용.
: value의 데이터 타입이 number 또는 boolean일 경우, 그 값 자체를 그대로 가져오고 데이터 타입은 string(문자열)이 된다.
value의 데이터 타입이 string, 배열, 객체일 경우 그 값 자체가 string이 된다. 객체일 경우 객체의 속성(property)들은 꼭 순서대로 문자열화 되지 않는다는 점도 알아두자 !
: value가 배열인데 배열 안에 undefined, 함수, symbol이 있을 경우 이런 값들은 null로 변환된다. 단, 객체일 경우에는 이런 값들은 생략된다.


* JSON.parse()
: JSON 텍스트 문자열을 JavaScript 객체로 변환할 때 사용.
: JSON 형태로 받은 data를 구문 분석하여 선택적으로 생성된 값을 변환하기 위해 사용.

 

 

 

var kongda = {
	"name" : "dayoung" ,
	"age" : "26"
};


$.ajax({
	type : 'POST',
	url : '/tistory/host',
	dataType : 'json',
	data : JSON.stringify(kongda),     //여기에 그냥 kongda라고 쓰면 error가 발생한다.
	contentType : 'application/json',
	success : successFunc(resultData)
});


function successFunc(resultData){
	var successData = JSON.parse(data);
	console.log(successData);
}

AJAX 통신 과정에서 어느 부분에 사용되는지 위치를 보면 더욱 쉽게 이해될 거라 생각한다 !

이제는 혼란스러워하지 말고 제대로 알고 사용하기 !!!! (약속~~~~)

 

 

 

 

 

 

.

 

728x90
반응형

댓글