JSON 객체 - JavaScript Object Notation (JS 객체 표기법)

1. JSON 구조

JSON 내부에는 JS에서 사용할 수 있는 기본 데이터 타입인 문자열, 숫자, 배열, 불리언, 그 밖의 다른 객체 또한 포함 가능

JS의 배열과 객체를 활용하여 어떠한 자료의 형태를 표현하는 형식

'key-value' 즉, '키-값'를 쌍으로 데이터를 구조화하는데 사용

형태 자체는 js의 객체와 유사하지만, json은 순수한 텍스트 형식이기 때문에 키를 항상 따옴표로 묶어야 함.

값에는 함수 등은 사용 불가

문자열은 큰따옴표 사용을 권장

 

2. JSON 사용

서로 다른 시스템 간에 구조화된 데이터를 전송하는데 사용

json형태로 여러 자료형을 나타내는 방법

let data = [
  {
    name: '테드',
    age: 25,
    job: 'developer',
    hobby: {
      first: 'exercise',
      second: 'music',
    },
    lecture: ['프론트엔드', '자바', 'DBMS'],
  },
  {
    name: '테드친구',
    age: 25,
    job: 'employee',
    hobby: {
      first: 'baseball',
      second: 'health',
    },
    lecture: ['백엔드', '파이썬', 'Kotlin'],
  },
];

 

1) JSON.stringify()

자바스크립트 객체를 JSON 문자열로 변환

데이터에 바로 적용 X - JSON객체에 사용

 

JSON.stringify(자바스크립트 객체)

아래는 콘솔창 내역

console.log('들여쓰기 되어있지 않은 JSON 문자열 데이터');
console.log(JSON.stringify(data));

[{"name":"테드","age":25,"job":"developer","hobby":{"first":"exercise","second":"music"},"lecture":["프론트엔드","자바","DBMS"]},{"name":"테드친구","age":25,"job":"employee","hobby":{"first":"baseball","second":"health"},"lecture":["백엔드","파이썬","Kotlin"]}]

 

JSON.stringify()의 2번째 인자

객체에서 어떤 속성만 선택해서 추출하고 싶을 때 사용

거의 사용하지 X (일반적으로 null을 사용)

console.log('name과 age 속성만 포함하여 출력');
console.log(JSON.stringify(data, ['name', 'age'], 2));

 

아래는 콘솔창 내역

name과 age 속성만 포함하여 출력
[
  {
    "name": "테드",
    "age": 25
  },
  {
    "name": "테드친구",
    "age": 25
  }
]

 

JSON.stringify()의 3번째 인자

들여쓰기 N칸 설정

console.log('들여쓰기 설정된 JSON 데이터');
console.log(JSON.stringify(data, null, 2));

 

아래는 콘솔창 내역

들여쓰기 설정된 JSON 데이터
[
  {
    "name": "테드",
    "age": 25,
    "job": "developer",
    "hobby": {
      "first": "exercise",
      "second": "music"
    },
    "lecture": [
      "프론트엔드",
      "자바",
      "DBMS"
    ]
  },
  {
    "name": "테드친구",
    "age": 25,
    "job": "employee",
    "hobby": {
      "first": "baseball",
      "second": "health"
    },
    "lecture": [
      "백엔드",
      "파이썬",
      "Kotlin"
    ]
  }
]

2) JSON.parse()

JSON 문자열을 자바스크립트 객체로 전환

let jsonData = JSON.stringify(data);
console.log(jsonData);
console.log('===자바스크립트 객체 출력===');
console.log(JSON.parse(jsonData));

 

아래는 콘솔창 내역

[{"name":"테드","age":25,"job":"developer","hobby":{"first":"exercise","second":"music"},"lecture":["프론트엔드","자바","DBMS"]},{"name":"테드친구","age":25,"job":"employee","hobby":{"first":"baseball","second":"health"},"lecture":["백엔드","파이썬","Kotlin"]}]
===자바스크립트 객체 출력===
[
  {
    name: '테드',
    age: 25,
    job: 'developer',
    hobby: { first: 'exercise', second: 'music' },
    lecture: [ '프론트엔드', '자바', 'DBMS' ]     
  },
  {
    name: '테드친구',
    age: 25,
    job: 'employee',
    hobby: { first: 'baseball', second: 'health' },
    lecture: [ '백엔드', '파이썬', 'Kotlin' ]
  }
]

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/JSON-JavaScript-Object-Notation-JS-9cc75123677c4ec6822d27db20469b3c?pvs=4

JSON 객체 - JavaScript Object Notation (JS 객체 표기법) | Notion