JavaScript JSON.parse() 메서드 – JSON 문자열을 객체로 변환하는 방법

JSON.parse() 메서드란?

JSON.parse() 메서드는 JSON 형식의 문자열을 해석(파싱)하여 그에 대응하는 JavaScript 객체를 생성하는 데 사용됩니다. 서버에서 받아온 데이터나 저장된 JSON 데이터를 코드에서 실제로 다룰 수 있는 객체 형태로 변환할 때 반드시 필요한 메서드입니다.

기본 문법은 다음과 같습니다.

JSON.parse(text[, reviver])

text : JSON 형식으로 작성된 문자열입니다.
reviver (선택 사항) : 파싱 결과가 반환되기 전에 각 값을 원하는 형태로 변환할 수 있는 함수입니다.

예제

다음은 JSON.parse() 메서드를 활용한 전체 예제 코드입니다 −

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>JSON parse() 메서드</h1>
<div class="sample">
{"name":"Rohan", "sports":["Cricket","Football"], "country":"India"}
</div>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 JSON 문자열이 파싱됩니다.
</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   let resultEle = document.querySelector(".result");
   let parsedJson = JSON.parse(sampleEle.innerHTML);
   document.querySelector(".Btn").addEventListener("click", () => {
      resultEle.innerHTML = "이름 = " + parsedJson.name + "<br>";
      resultEle.innerHTML += "국가 = " + parsedJson.country + "<br>";
      resultEle.innerHTML += "스포츠 = " + parsedJson.sports;
   });
</script>
</body>
</html>

코드 설명

.sample 클래스를 가진 div 요소 안에는 JSON 문자열이 들어 있습니다. 버튼을 클릭하면 sampleEle.innerHTML로 가져온 JSON 문자열이 JSON.parse()를 통해 JavaScript 객체로 변환되고, 변환된 객체(parsedJson)의 name, country, sports 속성 값이 순차적으로 화면에 출력됩니다.

실행 결과

JavaScript JSON.parse() 메서드 – JSON 문자열을 객체로 변환하는 방법

“클릭하세요” 버튼을 클릭하면 −

JavaScript JSON.parse() 메서드 – JSON 문자열을 객체로 변환하는 방법

버튼을 클릭하면 아래와 같이 파싱된 객체의 값이 화면에 표시됩니다.

이름 = Rohan
국가 = India
스포츠 = Cricket,Football

참고로, 잘못된 형식의 JSON 문자열을 파싱하면 SyntaxError가 발생하므로, 실무에서는 try...catch 문으로 감싸 오류를 처리하는 것이 좋습니다.