JS - JSON

JUGNMIN LEE·2020년 12월 30일
0

javascript

목록 보기
6/13
post-thumbnail

JSON

JSON은 javascript object notation의 약자로
JSON 자체를 직접 호출하거나 인스턴스를 생성할 수 없으며 객체를 JSON으로 변환시키거나
그 변환된 JSON을 다시 객체로 바꾸는 메소드를 제외하면 자신만의 다른 기능은 없다.

또한 JSON만의 특징으로는 객체, 배열, 숫자, 문자열, boolean, null 등을 직렬화 하기 위한
구문으로 타 다른 언어에서도 사용이 가능하다.

그리하여 JSON을 이용해서 우리는 데이터를 네트워크를 통해 전송할 때 유용하게 사용한다.


Object > JSON

let json = JSON.stringify(true); // boolean 타입 오브젝트 > 제이슨으로 변환
console.log(json);

json = JSON.stringify(['apple', 'banana']); // array도 제이슨으로 변환
console.log(json);

boolean타입과 배열또한 JSON으로 변환 할 때에는 stringify라는 메소드를 쓴다.

요번엔 객체를 생성하여 JSON으로 변환 시켜보자.

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    jump: () => {
        console.log(`${name} can jump!`);
    },
}

json = JSON.stringify(rabbit);
console.log(json); //jump라는 function은 json으로 변환이 되지 않는다.

json = JSON.stringify(rabbit, ['name', 'color', 'size']); //오브젝트에서 name의 벨류값만 json으로 변환 가능
console.log(json);

json = JSON.stringify(rabbit, (key, value) => { //모든 키와 벨류들이 콜백함수를 통해 전달이 된다.
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'min' : value; // key에 name이 들어오면 min으로 바꾸어 출력 아니라면 value값 그대로 전송
});

console.log(json);

stringify는 콜백함수를 위와 같이 설정할 수 있다.
그리하여 rabbit이라는 객체의 key와 value들을 받아 자신이 원하는 조건일때에 value값을 변경하는 것 또한 가능하다.

하지만 여기서 JSON은 객체 배열 숫자 등등 전부 변환 할 수 있지만
메소드나 함수는 변환을 시킬 수 없어 jump()라는 메소드는 받아 올 수 없다.


요번엔 JSON을 다시 오브젝트로 변환을 시켜보자

사용하는 메소드는 parse를 사용한다.

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    jump: () => {
        console.log(`${name} can jump!`);
    },
}

json = JSON.stringify(rabbit);
const obj = JSON.parse(json, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(value) : value; 
    //JSON으로 부터 변환되어 온 obj는 birthDate가 원래 오브젝트였으나 스트링으로 변환되었고 다시 돌아올 때는 오브젝트로 돌아오지 않았기 때문에 새롭게 오브젝트로 할당해줌
});
console.log(obj);

console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate()); //return으로 객체 할당 안해주면 확인 불가.

위 주석의 설명처럼 애초에 객체를 JSON으로 변경 하였을때 메소드를 가지고 가지 못한 상황에서
다시 객체로 변환이 될 때에는 jump()메소드가 담겨있지 않다 그리하여
obj.jump();를 실행해도 안되는 것을 볼 수 있다.
또한 'birthDate'는 원래 오브젝트였다가 JSON으로 변환되면서 String으로 변하였고
다시 돌아올때에는 그 자체를 새롭게 object로 할당을 해야 원래의 모습으로 확인이 가능하다
그래서 return 값으로 새롭게 객체를 할당했다.



JSON을 공부하면서 본격적으로 어려워졌다.. 이것을 내가 활용할 수 있을까 ....후
profile
Frontend Developer

0개의 댓글