JS JSON: JavaScript Object Notion

JSON: JavaScript Object Notion

• JavaScript 객체 표기법으로 작성된 텍스트 기반의 방식입니다.
• JSON은 쉽게 읽고 작성할 수 있고, 소프트웨어에서 파싱 및 생성하기도 쉽습니다.
• 때문에 주로 컴퓨터간 데이터 교환 형식으로 쓰입니다.

 

JSON 표기법

• {}로 데이터를 묶고 key: value로 구성
• 데이터는 ,로 구분합니다.
• {중괄호}는 객체를 구성
• [대괄호]는 배열을 구성

// 예제 1
'{"name":"kim", "age":25, "address":null}'

// 예제 2
{
	"students":[
    	{"name":"kim", "age":25},
        {"name":"lee", "age":30},
        {"name":"choo", "age":18}
    ]
}

 

JSON ↔ JS 객체 파싱

• JSON.parse() - JSON 문자열을 객체로
• JSON.stringify() - 객체를 JSON 문자열로

// JSON 문자열 -> 객체
const jsonStr = '{"name":"kim", "age":25, "city":"Seoul"}'
const obj = JSON.parse(jsonStr);
console.log(obj.name + " " + obj.age + " " + obj.city);

// JSON 문자열 -> 객체, 배열
const jsonArr = '["Apple", "Banana", "Orange"]';
const arr = JSON.parse(jsonArr);
console.log(arr[0]);             // Apple



// 객체 -> JSON 문자열
const obj = {name: "kim", age: 25, address: "Seoul"};
const jsonStr = JSON.stringify(obj)
console.log(jsonStr);

 

 

JSON → 객체 시 값 변환 ( 예제: 날짜)

JSON에서 허용하지 않는 타입인 경우 JSON에서 문자열로 저장해놓고 이를 객체로 변환할 때 따로 문자열도 변환해주어야 합니다.

const jsonStr = '{"name":"kim", "birth":"2000-12-12", "city":"Seoul"}';


// 예제 1
const obj = JSON.parse(jsonStr);
obj.birth = new Date(obj.birth);

// 예제 2: JSON.parse() 두 번째 매개 변수 활용
const obj = JSON.parse(jsonStr, function (key, value) {
	if (key == "birth") {
    	return new Date(value);
    } else {
    	return value;
    }
});