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

10 Sep 2023

javascript

JSON (JavaScript Object Notation)은 데이터를 표현하기 위한 경량의 데이터 교환 형식입니다. 자바스크립트에서 JSON 형식의 데이터를 다루는 경우, 속성과 해당 값을 읽어오는 것이 중요한 작업입니다. 이번 블로그에서는 자바스크립트에서 JSON 객체의 속성과 값을 읽어오는 다양한 방법을 알아보겠습니다.

1. 객체의 속성에 접근하기

JSON 객체를 자바스크립트에서 읽어올 때, 객체의 속성에 접근하기 위해서는 점 표기법 또는 대괄호 표기법을 사용할 수 있습니다.

점 표기법

const obj = {
  name: "John",
  age: 30,
  city: "New York"
};

console.log(obj.name); // "John"
console.log(obj.age); // 30
console.log(obj.city); // "New York"

대괄호 표기법

const obj = {
  name: "John",
  age: 30,
  city: "New York"
};

console.log(obj["name"]); // "John"
console.log(obj["age"]); // 30
console.log(obj["city"]); // "New York"

2. 중첩된 속성에 접근하기

JSON 객체는 중첩된 속성을 가질 수 있으며, 중첩된 속성에 접근하기 위해서는 동일한 점 표기법 또는 대괄호 표기법을 사용할 수 있습니다.

const obj = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York"
  }
};

console.log(obj.address.street); // "123 Main St"
console.log(obj["address"]["city"]); // "New York"

3. 반복문을 통한 모든 속성과 값에 접근하기

JSON 객체의 모든 속성과 값을 읽어오기 위해서는 반복문을 사용할 수 있습니다. 아래 예제는 for…in 반복문을 사용하여 속성과 값을 출력하는 예제입니다.

const obj = {
  name: "John",
  age: 30,
  city: "New York"
};

for (let key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

출력 결과:

name: John
age: 30
city: New York

4. JSON 파싱하여 객체로 변환하기

JSON 형식의 문자열을 자바스크립트 객체로 변환하기 위해서는 JSON.parse() 메소드를 사용할 수 있습니다.

const jsonStr = '{"name": "John", "age": 30, "city": "New York"}';
const obj = JSON.parse(jsonStr);

console.log(obj.name); // "John"
console.log(obj.age); // 30
console.log(obj.city); // "New York"

위의 예제는 JSON 형식의 문자열을 자바스크립트 객체로 변환하여 속성과 값을 출력합니다.

JSON 객체의 속성과 값을 읽어오는 방법에 대해 알아보았습니다. 자바스크립트에서 JSON 데이터를 다룰 때, 이러한 방법들을 활용하여 필요한 정보를 쉽게 추출할 수 있습니다. 자바스크립트에서 JSON을 다룰 때는 주어진 데이터의 구조와 형식에 주의하여 작업하시기 바랍니다.

Happy coding!