자바스크립트 기초. JSON

JSON ?

- Java Script Object Noation (자바 스크립트 객체 표기법)

- Java Script에서 객체를 만들 때 사용하는 경량의 표현식 { key : value }를 의미한다. (자바스크립트 문법에서 파생)

- 텍스트 형식이 Java Script와 유사할 뿐 독립적인 형태로 되어 있어 프로그래밍 언어에 종속되지 않고 대부분의 언어와 호환 가능하다.

- 서버와 클라이언트의 데이터 교환 목적으로 주로 사용한다.

- XML과 비교했을 때 더욱 가볍고 읽기 편하다.

 

 

1) 자바스크립트에서 Object를 JSON으로 변환하는 방법.

const baby = {
  name: "ddoddi",
  sex: "male",
  size: "big(?)",
  birthday: new Date(),
  crying: () => {
    console.log(`The ${name} cries loudly.`);
  },
};
console.log(baby);

//{name: 'ddoddi', sex: 'male', size: 'big(?)',
//birthday: Sat Jan 15 2022 19:05:27 GMT+0900 (한국 표준시), crying: ƒ}

객체인 아기 또띠를 생성했다.

아기 또띠의 정보를 JSON으로 변환해보자.

stringify API를 사용하면 된다.

 

let jsonpractice = JSON.stringify(baby);
console.log(jsonpractice);
// {"name":"ddoddi","sex":"male","size":"big(?)","birthday":"2022-01-15T10:05:27.653Z"}

key와 value 값으로 깔끔하게 변환된 것을 확인할 수 있다.

다만 중요한 것은 JSON으로 변환 가능한 것은 null, number, string, array, object, boolean 6가지 뿐이기 때문에 함수로 지정한 crying()는 아예 전달되지 않았고 birthday는 String으로 변환되었다.

 

let jsonpractice = JSON.stringify(baby, function (key, value) {
  console.log(`key: ${key}, value: ${value}`);
  if (key === "sex") {
    return (value = "female");
  } else {
    return value;
  }
});
console.log(jsonpractice); 
// {"name":"ddoddi","sex":"female","size":"big(?)","birthday":"2022-01-15T10:34:17.597Z"}


// 아래와 같이 간단하게 작성 가능하다

let jsonpractice = JSON.stringify(baby, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === "sex" ? "female" : value;
});
console.log(jsonpractice);
// // {"name":"ddoddi","sex":"female","size":"big(?)","birthday":"2022-01-15T10:34:17.597Z"}

위와 같이 함수를 이용해 특정 키와 값만을 조절해줄 수 있다.

 

 

2) JSON을 자바스크립트의 Object로 변환하는 방법.

const objpractioce = JSON.parse(jsonpractice);
console.log(objpractioce);
//{name: 'ddoddi', sex: 'female', size: 'big(?)', birthday: '2022-01-15T10:42:47.529Z'}

parse API를 사용하자 순식간에 다시 객체로 변환된 것을 확인할 수 있다.

그런데 문제는 birthday에 지정해뒀던 Date 오브젝트가 String으로 변환된 상태에서 다시 돌아오지 않는다..

함수처럼 애초에 변환이 불가능한 친구는 어쩔 수 없지만 객체는 String에서 다시 Object로 변환해주면 원상복귀가 가능하다.

 

const objpractioce = JSON.parse(jsonpractice, (key, value) => {
  console.log(`key:${key}, value:${value}`);
  return key === "birthday" ? new Date(value) : value;
});
console.log(jsonpractice); // {"name":"ddoddi","sex":"female","size":"big(?)","birthday":"2022-01-15T10:51:30.656Z"}

console.log(objpractioce.birthday.getDate()); // 오늘 날짜

JSON으로 변환할 때와 큰 차이 없이 쉽게 가능하다.