JSON 문법과 자바스크립트 객체 표기법 비교

JSON 문법과 자바스크립트 객체 표기법의 공통점과 차이점에 대해서 정리해 보았다.

 

JSON 문법과 자바스크립트 객체 표기법 비교

 

JSON 문법이란?

구글 홈페이지에 request를 보내면 서버가 아래와 같이 html과 javascript로 이루어진 코드를 response 해준다. 그러면 웹 브라우저가 받은 코드를 해석한 후에 예쁘게 화면에 출력해서 우리에게 보여주는 것이다.

 

 

이렇게 request로 받을 수 있는 포멧은 html과 javascript 코드 외에도 여러가지가 있다. 개발자 도구 console 창에 아래와 같이 입력해서 실행하면, html 형식이 아니라 데이터로 추정되는 결과를 response로 받는다. 이것은 JSON 이라고 하는 포맷인데, JavaScript Object Notation의 약자이다. 개발자들이 어떤 정보를 나타낼 때 보통 JSON이라고 하는 데이터 포맷을 사용한다.

 

 

이름에서도 알 수 있듯이 이 포맷은 자바스크립트 언어의 문법을 빌려서 만들어진 데이터 포맷이기 때문에, JSON 문법은 자바스크립트 문법과 거의 동일하다고 보면 된다.

 

JSON 포맷에 대해서 더 잘 알고 싶다면, 아래 링크를 참고하도록 한다.

https://www.json.org/json-en.html

JSON

 

JSON 문법과 자바스크립트 객체 표기법 공통점

자바스크립트 언어의 문법을 빌려서 만들어진 JSON 문법은 자바스크립트 문법과 공통된 부분을 가지고 있다.

• 한 묶음의 정보를 하나의 객체로 나타낸다.
• 중괄호({})를 사용하고 그 안에서 각각의 property 이름과 값을 적는 방식이다.
• 대괄호([])로 감싸서 배열을 나타낸다.

 

JSON 문법과 자바스크립트 객체 표기법 차이점

JSON 문법과 자바스크립트 객체 표기법의 공통점을 알아보았다면 차이점도 함께 알아두도록 한다.

 

• 자바스크립트는 Object Literal 표기법을 사용할 때에 각 프로퍼티의 이름에 큰 따옴표를 붙여도 되고, 붙이지 않아도 된다. 
  하지만 JSON은 각 프로퍼티의 이름을 반드시 큰 따옴표("")로 감싸주어야 한다.
• 자바스크립트는 문자열을 나타낼 때 작은 따옴표('') 혹은 큰 따옴표("") 중 어떤 것을 사용해도 무방하다.
  하지만 JSON은 반드시 큰 따옴표("")를 사용해야 한다.

 

cf. Object Literal 이란, 중괄호({}) 안에 객체의 프로퍼티 이름, 값을 순서대로 나열(매칭)해서 객체를 생성하는 표기법이다.

 

[자바스크립트 예시]

const member = {
    name : 'Heina'
    height : 157,
    job : 'designer',
    hobbies : ['Reading books', 'Watching movies'] 
};

[JSON 예시]

const member = {
    "name" : "Heina"
    "height" : 157,
    "job" : "designer",
    "hobbies" : ["Reading books", "Watching movies"] 
};

 

• 자바스크립트에서는 프로퍼티 값으로 사용할 수 있는 undefined, NaN, Infinity 등을 JSON에서는 사용할 수 없다.
• JSON은 코드가 아닌 데이터 포맷이므로 주석을 추가할 수 없다.