logo

DowanKim

37. JSON 과 메서드

2026년 4월 14일

자바스크립트

데이터를 어딘가로 보내거나 저장할 때, 객체는 그 자체로 움직일 수 없습니다. 마치 가구를 이사 보낼 때 분해해서 상자에 담는 것처럼, 객체도 **'직렬화(Serialization)'**라는 과정을 거쳐 문자열로 변신해야 하죠.


🌐 1. JSON이란? (Serialization & Deserialization)

JSON(JavaScript Object Notation)은 데이터를 주고받기 위한 범용적인 문자열 포맷입니다. 자바스크립트에서 시작됐지만, 현재는 거의 모든 언어에서 공용어로 쓰입니다.

  • 직렬화(Serialization): 객체 → 문자열 (JSON.stringify)
  • 역직렬화(Deserialization): 문자열 → 객체 (JSON.parse)

📤 2. JSON.stringify: 객체를 상자에 담기

객체를 네트워크 전송이 가능한 문자열로 바꿔줍니다.

⚠️ JSON만의 까다로운 규칙

  1. 큰따옴표 필쑤: 키와 문자열 값은 반드시 "(큰따옴표)로 감싸야 합니다. '나 백틱은 안 돼요.
  2. 무시되는 친구들: 메서드(함수), 심볼형 프로퍼티, 값이 undefined인 프로퍼티는 변환 과정에서 삭제됩니다.

🛠️ 정교한 제어: replacerspace

  • replacer: 특정 프로퍼티만 골라서 담거나, 값을 변형하고 싶을 때 사용합니다(배열 또는 함수).
  • space: 가독성을 위해 들여쓰기 공백을 추가합니다. 로깅할 때 아주 유용하죠.

🔄 순환 참조(Circular Reference)의 위협

객체 A가 B를 참조하고, B가 다시 A를 참조하는 순환 구조가 있다면 JSON.stringify는 에러를 뿜으며 멈춥니다. 이럴 땐 replacer 함수를 써서 순환 고리를 끊어줘야 합니다.


📥 3. JSON.parse: 상자에서 꺼내기

JSON 문자열을 다시 자바스크립트 객체로 복구합니다.

🗓️ reviver의 마법

JSON에는 '날짜(Date)' 타입이 없습니다. 문자열로 바뀐 날짜를 다시 Date 객체로 되돌리려면 JSON.parse의 두 번째 인자인 reviver 함수가 필요합니다.

let str = '{"title":"회의","date":"2026-04-14T12:00:00.000Z"}'; let meetup = JSON.parse(str, (key, value) => { if (key == 'date') return new Date(value); // 날짜 문자열을 객체로 부활! return value; });

🎙️ 기술 면접 대비 (Interview Questions)

Q1. JSON.stringify를 이용해 객체를 '깊은 복사(Deep Copy)' 할 때의 장단점은? (중급)

답변: 장점은 코드가 매우 간결하고 중첩된 구조까지 모두 복사된다는 점입니다. 단점은 함수, 심볼, undefined가 누락되며, Date 객체가 문자열로 변하고, 순환 참조가 있으면 에러가 발생한다는 것입니다. 성능 면에서도 대형 객체에는 적합하지 않습니다.

Q2. 객체에 toJSON 메서드가 구현되어 있으면 어떤 일이 벌어지나요? (중급)

답변: JSON.stringify는 객체를 직렬화하기 전, 해당 객체에 toJSON 메서드가 있는지 확인합니다. 만약 있다면, 객체 전체를 인코딩하는 대신 toJSON이 반환하는 값을 사용합니다. 이를 통해 복잡한 객체의 노출 정보를 직접 커스터마이징할 수 있습니다.

Q3. JSON 포맷에서 키(Key)를 반드시 큰따옴표로 감싸야 하는 이유는 무엇인가요? (기초)

답변: JSON은 자바스크립트에 종속되지 않은 독립적인 표준이기 때문입니다. 다양한 프로그래밍 언어에서 빠르고 신뢰성 있게 파싱할 수 있도록 엄격한 문법 규칙을 적용한 것이며, 이는 데이터의 호환성을 보장하기 위함입니다.


요약

  • JSON은 독자적인 표준을 가진 데이터 형식으로, 대부분의 언어엔 JSON을 쉽게 다룰 수 있게 해주는 라이브러리가 있습니다.
  • JSON은 일반 객체, 배열, 문자열, 숫자, 불린값, null을 지원합니다.
  • JSON.stringify를 사용하면 원하는 값을 JSON으로 직렬화 할 수 있고, JSON.parse를 사용하면 JSON을 본래 값으로 역 직렬화 할 수 있습니다.
  • 위 두 메서드에 함수를 인수로 넘겨주면 원하는 값만 읽거나 쓰는 게 가능합니다.
  • JSON.stringify는 객체에 toJSON 메서드가 있으면 이를 자동으로 호출해줍니다.