[TIL] 8/16

JSON과 관련된 JSON.stringify와 JSON.parse는 자바스크립트에서 객체를 문자열로 변환하거나, 문자열을 객체로 변환하는 데 사용됩니다.

1. JSON.stringify

기능:

• 자바스크립트 객체 또는 배열을 JSON 문자열로 변환합니다.

언제 사용하는가:

• 객체나 배열을 로컬 스토리지에 저장하거나, 서버로 데이터를 전송할 때 사용합니다. 로컬 스토리지와 서버는 문자열 형식의 데이터를 필요로 하기 때문에, 객체를 문자열로 변환해야 합니다.

예시:

const obj = { name: "Alice", age: 25 };
const jsonString = JSON.stringify(obj);

console.log(jsonString); // '{"name":"Alice","age":25}'
// 이제 이 jsonString을 로컬 스토리지에 저장하거나 서버에 전송할 수 있습니다.

응용:

• 로컬 스토리지에 데이터를 저장할 때:

  const myObject = { name: "Alice", age: 25 };
  localStorage.setItem('user', JSON.stringify(myObject));

  여기서 myObject는 객체이지만, 로컬 스토리지에는 문자열만 저장할 수 있으므로 JSON.stringify를 사용해 문자열로 변환합니다.

2. JSON.parse

기능:

• JSON 문자열을 자바스크립트 객체로 변환합니다.

언제 사용하는가:

• 서버로부터 받은 JSON 형식의 데이터를 자바스크립트에서 객체로 사용하거나, 로컬 스토리지에서 데이터를 가져올 때 사용합니다.

예시:

const jsonString = '{"name":"Alice","age":25}';
const obj = JSON.parse(jsonString);

console.log(obj); // { name: "Alice", age: 25 }
// 이제 obj는 일반 자바스크립트 객체로 사용할 수 있습니다.

응용:

• 로컬 스토리지에서 데이터를 가져올 때:

  const userString = localStorage.getItem('user');
  const userObject = JSON.parse(userString);
  console.log(userObject.name); // "Alice"

  여기서 userString은 로컬 스토리지에 저장된 문자열입니다. JSON.parse를 사용해 이 문자열을 자바스크립트 객체로 변환합니다.

정리

• JSON.stringify: 객체 → 문자열

  • 객체나 배열을 JSON 문자열로 변환할 때 사용합니다.
  • 사용 예: 데이터를 로컬 스토리지에 저장하거나, 서버로 전송할 때.

• JSON.parse: 문자열 → 객체

  • JSON 문자열을 자바스크립트 객체로 변환할 때 사용합니다.
  • 사용 예: 로컬 스토리지에서 데이터를 가져오거나, 서버에서 받은 데이터를 처리할 때.