JSON 텍스트를 JavaScript 객체로 변환하는 방법

JavaScript에서 JSON.parse() 메서드는 JSON 형식의 문자열(텍스트)을 실제 사용 가능한 JavaScript 객체로 변환하는 역할을 합니다. 서버에서 받아온 JSON 데이터를 웹 애플리케이션 내에서 활용하려면 반드시 이 파싱(parsing) 과정을 거쳐야 합니다.

JSON.parse() 기본 문법

기본적인 사용 문법은 다음과 같습니다.

JSON.parse(text[, reviver])

text: JavaScript 객체로 변환하고자 하는 JSON 문자열입니다.
reviver(선택 사항): 파싱 결과가 반환되기 전에 각 값을 변형할 수 있는 콜백 함수입니다.

다음은 JSON 텍스트를 JavaScript 객체로 변환하는 전체 예제 코드입니다.

예제

<!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() Method</h1>
<div class="sample">
{"name":"Rohan", "sports":["Cricket","Football"], "country":"India"}
</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</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 = "Name = " + parsedJson.name + "<br>";
        resultEle.innerHTML += "Country = " + parsedJson.country + "<br>";
        resultEle.innerHTML += "Sports = " + parsedJson.sports;
    });
</script>
</body>
</html>

코드 설명

.sample 요소 안에는 JSON 형식의 문자열이 들어 있습니다.
JSON.parse(sampleEle.innerHTML)를 호출하여 해당 문자열을 JavaScript 객체로 변환한 뒤 parsedJson 변수에 저장합니다.
버튼을 클릭하면 파싱된 객체의 name, country, sports 속성 값이 .result 영역에 출력됩니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

JSON 텍스트를 JavaScript 객체로 변환하는 방법 – JSON.parse() 완벽 정리

"CLICK HERE" 버튼을 클릭하면 −

JSON 텍스트를 JavaScript 객체로 변환하는 방법 – JSON.parse() 완벽 정리

참고: 잘못된 JSON 처리하기

파싱하려는 문자열이 유효한 JSON 형식이 아니라면 SyntaxError가 발생합니다. 따라서 실무에서는 try...catch 문으로 감싸 오류를 처리하는 것이 좋습니다.

try {
  const obj = JSON.parse('{"name":"Rohan"}');
  console.log(obj.name); // Rohan
} catch (e) {
  console.error("유효하지 않은 JSON입니다:", e.message);
}