자바스크립트[기초] JSON | JSON.stringify | JSON.parse

JSON

• 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다.
• 자바스크립트에 종속되지 않는 언어 독립형 데이터 포맷이다.
• JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트이다.
• JSON의 키는 반드시 큰따옴표(작은따옴표는 사용 불가)로 묶어야 한다.
• 값은 객체 리터럴과 같은 표기법을 그대로 사용할 수 있다.
• 하지만 문자열은 반드시 큰따옴표(작은따옴표는 사용 불가)로 묶어야 한다.

{
	"name" : "Lee",
    "age" : 20,
    "alive" :true,
    "hobby" : ["traveling", "tennis"]
}

---

JSON.stringify

• 객체를 JSON 포맷의 문자열로 변환한다.
• 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야 하는데 이를 직렬화라 한다.
• 객체뿐만 아니라 배열로 JSON 포맷의 문자열로 변환한다.

 

 

const obj ={
	name : 'Lee',
    age : 20,
    alive : true,
    hobby : ['traveling' , 'tennis']
};

// 객체를 JSON 포맷의 문자열로 변환한다.
const json = JSON.stringify(obj);
console.log(typeof json, json );
// string {"name" : "Lee", "age": 20, "alive": true, "hobby": ["traveling" , "tennis"]}

//객체를 JSON 포맷의 문자열로 변환 하면서 들여쓰기 한다.
const prettyJson = JSON.parse(obj, null, 2);
console.log(typeof prettyJson, prettyJson);
/*
	string {
		"name" : "Lee", 
        "age": 20,
        "alive": true, 
        "hobby": [
        	"traveling",
            "tennis"
           ]
   	}
*/

const todos = [
	{ id : 1 , content: 'HTML', completed: false },
    { id : 2 , content: 'CSS', completed: true },
    { id : 3 , content: 'JavaScript', completed: false }
];

// 배열을 JSON 포맷의 문자열로 변환한다.
const json = JSON.stringify(todos, null, 2);
console.log(typeof json, json);

/*
	string [
		{
        	"id" : 1, 
            "content" : "HTML",
            "completed" : false 
        },
        {
        	"id" : 2, 
            "content" : "CSS",
            "completed" : true
        },
        {
        	"id" : 3, 
            "content" : "JavaScript",
            "completed" : false 
        }
	]	
*/

---

JSON.parse

• JSON 포맷의 문자열을 객체로 변환한다.
• 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이다.
• 문자열을 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야 하는데 이를 역직렬화 라 한다.
• 배열이 JSON 포맷의 문자열로 변환되어 있는 경우 JSON.parse는  문자열을 배열 객체로 변환한다.
• 배열의 요소가 객체인 경우 배열의 요소까지 객체로 변환한다.
• https://www.w3schools.com/js/js_json_parse.asp  (참고)

const obj ={
	name : 'Lee',
    age : 20,
    alive : true,
    hobby : ['traveling' , 'tennis']
};

// 객체를 JSON 포맷의 문자열로 변환한다.
const json = JSON.stringify(obj);

//JSON 포맷의 문자열을 객체로 변환한다.
const parsed = JSON.parse(json);
console.log(typeof parsed, parsed );
// object {name: "Lee", age: 20, alive: true, hobby: ["traveling" , "tennis"]}


const todos = [
	{ id : 1 , content: 'HTML', completed: false },
    { id : 2 , content: 'CSS', completed: true },
    { id : 3 , content: 'JavaScript', completed: false }
];

// 배열을 JSON 포맷의 문자열로 변환한다.
const json = JSON.stringify(todos);

//JSON 포맷의 문자열을 배열로 변환한다. 배열의 요소까지 객체로 변환된다.
const parsed = JSON.parse(json);
console.log(typeof parsed, parsed );

/*
	object [
	{ id : 1 , content: 'HTML', completed: false },
    { id : 2 , content: 'CSS', completed: true },
    { id : 3 , content: 'JavaScript', completed: false }
]	
*/