새소식

zerocho

javascript #9. JSON

  • -

JSON이란? 

JavaScript Object Notation으로 자바스크립트 문법을 빌린 데이터 교환 형식입니다. 

 

{
 "title": "Sujin Park",
 "age: 23",
 "Birthday": "2023-02-01",
 
}

JSON은 이런식으로 하나의 객체에 데이터를 표현합니다. 

객체에는 문자열, 숫자, 불린, 배열, 객체 등등 다 사용가능하지만 함수는 사용이 불가능합니다!

또한 키와 값 모두 큰따옴표로 감싸져야합니다.

 

stringify/ parse

var example = {
  "stringifyMe": "Good",
  "andParseMe": "bye"
};
var string = JSON.stringify(example); // '{"stringifyMe":"Good","andParseMe":"bye"}'
var parsed = JSON.parse(string); // 원상태로

자바스크립트는 JSON을 활용할 수 있는 JSON 객체를 제공해줍니다!

JSON 데이터를 서버를 통해 전송할 때, 객체를 이해하지 못하는 서버가 있기 때문에 친절하게 문자열로 바꾸어주고 

서버에서 돌려받을 때 문자열이 전송되었다면 JSON 객체로 다시 원상복구 해줍니다. 

즉, 위 코드는 JSON 파일을 문자열로 만들어주었다가(stringify), 다시 원상태로 돌려놓는(parse)  코드입니다. 

 

 

※JSON.parse에서 undefined 또는 객체 또는 JSON 형태가 아닌 문자열이면

   Uncaught SyntaxError: Unexpected token 에러 발생 ※

 

var obj = { word: 'hi' };
var obj2 = JSON.parse(JSON.stringify(obj)); //{ word: 'hi' };
obj2.word = 'bye';
obj.word; // 'hi'

JSON.stringify와 JSON.parse를 같이 사용하면 객체를 복사합니다!

obj의 {word : 'hi'} 를 obj2가 복사받습니다. 

 

 

JSON은 간단해서 자바스크립트 이외에도 다른 언어에서 많이 쓰입니다ㅎㅎ

 

 

 

참고자료: 제로초

'zerocho' 카테고리의 다른 글

javascript #10. 배열 내장 함수  (0) 2023.02.02
javascript #8. 객체 지향 프로그래밍  (0) 2023.01.30
javscript #7. 배열  (0) 2023.01.27
javascript #6. 반복문  (0) 2023.01.27
javascript #5. 조건문  (0) 2023.01.27
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.