TIL 018 | JavaScript JSON

dhforb123·2021년 12월 8일
0

JavaScript TIL

목록 보기
4/4
post-thumbnail

Today, I Learned.
[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용 정리.
- JSON.

✏️ JSON ✏️

JSON 이란?

JSON(JavaScript Object Notation)은 자바스크립트에서 객체를 표현하는 형식으로 데이터를 표현한 것이다. 다른 방식에 비해 가볍고 자바스크립트와 호환성이 높아 널리 사용된다.

탄생 배경

프로그래머들은 언어마다 다른 표현방식 때문에 정보를 전달하는데 어려움을 겪는다.
예를 들어 배열 데이터의 표현방식은 자바스크립트와 C는 다르다.
하지만 숫자와 문자열은 언어마다 표현방식이 같기 때문에 이를 이용해서 만든 대표적인 데이터 폼이 xml이며 후에 복잡한 구조를 더 단순히 하고자 탄생한 것이 JSON 이다.

- xml

<?xml version="1.0" encoding="UTF-8" ?>
<root>
  <squadName>어벤져스</squadName>
  <members>
    <nickname>아이언맨</nickname>
    <age>35</age>
    <name>토니 스타크</name>
  </members>
  <members>
    <nickname>헐크</nickname>
    <age>40</age>
    <name>부르스 배너</name>
  </members>
</root>

- json

{
  "squadName": "어벤져스",
  "members": [
    {
      "nickname": "아이언맨",
      "age": 35,
      "name": "토니 스타크"
    },
    {
      "nickname": "헐크",
      "age": 40,
      "name": "부르스 배너"
    }
  ]
}

JSON 메서드

JSON.stringify()

JSON.stringify(object)는 자바스크립트 객체를 JSON 문자열로 인코딩한다.
자바스크립트 객체의 요소(key, vlaue) 중 문자열 자료형은 모두 큰 따옴표(")로 변환된다.
JSON 객체에서는 작은 따옴표, 백틱을 사용할 수 없다.

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

// JSON.stringify(value, [replacer, space])
// value : 자바스크립트 객체를 JSON 문자열로 변환
let json = JSON.stringify(student);
// replacer : ["key"] 인자로 원하는 프로퍼티만 변환 
let jsonReplacer = JSON.stringify(student, ["name"]);
// space : JSON 문자열에 들여쓰기를 삽입하여 변환
let jsonSpace = JSON.stringify(student, null, 4);

console.log(typeof json); // string
console.log(json); // {"name":"Raekyu","age":25,"isAdmin":false,"courses":["html","css","js"],"wife":null}
console.log(jsonReplacer); // {"name":"Raeyku"}
console.log(jsonSpace);
/* {
    "name": "Raekyu",
    "age": 25,
    "isAdmin": false,
    "courses": [
        "html",
        "css",
        "js"
    ],
    "wife": null
} */

JSON.parse()

JSON.parse(string)는 JSON 문자열을 자바스크립트 객체로 디코딩한다.

let userData = `{
  "name": "Raekyu",
  "age": 25,
  "isAdmin": false,
  "courses": ["html", "css", "js"],
  "wife": null,
  "birth": "1997-11-15"
}`;

// JSON.parse(value, [reviver])
// value : JSON 문자열을 자바스크립트 객체로 변환
let user = JSON.parse(userData);
// reviver : (key, value) 쌍을 대상으로 호출되는 function(key, value) 형태의 함수로 값을 변경
let userReviver = JSON.parse(userData, function(key, value) {
  if(key === "birth") return new Date(value);
  return value;
});

console.log(user); // {name: 'Raekyu', age: 25, isAdmin: false, courses: Array(3), wife: null}
console.log(userReviver.birth.getDate()); // 15

0개의 댓글