JSON(JavaScript Object Notation)은 데이터를 효율적이고 간결하게 표현하기 위해 사용되는 경량 데이터 교환 형식입니다. 자바스크립트에서는 JSON을 효과적으로 다룰 수 있는 내장된 기능들을 제공하고 있습니다. 이번 블로그 포스트에서는 자바스크립트에서 JSON 데이터의 속성을 동적으로 제어하는 방법을 알아보겠습니다.

1. JSON 속성 읽기

JSON 데이터의 속성을 읽기 위해서는 JSON 객체의 속성에 접근해야 합니다. 자바스크립트에서는 JSON 데이터를 파싱하여 JavaScript 객체로 변환할 수 있습니다. 그러면 JavaScript 객체를 통해 JSON 속성에 접근할 수 있습니다. 다음은 예시입니다.

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

const obj = JSON.parse(jsonData);

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

위 코드에서 JSON.parse() 함수를 사용하여 JSON 데이터를 파싱하고, 반환된 JavaScript 객체를 obj 변수에 할당합니다. 그리고 obj 객체의 속성에 접근하여 해당 속성의 값을 출력하였습니다.

2. JSON 속성 쓰기

JSON 데이터의 속성을 쓰기 위해서는 JavaScript 객체를 JSON 데이터로 변환해야 합니다. 이는 JSON.stringify() 함수를 사용하여 간단하게 할 수 있습니다. 다음은 예시입니다.

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

const jsonData = JSON.stringify(obj);

console.log(jsonData); // {"name":"John","age":30,"city":"New York"}

위 코드에서 JSON.stringify() 함수를 사용하여 obj 객체를 JSON 데이터로 변환하고, 변환된 데이터를 jsonData 변수에 할당하여 출력하였습니다.

3. JSON 속성 동적 제어

자바스크립트에서는 속성 이름을 동적으로 제어하는 방법을 제공합니다. 이를 활용하여 JSON 데이터의 속성을 동적으로 제어할 수 있습니다. 다음은 예시입니다.

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

const obj = JSON.parse(jsonData);

const propertyName = "name";
console.log(obj[propertyName]); // "John"

const newPropertyName = "address";
const propertyValue = "123 Main St";
obj[newPropertyName] = propertyValue;

console.log(obj); // {"name":"John","age":30,"city":"New York","address":"123 Main St"}

위 코드에서는 변수를 사용하여 동적으로 속성 이름을 제어하고, 새로운 속성을 추가하는 방법을 보여줍니다. obj[propertyName]을 사용하여 동적으로 속성 값을 읽고, obj[newPropertyName] = propertyValue을 사용하여 새로운 속성을 추가합니다.

JSON 데이터의 속성을 동적으로 제어하는 방법을 알아보았습니다. 이를 활용하여 더욱 유연한 데이터 처리를 할 수 있습니다.