json() 과 JSON.parse()

`json()` 메서드와 `JSON.parse()` 메서드는 모두 JSON 데이터를 JavaScript 객체로 변환하지만, 그 사용 맥락과 작동 방식에는 차이가 있습니다.

json()

일반적으로 `json()` 메서드는 `Fetch API`와 함께 사용됩니다. `fetch`를 통해 서버로부터 응답을 받으면, 이 응답은 `Response` 객체로 반환됩니다. `json()` 메서드는 이 `Response` 객체에서 JSON 데이터를 추출하고 이를 JavaScript 객체로 변환합니다.

fetch('https://api.example.com/data')
    .then(response => response.json()) // Response 객체의 json() 메서드 호출
    .then(data => {
      console.log(data); // JSON 데이터를 JavaScript 객체로 변환한 결과
    })
    .catch(error => console.error('Error:', error));
  ```

JSON.parse()

`JSON.parse()` 메서드는 JSON 문자열을 JavaScript 객체로 변환하는 데 사용됩니다. 주로 이미 문자열 형태로 존재하는 JSON 데이터를 객체로 변환할 때 사용됩니다.

 const jsonString = '{"name":"John","age":30,"city":"New York"}';
  const obj = JSON.parse(jsonString);
  console.log(obj); // { name: "John", age: 30, city: "New York" }
  ```

 

주요 차이점

1. 맥락
   - `json()`: 주로 `fetch`를 통해 서버로부터 응답을 받을 때 사용됩니다.
   - `JSON.parse()`: 일반적으로 이미 JSON 형식의 문자열이 있는 경우 사용됩니다.

2. 입력 데이터
   - `json()`: `Response` 객체에서 호출되며, HTTP 응답의 본문을 JSON으로 파싱합니다.
   - `JSON.parse()`: JSON 형식의 문자열을 입력으로 받습니다.

3. 출력 데이터
   - 둘 다 JSON 데이터를 JavaScript 객체로 변환하지만, `json()`은 비동기적으로 작동하여 `Promise`를 반환하고, `JSON.parse()`는 동기적으로 작동하여 즉시 결과를 반환합니다.