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

10 Sep 2023

javascript

JSON(JavaScript Object Notation)은 데이터를 효과적으로 저장하고 전송하기 위한 경량의 데이터 형식입니다. 자바스크립트는 이러한 JSON 데이터를 쉽게 수정할 수 있도록 여러 가지 도구와 메소드를 제공합니다. 이번 포스트에서는 자바스크립트로 JSON 데이터를 수정하는 방법에 대해 알아보겠습니다.

JSON 데이터 구조 이해하기

JSON 데이터는 key-value 쌍의 집합으로 구성됩니다. 예를 들어, 다음과 같은 JSON 데이터가 있다고 가정해봅시다.

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

이 JSON 데이터는 3개의 key-value 쌍으로 이루어져 있습니다. "name", "age", "city"는 각각 key이고, "John", 30, "New York"은 각각 그에 대응하는 value입니다.

JSON 데이터 수정하기

자바스크립트에서 JSON 데이터를 수정하는 가장 간단한 방법은 해당 데이터를 자바스크립트 객체로 변환한 후, 객체의 속성을 수정하는 것입니다. 이후 다시 JSON 문자열로 변환하여 원래의 JSON 데이터를 수정된 버전으로 업데이트할 수 있습니다.

자바스크립트에서 JSON 문자열을 객체로 변환하려면 JSON.parse() 메소드를 사용합니다. 반대로 객체를 JSON 문자열로 변환하려면 JSON.stringify() 메소드를 사용합니다. 이제 이러한 메소드를 사용하여 JSON 데이터를 수정하는 예제를 살펴보겠습니다.

// 예시 JSON 데이터
const jsonStr = '{"name":"John", "age":30, "city":"New York"}';

// JSON 문자열을 JS 객체로 변환
const jsonObj = JSON.parse(jsonStr);

// JS 객체 수정
jsonObj.age = 35;
jsonObj.city = "San Francisco";

// JS 객체를 JSON 문자열로 변환
const updatedJsonStr = JSON.stringify(jsonObj);

console.log(updatedJsonStr);

위의 예제에서는 먼저 예시 JSON 데이터를 jsonStr 변수에 할당합니다. 이후 JSON.parse() 메소드를 사용하여 jsonStr을 JS 객체(jsonObj)로 변환합니다. 그런 다음, 객체의 속성을 수정합니다. 마지막으로 JSON.stringify() 메소드로 수정된 객체를 다시 JSON 문자열로 변환하여 updatedJsonStr 변수에 할당합니다. 이렇게 하면 수정된 JSON 문자열이 출력됩니다.

JSON 데이터 값 추가 및 삭제하기

JSON 데이터에서 값 추가 및 삭제도 가능합니다. 값 추가는 객체에 새로운 key-value 쌍을 추가하는 것으로 이루어집니다. 값 삭제는 객체에서 해당 key-value 쌍을 삭제하는 것으로 이루어집니다. 다음 예제를 통해 살펴보겠습니다.

// 예시 JSON 데이터
const jsonStr = '{"name":"John", "age":30, "city":"New York"}';

// JSON 문자열을 JS 객체로 변환
const jsonObj = JSON.parse(jsonStr);

// 새로운 값 추가
jsonObj.gender = "male";

// 값 삭제
delete jsonObj.city;

// JS 객체를 JSON 문자열로 변환
const updatedJsonStr = JSON.stringify(jsonObj);

console.log(updatedJsonStr);

위의 예제에서는 먼저 예시 JSON 데이터를 jsonStr 변수에 할당합니다. 이후 JSON.parse() 메소드를 사용하여 jsonStr을 JS 객체(jsonObj)로 변환합니다. 그런 다음, 객체에 gender라는 새로운 key-value 쌍을 추가합니다. 또한, delete 키워드를 사용하여 city 속성을 삭제합니다. 마지막으로 JSON.stringify() 메소드를 사용하여 수정된 객체를 다시 JSON 문자열로 변환하여 updatedJsonStr 변수에 할당합니다. 이렇게 하면 수정된 JSON 문자열이 출력됩니다.

JSON 데이터를 자바스크립트로 수정하는 방법에 대해 알아보았습니다. 자바스크립트의 JSON.parse()와 JSON.stringify() 메소드를 활용하면 손쉽게 JSON 데이터를 수정하고 업데이트할 수 있습니다. 이러한 기능은 웹 애플리케이션에서 서버로부터 받은 JSON 데이터를 동적으로 조작해야 하는 경우에 매우 유용합니다.