자바스크립트 JSON 데이터를 자바스크립트로 변환하는 방법

10 Sep 2023

javascript

JSON(JavaScript Object Notation)은 데이터 교환을 위해 널리 사용되는 경량 데이터 형식입니다. 자바스크립트에서는 JSON 데이터를 처리하고 다루기 위해 다양한 기능들을 제공합니다. 이번 블로그 포스트에서는 자바스크립트 JSON 데이터를 자바스크립트 객체로 변환하는 방법에 대해 알아보겠습니다.

JSON 데이터란?

JSON 데이터는 키-값 쌍 형태의 데이터를 기반으로 합니다. 키는 문자열로, 값은 다양한 데이터 타입을 가질 수 있습니다. 예를 들어, 아래와 같은 JSON 데이터를 생각해 보겠습니다.

{
  "name": "John",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "New York"
  },
  "hobbies": ["reading", "coding", "hiking"]
}

위의 예시에서 “name”은 문자열 값 “John”을 가지고 있으며, “age”는 숫자 값 30을 가지고 있습니다. “address” 키는 또 다른 JSON 객체를 가지고 있고, “hobbies” 키는 배열 값을 가지고 있습니다.

JSON.parse() 메서드

자바스크립트에서는 JSON.parse() 메서드를 사용하여 JSON 문자열을 자바스크립트 객체로 변환할 수 있습니다. 다음과 같이 사용합니다.

const jsonStr = '{ "name": "John", "age": 30 }';
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // 출력 결과: "John"
console.log(jsonObj.age); // 출력 결과: 30

위의 예시에서 JSON.parse() 메서드를 사용하여 JSON 문자열 '{ "name": "John", "age": 30 }'을 자바스크립트 객체로 변환합니다. 변환된 객체를 jsonObj 변수에 할당한 후, jsonObj.name과 jsonObj.age을 사용하여 해당 값을 출력합니다.

주의사항

JSON.parse() 메서드는 유효한 JSON 문자열만 처리할 수 있습니다. 유효한 JSON 형식에 맞지 않는 문자열을 파싱하려고 시도하면 에러가 발생합니다.
JSON.parse() 메서드는 JSON 문자열을 자바스크립트 객체로 변환하기 때문에, 해당 객체를 사용하는데 필요한 메소드나 프로퍼티들을 사용할 수 있습니다.

자바스크립트에서 JSON 데이터를 다룰 때 JSON.parse() 메서드를 활용하면 편리하게 자바스크립트 객체로 변환할 수 있습니다. 이를 통해 JSON 데이터를 원하는 대로 활용할 수 있습니다.

더 자세한 내용은 MDN web docs를 참고하세요.