JavaScript에서 JSON을 객체로 변환

JSON.parse()를 사용하면 JSON 형식의 문자열을 JavaScript 값으로 변환할 수 있습니다. 객체 형태의 JSON 문서를 파싱하면 속성을 읽고 사용할 수 있는 JavaScript 객체가 반환됩니다. 파싱만으로 애플리케이션 규칙이 검증되거나 날짜 문자열이 Date 객체로 바뀌지는 않습니다. 신뢰할 수 없는 값을 HTML에서 안전하게 사용할 수 있게 되는 것도 아닙니다. 아래 예제에서는 기본 변환, 잘못된 입력 처리, 중첩 속성 접근, 날짜 변환을 살펴봅니다.

JSON 파싱 결과

JSON은 객체, 배열, 문자열, 숫자, 불리언, null 같은 값을 표현하는 텍스트 형식입니다. JSON 문자열은 텍스트이며, 파싱하면 JavaScript에서 그에 해당하는 값이 반환됩니다. 객체 형태의 JSON 문서를 파싱하면 객체가 되고, JSON 배열을 파싱하면 배열이 됩니다. 결과가 항상 객체인 것은 아니므로 입력이 어떤 형태일 것으로 예상하는지 고려해 코드를 작성해야 합니다.

JSON 문법은 JavaScript 객체 리터럴 문법보다 엄격합니다. 객체 키와 문자열 값에는 큰따옴표를 사용해야 하며, JSON에서는 주석, 함수, 후행 쉼표를 허용하지 않습니다. 예를 들어 {"name":"Ari","active":true}는 JSON 텍스트지만 {name: 'Ari', active: true}는 JSON이 아닙니다. 이런 문법 차이 때문에 JavaScript 객체 리터럴을 파서에 그대로 전달할 수 없는 경우가 있습니다.

JSON 문자열을 JSON.parse()로 변환하기

문자열을 JSON.parse()에 전달한 뒤, 반환된 값을 다른 JavaScript 데이터처럼 사용하면 됩니다. 다음 예제에서는 사람 정보를 파싱한 다음 속성 두 개를 읽습니다.

예제를 실행해 보세요.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const jsonText = '{"name":"Ari","age":30}';
const person = JSON.parse(jsonText);

console.log(person.name);
console.log(person.age);

코드와 출력에 표시되는 레이블은 코드의 바이트를 그대로 보존하기 위해 영어로 남아 있습니다. 첫 번째 로그에는 이름 Ari가, 두 번째 로그에는 숫자 나이 30이 표시됩니다. JSON 문서가 객체를 나타내므로 속성에 접근할 수 있습니다. 입력이 이미 JavaScript 객체라면 다시 파싱하려고 문자열로 변환하지 마세요. JSON.parse()는 JSON 텍스트를 입력으로 받습니다.

잘못된 JSON 처리

문자열 형식이 잘못되었거나 유효한 JSON 문법을 따르지 않으면 JSON.parse()가 SyntaxError를 발생시킵니다. 파일, 요청 또는 예상한 형식을 따르지 않을 수 있는 다른 출처에서 입력을 받을 때는 이 오류를 처리하세요. 호출하는 쪽에서 다음 동작을 정할 수 있도록 파싱 작업 가까이에 오류 처리를 두세요.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const jsonText = '{"name":"Ari",}';
let person;

try {
  person = JSON.parse(jsonText);
  console.log(person.name);
} catch (error) {
  console.log("Could not parse JSON");
}

코드와 출력에 표시되는 레이블은 코드의 바이트를 그대로 보존하기 위해 영어로 남아 있습니다. 이 예제는 후행 쉼표가 있는 잘못된 입력에 대해 Could not parse JSON이라는 짧은 애플리케이션 메시지를 출력합니다. 실제 코드에서는 애플리케이션 로그에 오류를 기록하거나 이해하기 쉬운 검증 메시지를 보여줄 수 있습니다. 민감한 입력을 로그에 남기거나 내부 오류 세부 정보를 사용자에게 노출하지 마세요. 파싱에 성공했다는 것은 텍스트가 JSON 문법을 따른다는 뜻일 뿐입니다. 값을 사용하기 전에 필수 속성과 값의 유형을 별도로 확인하세요.

중첩 값 읽기

중첩 객체와 배열도 중첩된 JavaScript 값으로 파싱되므로 일반적인 속성 표기법과 인덱스 표기법으로 접근할 수 있습니다. 다음 예제에서는 주소 객체에서 도시를, 배열에서 첫 번째 항목을 읽습니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const jsonText = '{"person":{"name":"Ari","address":{"city":"Oslo"}},"scores":[8,9]}';
const data = JSON.parse(jsonText);

console.log(data.person.address.city);
console.log(data.scores[0]);

예상하는 데이터 구조가 중요합니다. person, address 또는 scores가 없거나 예상과 다른 유형이면 속성에 직접 접근해도 애플리케이션이 필요로 하는 값을 얻지 못할 수 있습니다. 데이터에 스키마가 있다면 깊은 속성을 사용하기 전에 파싱한 값을 검증하세요. 파싱은 객체를 병합하거나 속성 이름을 변환하지 않습니다. JSON 텍스트에 표현된 값을 다시 구성할 뿐입니다.

파싱 후 날짜 문자열 변환

JSON에는 날짜 유형이 없으므로 날짜는 문자열로 표현됩니다. 파싱해도 이 문자열은 그대로 남습니다. 원본이 특정 시각을 나타낸다면 시간대 지정자가 포함된 표준 ISO 형식 값을 사용하고, 파싱한 뒤 날짜 속성을 new Date()로 명시적으로 변환하세요.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const jsonText = '{"createdAt":"2024-01-15T12:30:00Z"}';
const data = JSON.parse(jsonText);
const createdAt = new Date(data.createdAt);

console.log(createdAt instanceof Date);

코드와 출력에 표시되는 레이블은 코드의 바이트를 그대로 보존하기 위해 영어로 남아 있습니다. new Date()는 문자열에서 JavaScript Date 객체를 생성하지만, new 없이 호출하는 Date()는 문자열을 반환합니다. 날짜 파싱 결과는 입력 형식에 따라 달라질 수 있으므로 데이터 경계에서 날짜 형식을 정규화하세요. 출처를 신뢰할 수 없다면 생성된 날짜가 유효한지도 확인해야 합니다. 애플리케이션에서 날짜로 취급하는 필드만 변환하세요. JSON 파서는 날짜를 자동으로 추론하지 않습니다.