[JS] JSON

JSON ?

- JavaScript Object Notation의 약자

 

- 클라이언트와 서버간 HTTP 통신을 위한 텍스트 데이터 포맷

 

- JS에 종속되지 않은 언어 독립형 데이터 포맷

 

- 대부분 프로그래밍 언어에서 사용가능

 

 

JSON 표기 방식

 

- 반드시 큰따옴표로 묶어야 한다. (작은따옴표 불가능)

 

- 값은 객체 리터럴과 같은 표기법을 사용 할 수 있다.

 

- 문자열 역시 반드시 큰 따옴표로 묶는다.

 

 

---

 

 

 

JSON의 2가지 메서드를 알아보자!  (parse , stringify)

 

 

 

 

JSON.stringify

 

- 객체를 JSON 포맷의 문자열로 반환

 

- 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야한다. (직렬화)

 

 

[예제]

let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  wife: null
};

let json = JSON.stringify(student);  //문자열로 바꿔준다.

console.log(json); //'{"name":"John","age":30,"isAdmin":false,"courses":["html","css","js"],"wife":null}'
typeof json;  //string

 

 

stringify 메서드를 통해 student를 JSON포맷의 문자열로 변경해보았다.

 

 

[결과] - JSON으로 인코딩된객체와 타입

 

 

 

 

---

 

원하는 프로퍼티만 직렬화하기 - replacer

 

let json = JSON.stringify(value[, replacer, space])

 

value : 인코딩 하려는 값

 

replacer : JSON으로 인코딩 하길 원하는 프로퍼티가 담긴 배열 (또는 매핑함수)

 

space : 서식 변경 목적으로 사용할 공백 문자 수

 

[예제]

 

let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  wife: null
};

let json = JSON.stringify(student,['name','age']);  //name과 age만 인코딩
console.log(json);

 

 

name과 age만 JSON으로 인코딩 하기위해 replacer에 넣어주었다.

 

[결과]

 

 

name과 age만 직렬화 된것을 볼 수 있다.

 

 

 

---

 

가독성을 위한 space

 

- space는 가독성을 높이기 위한 용도이므로 단순 전달 목적일 경우 space 없이 직렬화 한다.

 

let json = JSON.stringify(value[, replacer, space])

 

 

[예제]

 

let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  wife: null
};

let json = JSON.stringify(student,['name','age'],2);
console.log(json);

 

space 인자에 2를 주었기에 공백 문자 2개를 사용하여 들여쓰기 된 값이 나온다.

 

 

[결과]

 

 

"name" 과 "age"앞에 공백문자 2개가 생긴 것을 볼 수 있다.

 

 

 

 

---

 

 

JSON.parse

 

- JSON 포맷의 문자열을 객체로 변환한다.

 

- JSON 문자열을 객체로 사용하려면 객체화 해야한다. (역직렬화) 

 

 

[예제]

 

위에서 stringify 메서드를 통해 student를 JSON포맷의 문자열로 변경한  json 을 다시 역직렬화 해보자

 

JSON.parse(json) //json은 위에서 직렬화 했던 문자열

그러면 다시 객체로 변환된다.

 

[결과]