자바스크립트에서 JSON 데이터를 다루는 고급 기술

10 Sep 2023

javascript

자바스크립트는 JSON(JavaScript Object Notation) 데이터를 다루기 위한 매우 강력한 기능을 제공합니다. 이러한 기능을 활용하여 JSON 데이터를 읽고 쓰고 조작하는 고급 기술을 알아보겠습니다.

JSON 데이터 읽기

JSON 데이터를 읽기 위해서는 JSON.parse() 메서드를 사용합니다. 이 메서드는 JSON 문자열을 자바스크립트 객체로 변환해줍니다. 예를 들어, 다음과 같은 JSON 문자열이 있다고 가정해봅시다.

const jsonString = `{
  "name": "John Doe",
  "age": 30,
  "email": "johndoe@example.com"
}`;

const person = JSON.parse(jsonString);

console.log(person.name); // "John Doe"
console.log(person.age); // 30
console.log(person.email); // "johndoe@example.com"

JSON 데이터 쓰기

JSON 데이터를 쓰기 위해서는 JSON.stringify() 메서드를 사용합니다. 이 메서드는 자바스크립트 객체를 JSON 문자열로 변환해줍니다. 예를 들어, 다음과 같은 자바스크립트 객체가 있다고 가정해봅시다.

const person = {
  name: "John Doe",
  age: 30,
  email: "johndoe@example.com"
};

const jsonString = JSON.stringify(person);

console.log(jsonString); // '{"name":"John Doe","age":30,"email":"johndoe@example.com"}'

JSON 데이터 조작

JSON 데이터를 조작하기 위해서는 자바스크립트에서 제공하는 객체와 배열의 메서드를 활용할 수 있습니다. 예를 들어, 다음과 같은 JSON 데이터를 가지고 있다고 가정해봅시다.

const data = `
{
  "fruits": [
    {
      "name": "Apple",
      "color": "Red"
    },
    {
      "name": "Banana",
      "color": "Yellow"
    },
    {
      "name": "Orange",
      "color": "Orange"
    }
  ]
}
`;

이제 이 데이터에 새로운 과일을 추가하고 싶다면, 다음과 같이 할 수 있습니다.

const parsedData = JSON.parse(data);

parsedData.fruits.push({
  name: "Grapes",
  color: "Purple"
});

console.log(parsedData.fruits);

데이터에서 특정 과일을 제거하고 싶다면, filter() 메서드를 사용할 수 있습니다.

parsedData.fruits = parsedData.fruits.filter(fruit => fruit.name !== 'Banana');

console.log(parsedData.fruits);

이렇게 자바스크립트에서 제공하는 함수들을 사용하여 JSON 데이터를 조작할 수 있습니다.

결론

자바스크립트에서 JSON 데이터를 다루는 고급 기술을 알아보았습니다. JSON 데이터를 읽고 쓰고 조작하는 메서드 및 기술을 이용하면, 더욱 효율적인 데이터 처리가 가능해집니다. JSON 데이터를 잘 활용하여 다양한 웹 애플리케이션을 개발해보세요.