JS-9일차(Json)

김혜성·2024년 2월 21일
0

프론트엔드

목록 보기
12/17

JSON

: JavaScript Object Notation

  • simplest data interchange format
  • lightweight text-based structure
  • easy to read
  • key-value pairs
  • used for serialization and transmission of data between
    the network and the network connection
  • independent programming language and platform

Stringify(Object -> Json)

// stringify(obj)
let json = JSON.stringify(true);
console.log(json);

json = JSON.stringify(['apple', 'banana']);
console.log(json); //'' -> ""

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

json = JSON.stringify(rabbit);
console.log(json); // JS에만 있는 symbol이나 콜백함수인 jump는 안됨

json = JSON.stringify(rabbit, ['name', 'color'], '\t');
console.log(json);

json = JSON.stringify(rabbit, (key,value) => {
    console.log(`key: ${key}, value: ${value}`); // 최상단에 value가 object인게 먼저 나옴
    return key === 'name' ? 'comet' : value;
});
console.log(json);

Parse(Json -> Object)

// parse(json)
console.clear();
json = JSON.stringify(rabbit);
console.log(json);
const obj = JSON.parse(json, (key, value) =>{
    console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj);
rabbit.jump();
// obj.jump(); - json으로 바뀔 때 jump 메소드는 날라갔어서 다시 parse해도 jump는 없음

console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate()); 
// 원래는 json변환시 메소드가 아닌 string으로 바껴서 메소드 사용 불가 but parse시
// 콜백함수로 다시 new Date로 바꿔줘서 가능해짐
profile
똘멩이

0개의 댓글