자바스크립트에서 JSON 데이터 다루기

15 Sep 2023

javascript

JSON(JavaScript Object Notation)은 데이터를 효과적으로 저장하고 전송하기 위해 사용되는 경량의 데이터 형식입니다. 자바스크립트에서는 JSON 데이터를 다루는 다양한 방법을 제공합니다. 이번 글에서는 자바스크립트에서 JSON 데이터를 다루는 방법에 대해 알아보겠습니다.

JSON 데이터의 구조

JSON 데이터는 Key-Value 형태의 쌍으로 구성되어 있습니다. 여러 개의 Key-Value 쌍을 중괄호로 묶어 객체 형태로 표현할 수 있습니다. 배열 형태로 여러 개의 객체를 저장할 수도 있습니다. 다음은 간단한 예시입니다.

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

[
  {
    "name": "John",
    "age": 30,
    "city": "New York"
  },
  {
    "name": "Jane",
    "age": 25,
    "city": "London"
  }
]

JSON 데이터의 파싱

JSON 데이터를 자바스크립트에서 사용하기 위해서는 우선 JSON 문자열을 파싱하여 자바스크립트 객체로 변환해야 합니다. 이를 위해서는 JSON.parse() 메서드를 사용합니다. 예시를 살펴보겠습니다.

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

자바스크립트 객체를 JSON 문자열로 변환하기

자바스크립트 객체를 JSON 문자열로 변환하기 위해서는 JSON.stringify() 메서드를 사용합니다. 예시를 살펴보겠습니다.

var obj = {
  name: "John",
  age: 30,
  city: "New York"
};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);
// 출력: {"name":"John","age":30,"city":"New York"}

JSON 데이터 다루기 예제

다음은 JSON 데이터를 다루는 예제입니다.

var jsonStr = '[{ "name": "John", "age": 30, "city": "New York" }, { "name": "Jane", "age": 25, "city": "London" }]';
var arr = JSON.parse(jsonStr);

// 각 객체의 이름과 도시 출력
arr.forEach(function(obj) {
  console.log("이름: " + obj.name + ", 도시: " + obj.city);
});

마무리

자바스크립트에서 JSON 데이터를 다루는 방법에 대해 알아보았습니다. JSON.parse() 메서드를 사용하여 JSON 문자열을 자바스크립트 객체로 파싱하고, JSON.stringify() 메서드를 사용하여 자바스크립트 객체를 JSON 문자열로 변환할 수 있습니다. 이를 통해 자바스크립트에서 쉽게 JSON 데이터를 다룰 수 있습니다.

#javascript #JSON