Javascript - JSON 객체

 

인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

JSON 객체

 

• JSON 객체란?

<개념 정리>
JSON 객체는 JavaScript Object Notation의 약자로 웹페이지와 서버 간 데이터 요청 시,
데이터를 저장하여 전송하는 포맷이다.

메타정보를 많이 가지고 있어 전송되는 데이터가 큰 XML과 달리, JSON은 굉장히 가볍기 때문에
웹개발에 특화된 전송 포맷(모바일에서도 사용 가능)이며, 오브젝트와 형태가 유사하므로 데이터를
JSON 포맷으로 받아 손쉽게 오브젝트로 사용할 수 있다. 


<기본 구조>

var data = {
  "employees": [
    {"firstName":"John", "lastName":"Kim"},
    {"firstName":"James", "lastName":"Kim"},
    {"firstName":"JAY", "lastName":"Kim"},
]

data.employees[0].firstName

//오브젝트의 형태와 유사하지만, JSON의 올바른 포맷은 키에 해당하는 
//부분(employees, firstName, lastName)에 ""을 감싸야 한다.

//또한, JSON의 데이터를 불러오는 방식은 오브젝트와 비슷하며,
//data.employees[0].firstName의 의미는 JSON 데이터 안에 있는
//employees 키 값의 첫 번째 배열 중 firstName의 value 값인
//John을 불러오겠다는 것이다.

 

 

• JSON 객체 내장함수

JSON.stringify(  )  :  JSON 데이터의 포맷을 문자열 포맷으로 바꿔주는 함수이다.

var data = {
  "employees": [
    {"firstName":"John", "lastName":"Kim"},
    {"firstName":"James", "lastName":"Kim"},
    {"firstName":"JAY", "lastName":"Kim"},
  ]
}
                
console.log(data);

// 결과 :
//employees: Array(3)
//0: {firstName: "John", lastName: "Kim"}
//1: {firstName: "James", lastName: "Kim"}
//2: {firstName: "JAY", lastName: "Kim"}
//length: 3
//[[Prototype]]: Array(0)
//[[Prototype]]: Object

//데이터 타입 : 오브젝트


console.log(JSON.stringify(data));

// 결과 :
//{"employees":[{"firstName":"John","lastName":"Kim"},
//{"firstName":"James","lastName":"Kim"},
//{"firstName":"JAY","lastName":"Kim"}]}

//데이터 타입 : 문자열


//웹 개발 과정에서 서버로 데이터를 전송할 때, 오브젝트로 데이터를 전송하는 것이 아닌
//문자열로 데이터를 전송하는 경우가 더 많으며 이후 서버에서는 전송받은 문자열을 다시 
//오브젝트로 바꿔서 사용한다.(서버로 전송할 때 데이터 변환을 위해 해당 함수를 사용함)

JSON.parse(  )  :  JSON 데이터의 포맷을 오브젝트 포맷으로 바꿔주는 함수이다.

var text = '{"employees" : ['+
  '{"firstName":"John" , "lastName": "Kim" },' +
  '{"firstName":"Anna" , "lastName": "Smith" },' +
  '{"firstName":"Peter", "lastName": "Jones" } ]}';  //문자열 형태의 데이터 


var obj = JSON.parse(text);

console.log(obj);

// 결과 :
//{employees: Array(3)}
// employees: Array(3)
// 0: {firstName: "John", lastName: "Kim"}
// 1: {firstName: "Anna", lastName: "Smith"}
// 2: {firstName: "Peter", lastName: "Jones"}
// length: 3
// [[Prototype]]: Array(0)
// [[Prototype]]: Object

//데이터 타입 : 오브젝트

//서버에서는 웹페이지로부터 받은 문자열 포맷의 JSON 데이터를 다시 
//오브젝트 포맷으로 데이터를 변경하여 사용하며, 이 때 해당 함수를 사용한다.

 

 

• 정리

JSON은

1. 웹 개발 시 서버와 데이터 통신을 할 때, 가장 많이 사용되는 데이터 전송 포맷이며 XML에 비해
    가벼운 것이 특징이다.
2. 자바스크립트의 오브젝트와 형태가 비슷해서 JSON으로 받아온 데이터를 바로 오브젝트로
    활용 가능하다.
3. JSON의 내장함수를 사용하면, 데이터를 문자열 혹은 오브젝트 포맷으로 변경하여 전송하거나
    받은 데이터를 다시 문자열 혹은 오브젝트 포맷으로 변경해서 사용할 수 있다.