Javascript - JSON 객체를 확인하는 stringify() 사용 방법을 알아보자

자바스크립트에서 JSON은 JavaScript Object Notation의 줄임말로 문자 기반의 표준 포맷을 말합니다. 그리고 자바스크립트에서 데이터를 다룰 때는 주로 JSON 형식을 취하기 때문에 JSON의 사용하는 방법에 대해 알아두는 것이 좋습니다. 특히 JSON을 다루기 위해 내장되어 있는 JSON.stringify(), JSON.parse() 사용 방법을 알아두면 JSON 객체를 다루기도 쉽고 개발의 생산성, 효율성도 좋아집니다.

JSON은 무엇일까?

 JSON을 잘 사용하는 방법을 알아보기 전에 먼저 JSON에 대한 정의를 알아보겠습니다. JSON을 잘 사용하기 위해서는 JSON의 정의를 아는 것도 중요합니다. 서문에서는 JSON(JavaScript Object Notation)을 문자 기반의 표준 포맷이라고 말했지만 공식 홈페이지에서는 "JSON is a lightweight data-interchange format" 즉 가벼운 데이터 교환 형식이라고 정의되어 있습니다.

JSON 정의 - 공식 홈페이지

 앞서 이야기한 내용과 공식 사이트의 정의를 조합하면 JSON은 텍스트를 기반으로 데이터 교환을 위해 정의된 포맷 중에 하나입니다. 그럼 JSON의 정의와 더불어 JSON이 가지는 규칙을 알아볼까요?

 

- 값은 name/value 하나의 쌍으로 정의된다.

- 값은 쉼표로 구분된다.

- 객체는 정렬되지 않은 집합체이며, 중괄호({})로 정의된다.

- 배열은 정렬된 값의 모음이며, 대괄호([])로 정의된다.

 

 보다 상세하고 정확한 JSON의 사양에 대한 내용은 공식 홈페이지에 그림과 함께 설명되어 있습니다. JSON의 정의와 규칙이 흥미롭게 느껴지신다면 한번 방문해보시는 것도 좋습니다.

JSON 규칙 일부 이미지 캡쳐 - 공식 홈페이지

JSON의 문자화 서식 설정하기 - Formatting

JSON 객체가 가진 값을 확인할 수는 있는 방법은 JSON.stringify()가 있습니다. JSON이 가진 값이 작다면 보기에 불편함이 없지만 한 줄을 넘어가는 값들을 가지고 있다면 보기가 불편합니다.

const user = {
    name: "YD",
    age: 27,
    job: "Developer",
    email: "test@email.com",
    address: "대한민국 서울특별시",
    permission: "User",
};

console.log(JSON.stringify(user));
// {"name":"YD","age":27,"job":"Developer","email":"test@email.com","address":"대한민국 서울특별시","permission":"User"}

 이런 경우에는 JSON.stringify()의 space 매개변수 값을 사용하면 JSON 객체를 읽기 편하게 만들 수 있습니다. space는 JSON이 문자열로 출력될 때 공백에 사용되는 값으로 문자는 문자 값으로 치환되고 숫자(Number)는 스페이스(space) 개수로 사용됩니다.

// 숫자(Number)를 이용해 space 매개변수를 활용한 경우
console.log(JSON.stringify(user, null, 2));
// {
//   "name": "YD",
//   "age": 27,
//   "job": "Developer",
//   "email": "test@email.com",
//   "address": "대한민국 서울특별시",
//   "permission": "User"
// }

// 문자를 이용해 space 매개변수를 활용한 경우
console.log(JSON.stringify(user, null, '&&'));
// {
// &&"name": "YD",
// &&"age": 27,
// &&"job": "Developer",
// &&"email": "test@email.com",
// &&"address": "대한민국 서울특별시",
// &&"permission": "User"
// }

JSON의 특정값만 확인하기 - Filtering

 JSON.stringify() 기능은 JSON 객체가 가진 특정 값을 선택해서 확인하는 경우에도 활용할 수 있습니다. 마치 lodash의 pick()이나 underscore의 pick()처럼 말이죠.

console.log(JSON.stringify(user, ['name']));
// {"name":"YD"}

console.log(JSON.stringify(user, ['name', 'age']));
// {"name":"YD","age":27}

 바로 JSON.stringify()의 replacer 매개변수에 확인하려는 key 값을 배열로 전달하면 됩니다. 함수를 전달하면 key와 value를 사용해 조금 더 다양한 방법으로 활용하는 것도 가능합니다.

끝맺음

자바스크립트로 개발을 하다 보면 JSON 객체를 샅샅이 파헤쳐야 하는 경우에 JSON.stringify()를 사용해보면 어떨까요? lodash나 underscore와 같은 활용하기 좋은 라이브러리가 있지만 때로는 자바스크립트가 내장하고 있는 기능만으로 해결하는 것도 나름의 재미가 있다고 생각해요. 본문에서 사용한 예제 코드는 파일로 첨부했습니다. 필요하신 분은 다운로드해서 사용하세요.

JSON_stringify.html

0.00MB