열정 실천

[JavaScript] JSON - JSON.parse, JSON.stringify 본문

개발 공부/JS

[JavaScript] JSON - JSON.parse, JSON.stringify

구운오니 2023. 5. 18. 05:24

JSON :: JavaScript Object Notation

 

JSON은 범용적인 데이터 형식으로 문자 기반으며 구조화된 데이터 형식이다. 

JSON이나 XML같은 데이터 형식은 공식 포맷이기 때문에 개발자들 사이에 데이터 통신을 가능하게 한다. 

 

 

✔️ 서버와의 데이터 교환에 사용된다. 

✔️ 데이터의 외부 파일 저장에 사용된다. 

✔️ xml에보다 용량이 가볍다. 

✔️ 특정 언어에 종속되지 않으며 구조 정의가 용이하다. 

 

 

 

📌JSON의 기본 구조 

키와 값을 조합하여 정의한다. 키는 문자열만 가능하며 큰따옴표("")로 표기한다. 

let myJson{
	"name" : "Tom",
    	"grade" : 1,
    	"age" : 20
}

✔ 마지막 요소에 , 를 허용하지 않는다. 

✔ 키에 큰따옴표("")가 없거나 작은따옴표('')를 사용하면 안된다. 

 

 

 

📌 JSON 문자열 객체로 변환하기

 

네트워크에서 받은 JSON 문자열을 자바스크립트의 객체에서 사용하고 싶을 때!

JSON.parse(문자열)을 사용하면 JSON문자열을 해석하여 자바스크립트의 값과 객체로 변환해준다. 

이러한 작업을 파싱한다고 한다. 

const jsonString = '{ "name" : "Tom", "grade" : 1, "age" 20 }';

const data = JSON.parse(jsonString); 

console.log(data.name);
console.log(data.grade);
console.log(data.age);

문자열 형태인 jsonString 을 JSON.parse 메소드를 이용하여 JSON 객체로 변환시키면

다음과 같이 각각의 데이터에 접근할 수 있다.

 

 

 

 

📌 객체를 JSON 문자열로 변환하기 

 

위와 반대로 JSON객체를 문자열로 변환하기 위해서는 JSON.stringify(객체) 메소드를 사용한다. 

 

let myJson{
	"name" : "Tom",
    	"grade" : 1,
    	"age" : 20
}

const str = JSON.stringify(myJson);

console.log(str); // 출력 : { "name" : "Tom", "grade" : 1, "age" : 20}

 

 

 

💨