티스토리 뷰

Language/JavaScript

JSON 문법

구일일구 2023. 4. 20. 11:49
반응형

자바스크립트 JSON 문법

JSON.stringfy

JSON.stringfy 객체 ==> JSON
JSON.parse JSON ==> 객체

 

let me = {
    name : 'coorin', 
    age  : 200, 
    MBTI : 'INFJ'
};

let json = JSON.stringify(me); //객체 ==> JSON

console.log(typeof json); //string

console.log(json); //{"name":"coorin","age":200,"MBTI":"INFJ"}

JSON.stringfy(me)를 호출하자, me가 문자열로 변환됨
이렇게 변경된 문자열은 JSON으로 인코딩된(JSON-encoded), 직렬화처리된(serialized), 문자열로 변환된(stringfied), 결집된(marshalled) 객체라고 부름. 객체는 이렇게 문자열로 변환된 후에야 비로소 네트워크를 통해 전송하거나 저장할 수 있음
JSON으로 인코딩된 객체는 일반 객체와 다른 특징 : 문자열은 큰따옴표로 감싸야 함!! (백틱, 작은따옴표 사용 X)

 

JSON.stringfy는 객체뿐만 아니라 원시값에도 적용할 수 있음
문자열을 JSON으로 인코딩하면 문자열이지만, 큰따옴표가 추가됨
또한 중첩객체도 알아서 문자열로 변경해줌

console.log(JSON.stringify(1)); // 1
console.log(JSON.stringify('test')); //"test"
console.log(JSON.stringify(true)); //true
console.log(JSON.stringify([1,2,3])); //[1,2,3]

//중첩객체
let me = {
    name : 'coorin', 
    age  : 200, 
    MBTI : 'INFJ',
    day : {
        number : 31,
        week : ['one', 'two']
    }
};
console.log(JSON.stringfy(me)); 
//{"name":"coorin","age":200,"MBTI":"INFJ","day":{"number":31,"week":["one","two"]}}

 

JSON.stringfy 호출 시 무시되는 프로퍼티

  • 함수 프로퍼티 (메서드)
  • 심볼형 프로퍼티 (키가 심볼인 프로퍼티)
  • 값이 undefined인 프로퍼티
let user = {
    sayHi(){ //메소드 무시
        console.log("HI");
    },
    [Symbol("id")] : 123, //심볼 무시
    something : undefined //undefined 무시
};

console.log(JSON.stringify(user)); // {} 빈 객체

JSON.parse

JSON 데이터를 객체 형식으로 변환시켜줌

let rabbit = {
    name : 'tori',
    color : 'white',
    size : null,
    participants: [{name: "John"}, {name: "Alice"}],
    birthDate : new Date(), 
    jump : () => { // 함수는 스트링화 안됨.
        return 100;
    }
}

let json = JSON.stringify(rabbit); //JSON => 객체
let obj = JSON.parse(json); //객체 => JSON
console.log(json);
console.log(obj);

json 결과값 :

{"name":"tori","color":"white","size":null,"participants":[{"name":"John"},{"name":"Alice"}],"birthDate":"2023-04-20T02:47:48.236Z"}

obj 결과값 :

{
  name: 'tori',
  color: 'white',
  size: null,
  participants: [ { name: 'John' }, { name: 'Alice' } ],
  birthDate: '2023-04-20T02:47:48.236Z'
}

 

꼭 JSON 타입이 아니더라도, 문자열 타입의 데이터가 있다면 이 역시 변환이 가능함 (다만 JSON  포맷에 반드시 따라야함)

!! 문자열은 ' ' 가 아닌 , " "로 감싸야 함!

반응형

'Language > JavaScript' 카테고리의 다른 글

스크립트로 테이블 자동 생성  (0) 2023.05.15
dropzone 공부  (0) 2023.05.03
JSON 기본  (0) 2023.04.20
FormData 기본  (0) 2023.04.20
동기와 비동기  (0) 2023.04.20
댓글