본문 바로가기

나의 FE피봇이야기/Javascript

[JS] JSON.stringify and JSON.parse 차이

둘을 먼저 구번 하기위해서 자바스크립트 JSON과 객체의 차이

JSON 객체와 일반 JavaScript 객체(객체 리터럴이라고도 합니다)의 주요 차이점은 따옴표입니다

 

JSON(JavaScript Object Notation)은 문자열

JSON 객체의 모든 키(key)와 문자열 유형 값은 큰따옴표(")로 감싸야 합니다.

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

 

JavaScript 객체

객체 리터럴을 사용하면 키와 문자열을 큰따옴표로 묶을 필요가 없습니다. 단 객체 리터럴 문법에서는 대시(-)로 구분된 키는 따옴표로 감싸야 함. 따옴표를 사용하지 않으려면 키를 마켈표기법인 favoriteGames or facorite_game 으로 수정 필요.

 

const profile = {
  name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
  subscriber: false
}

 

 

리터럴*
리터럴은 JavaScript에서 값을 나타냅니다. 이는 변수가 아닌 여러분이 문자 그대로 스크립트에 제공한 고정된 값입니다.

 

 


 

 

JSON.parse

JSON -> 객체로

 

JSON.stringify

객체 ->  JSON으로

JavaScript value to a JSON string,(자바스크립트를 JSON으로)

 

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

let json = JSON.stringify(student);

alert(typeof json); // 문자열이네요!
alert(json);

/* JSON으로 인코딩된 객체: {
  "name": "John",
  "age": 30,
  "isAdmin": false,
  "courses": ["html", "css", "js"], "wife": null
}
*/

 

 

출처
https://developer.mozilla.org/ko/docs/Glossary/Literal
https://twinstae.github.io/json-vs-object/
https://ko.javascript.info/json#comments