본문으로 건너뛰기
AZ Tools

JS 객체 ↔ JSON

JS 객체 리터럴({name: 'Alice'}) → 엄격한 JSON 또는 그 역. 키 인용 없는 깔끔한 JS 리터럴로.

결과

JS → JSON은 입력을 JS 표현식으로 평가 — 본인 데이터에만 사용.

사용법

  1. JS 객체 리터럴 또는 JSON 붙여넣기.
  2. 방향 선택 — JS → JSON은 값을 엄격히 감쌈·JSON → JS는 식별자 키 인용 해제·작은따옴표 선호.
  3. 결과 복사. 들여쓰기 일관.

자세한 설명

펼치기

실제 JS에서 쓰는 느슨한 문법을 그대로 받습니다. 따옴표 없는 식별자 키, 작은따옴표, 마지막 쉼표, 줄 주석이 모두 됩니다. 결과로 표준 JSON을 내보내고, 반대 방향으로는 손으로 타이핑한 것 같은 깔끔한 JS 리터럴을 만듭니다. 개발자 콘솔에서 복사한 출력을 JSON 파서가 받아들이는 형태로 바꾸거나, API 응답을 소스 코드에 넣기 좋게 다듬을 때 씁니다.

파싱은 new Function이 아니라 JSON5를 거칩니다. 이것이 변환기와 임의 코드 실행 구멍을 가르는 차이입니다. 붙여 넣은 텍스트를 자바스크립트 엔진에 넘기면 그 안에 있는 것이 무엇이든 실행되는데, 콘솔에서 복사한 객체 리터럴이야말로 사람들이 읽지 않고 붙여 넣는 종류의 텍스트입니다. 대가로 데이터만 살아남습니다. 함수, new Date(...), 정규식 리터럴, 계산된 키는 다른 무언가로 평가되는 대신 여기서 파싱 오류가 됩니다.

JSON5는 JSON이 표현할 방법이 없는 값도 받아들입니다. NaN, Infinity, 0xFF 같은 16진수, .5 같은 소수점 시작 표기가 모두 파싱되지만, JSON에는 앞의 두 값을 적을 문법이 없어서 null로 돌아오므로 왕복이 항상 무손실이지는 않습니다. 숫자는 또 다른 조용한 경계입니다. 배정밀도 범위를 벗어난 값은 지나가면서 정밀도를 잃고, 그래서 19자리 식별자가 미묘하게 달라져 돌아옵니다. 긴 ID는 문자열로 두십시오.

JS 방향에서는 올바른 식별자인 키는 따옴표 없이 두고 나머지는 고른 방식으로 감쌉니다. 그 출력은 문장이 아니라 리터럴이라 대입하려면 평소의 감싸기가 필요하고, 줄 처음에 맨 객체를 붙여 넣으면 파서가 중괄호를 블록으로 읽습니다.

주석은 버려집니다. 양쪽 어느 데이터 모델에도 속하지 않기 때문에, 설명이 빽빽한 설정 파일도 깔끔하지만 아무 설명 없는 형태로 돌아옵니다.

자주 묻는 질문

어떻게 파싱?

JS → JSON은 페이지 안의 JSON5 파서가 읽어. 따옴표 없는 키, 작은따옴표, 후행 쉼표, 주석을 허용하는 JSON의 상위 집합이야. 붙여넣은 내용은 실행되지 않아 — 식, 함수 호출, new Date()는 실행되는 코드가 아니라 파싱 오류로 처리돼.

함수·날짜·RegExp는?

JSON은 문자열·숫자·불·null·배열·일반 객체만 운반. 컨버터는 다른 건 JSON.stringify처럼 조용히 드롭하지 않고 명시적 에러로 거부.

JS 출력에 작은따옴표 선호 이유?

모던 JS 코드베이스의 주류 스타일과 일치(Prettier 기본). 큰따옴표 원하면 토글 끄기.

자바스크립트는 받아주는 걸 JSON은 왜 거부하나?

JSON이 언어가 아니라 데이터 교환 형식이기 때문이다. 모든 구현이 합의할 수 있는 것만 남기려고 일부러 좁게 만들었다. 주석도, 마지막 쉼표도, 작은따옴표도, 따옴표 없는 키도, undefined도, NaN이나 Infinity도 없다. 이들은 전부 코드를 쓰는 사람의 편의를 위해 자바스크립트에 있는 것이고, 전부 다른 언어의 파서가 다르게 해석할 여지가 있는 규칙을 필요로 한다.

콘솔 출력을 그대로 붙여넣어도 되나?

대개 되지만 결과를 읽어봐야 한다. 콘솔이 찍는 것은 객체의 소스가 아니라 표현이다. 긴 배열은 줄여서 보여주고, 클래스 인스턴스는 생성자 이름을 보여주며, 게터는 계산된 값이 찍힐 수 있고, 순환 참조는 자리표시자로 나온다. 콘솔이 줄인 것은 복사한 텍스트에 실제로 없는 것이고, 변환이 그것을 되살릴 수는 없다.

관련 도구