JavaScript로 JSON 처리 익히기: 구문 분석 및 문자열화

JavaScript에서 JSON 처리(파싱 및 문자열화)

JSON(JavaScript Object Notation)은 사람이 읽고 쓰기 쉽고 기계가 쉽게 구문 분석하고 생성할 수 있는 경량 데이터 교환 형식입니다. JavaScript는 JSON 문자열을 객체로 구문 분석하고 객체를 JSON 문자열로 변환하는 내장 메소드를 제공합니다.

---

1. JSON 문자열 구문 분석

JSON.parse() 메소드는 JSON 문자열을 JavaScript 객체로 변환하는 데 사용됩니다.

구문

JSON.parse(text[, reviver]);

• 텍스트: 구문 분석할 JSON 문자열입니다.
• Reviver(선택): 파싱된 객체를 반환하기 전에 변환하는 함수입니다.

예

아. 단순 파싱

const jsonString = '{"name": "John", "age": 30}';
const parsedData = JSON.parse(jsonString);
console.log(parsedData.name); // Output: John
console.log(parsedData.age);  // Output: 30

베. 부활 기능 사용하기
부활 기능을 사용하여 구문 분석 프로세스를 맞춤 설정할 수 있습니다.

const jsonString = '{"name": "John", "birthYear": 1990}';
const parsedData = JSON.parse(jsonString, (key, value) => {
  if (key === "birthYear") {
    return 2024 - value; // Convert birth year to age
  }
  return value;
});
console.log(parsedData.birthYear); // Output: 34

오류 처리

잘못된 JSON을 처리하려면 항상 JSON.parse()를 try...catch 블록으로 래핑하세요.

const invalidJson = "{name: 'John', age: 30}"; // Invalid JSON (keys must be in quotes)
try {
  const data = JSON.parse(invalidJson);
} catch (error) {
  console.error("Invalid JSON:", error.message);
}

---

2. JavaScript 객체 문자열화

JSON.stringify() 메서드는 JavaScript 개체를 JSON 문자열로 변환합니다.

구문

JSON.stringify(value[, replacer[, space]]);

• value: 문자열화할 객체입니다.
• replacement(선택): 속성을 필터링하는 함수 또는 배열입니다.
• space (선택): 가독성을 높이기 위해 들여쓰기를 추가합니다.

예

아. 단순 문자열화

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data);
console.log(jsonString); // Output: {"name":"John","age":30}

베. 교체 기능 사용
교체 기능은 개체의 속성을 필터링하거나 변환합니다.

const data = { name: "John", age: 30, password: "secret" };
const jsonString = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined; // Exclude passwords
  return value;
});
console.log(jsonString); // Output: {"name":"John","age":30}

다. 들여쓰기 추가
공백 매개변수는 들여쓰기로 출력 형식을 지정합니다.

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);
// Output:
// {
//   "name": "John",
//   "age": 30
// }

오류 처리

객체의 순환 참조로 인해 JSON.stringify()에서 오류가 발생합니다.

const circularObject = {};
circularObject.self = circularObject;
try {
  JSON.stringify(circularObject);
} catch (error) {
  console.error("Cannot stringify circular object:", error.message);
}

---

3. 실제 사용 사례

아. 서버로 데이터 보내기

HTTP 요청으로 보내기 전에 JavaScript 개체를 JSON 문자열로 변환하세요.

const data = { name: "John", age: 30 };
fetch("https://example.com/api", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
});

베. 로컬 스토리지에 데이터 저장

localStorage를 사용하여 JSON 형식으로 데이터를 저장하고 검색합니다.

const data = { name: "John", age: 30 };
localStorage.setItem("user", JSON.stringify(data)); // Storing data

const userData = JSON.parse(localStorage.getItem("user")); // Retrieving data
console.log(userData.name); // Output: John

ㄷ. 객체 딥 카피

JSON 방법을 사용하여 객체의 전체 복사본을 생성합니다(함수 또는 순환 참조에는 작동하지 않음).

JSON.parse(text[, reviver]);

---

4. JSON과 JavaScript 개체의 차이점

JSON	JavaScript Object
Text format (string)	In-memory data structure
Keys must be strings (quoted)	Keys can be strings or symbols
Cannot store methods/functions	Can store methods/functions

---

5. 요약

• JSON.parse()를 사용하여 JSON 문자열을 JavaScript 개체로 변환합니다.
• JSON.stringify()를 사용하여 JavaScript 개체를 JSON 문자열로 변환합니다.
• JSON은 웹 애플리케이션, 특히 API 및 로컬 저장소의 데이터 교환에 필수적입니다.
• JSON을 구문 분석하거나 문자열로 변환할 때 항상 오류를 처리하세요.

JSON 처리를 마스터하는 것은 현대적인 데이터 기반 웹 애플리케이션을 구축하는 데 필수적인 기술입니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일인 kaashshorts28@gmail.com으로 언제든지 연락주세요.

위 내용은 JavaScript로 JSON 처리 익히기: 구문 분석 및 문자열화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!