JavaScript에서 문자열을 객체로 변환하는 방법 (JSON.parse() 활용)

JavaScript에서 문자열을 객체로 변환하는 가장 일반적인 방법은 JSON.parse() 메서드를 사용하는 것입니다. 이 메서드는 JSON 형식으로 작성된 문자열을 해석(파싱)하여 실제 JavaScript 객체로 반환해 줍니다.

단, JSON.parse()가 정상적으로 동작하려면 문자열이 유효한 JSON 형식이어야 합니다. 즉, 모든 키(key)는 반드시 큰따옴표(")로 감싸야 하며, 작은따옴표나 키 없이 작성된 문자열은 오류를 발생시킵니다.

예제 코드

다음은 화면에 표시된 JSON 문자열을 버튼 클릭 한 번으로 JavaScript 객체로 변환하고, 그 속성 값을 출력하는 전체 예제입니다.

<!DOCTYPE html>
<html lang="en">
<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>convert a string to JavaScript object</h1>
<div class="sample">
{"name":"Rohan", "sports":["Cricket","Football"], "country":"India"}
</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to convert the above string to JavaScript object</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>

코드 설명

document.querySelector()를 사용해 JSON 문자열이 담긴 요소(.sample)와 결과를 출력할 요소(.result)를 가져옵니다.
JSON.parse(sampleEle.innerHTML)을 호출하여 div 내부의 JSON 문자열을 JavaScript 객체로 변환한 뒤 parsedJson 변수에 저장합니다.
버튼을 클릭하면 변환된 객체의 name, country, sports 속성에 접근하여 결과 영역에 순차적으로 출력합니다.

실행 결과

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

JavaScript에서 문자열을 객체로 변환하는 방법 (JSON.parse() 활용)

'CLICK HERE' 버튼을 클릭하면 문자열이 JavaScript 객체로 변환되어 아래와 같이 이름, 국가, 스포츠 정보가 화면에 표시됩니다.

JavaScript에서 문자열을 객체로 변환하는 방법 (JSON.parse() 활용)