자바스크립트에서 JSON 객체의 속성과 값을 읽어오는 방법

10 Sep 2023

JSON(JavaScript Object Notation)은 데이터를 교환하기 위한 경량의 데이터 형식입니다. 자바스크립트에서 JSON 객체의 속성과 값을 읽어오는 방법에 대해 알아볼 것입니다.

1. JSON 객체 생성

우선, JSON 객체를 생성해야 합니다. JSON 객체는 중괄호({})를 사용하여 생성할 수 있습니다. 예를 들어, 다음과 같이 JSON 객체를 생성할 수 있습니다.

var person = {
  "name": "John",
  "age": 30,
  "city": "New York"
};

위의 예제에서 person은 JSON 객체이며, name, age, city는 속성(property)입니다. 이제 이 속성들에 접근하는 방법에 대해 알아보겠습니다.

JSON 객체의 속성 값에 접근하기 위해서는 점(.) 또는 대괄호([]) 표기법을 사용할 수 있습니다.

점 표기법을 사용하여 속성 값에 접근하는 방법은 다음과 같습니다.

var name = person.name;
var age = person.age;
var city = person.city;

위의 예제에서 person 객체의 name, age, city 속성 값을 각각 name, age, city 변수에 할당하고 있습니다.

대괄호 표기법을 사용하여 속성 값에 접근하는 방법은 다음과 같습니다.

var name = person["name"];
var age = person["age"];
var city = person["city"];

점 표기법과 대괄호 표기법은 동일한 결과를 도출합니다. 속성 이름이 변수로 정의되거나, 특수 문자를 포함하는 경우 대괄호 표기법을 사용하는 것이 더 적합합니다.

JSON 객체는 중첩된 형태로 속성이 구성될 수 있습니다. 중첩된 속성 값에 접근하기 위해서는 점(.) 또는 대괄호([]) 표기법을 중첩하여 사용할 수 있습니다.

var person = {
  "name": {
    "first": "John",
    "last": "Doe"
  },
  "age": 30,
  "city": "New York"
};

위의 예제에서 person 객체는 name, age, city 속성을 가지며, name 속성은 또 다른 JSON 객체를 값으로 가지고 있습니다.

var firstName = person.name.first;
var lastName = person["name"]["last"];

점 표기법과 대괄호 표기법을 혼합하여 중첩된 속성 값을 읽어올 수 있습니다.

JSON 객체의 속성을 반복하여 모든 속성과 값을 읽어오려면 for...in 반복문을 사용할 수 있습니다.

for (var key in person) {
  console.log(key + ": " + person[key]);
}

위의 예제에서 key 변수에는 각 속성 이름이 할당되며, person[key]를 통해 각 속성 값에 접근할 수 있습니다. 이를 활용하여 JSON 객체의 모든 속성과 값을 출력할 수 있습니다.

자바스크립트에서 JSON 객체의 속성과 값을 읽어오는 방법에 대해 알아보았습니다. 이를 활용하여 JSON 데이터를 다루는 작업을 보다 수행하기 쉽게 할 수 있습니다.

더 자세한 내용은 JSON 문서를 참조하십시오.