자바스크립트 제이슨 변환

Feb 26, 2024

Contents

1. JS 오브젝트 → JSON 타입 2. JSON 타입 → JS 오브젝트

💡

JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷으로, 웹 어플리케이션에서 데이터를 전송할 때 공통 언어로 사용된다.

JSON(JavaScript Object Notation) 활용해보기 - {CODE-RYU};

HTTP

https://inblog.ai/coderyu1/jsonjavascript-object-notation-활용해보기-14359?traffic_type=internal

그림과 같은 자바스크립트 오브젝트 user가 있다. 자바스크립트의 오브젝트는 다른 프로그램 언어가 이해할 수 없기 때문에 통신이 불가능하다. 따라서 통신이 가능하게 하려면 서로 공통 언어로 변환한 후 데이터가 전송되어야 한다. 반대로 다른 언어에서 자바스크립트로 데이터를 받을 때도 제이슨 문자열로 받은 후 자바스크립트 오브젝트로 변환되어야 한다.

그림의 user 오브젝트를 JSON 타입으로 변환해본다.

1. JS 오브젝트 → JSON 타입


<script>
        let user = {
            id: 1,
            username: "ssar",
            password: "1234",
            hobby: ["축구", "농구"]
        };

        // js object -> json String  . 매우 중요. 제이슨은 문자열
        let requestBody = JSON.stringify(user);
        console.log(requestBody);


    </script>

stringify()함수를 사용해 JSON 타입으로 변환되었다.

2. JSON 타입 → JS 오브젝트


<script>
        let user = {
            id: 1,
            username: "ssar",
            password: "1234",
            hobby: ["축구", "농구"]
        };
        // js object -> json String
        let requestBody = JSON.stringify(user);
        console.log(requestBody);

        // json String -> js object
        let responseBody = JSON.parse(requestBody);
        console.log(responseBody);

    </script>

user 오브젝트를 JSON 으로 변환해 requestBody 변수에 담은 후, 다시 responseBody 에 전달한다. parse() 함수를 통해 JSON 문자열을 자바스크립트 오브젝트로 변환한다.

<script> let user = { id: 1, username: "ssar", password: "1234", hobby: ["축구", "농구"] }; // js object -> json String . 매우 중요. 제이슨은 문자열 let requestBody = JSON.stringify(user); console.log(requestBody); </script>

<script> let user = { id: 1, username: "ssar", password: "1234", hobby: ["축구", "농구"] }; // js object -> json String let requestBody = JSON.stringify(user); console.log(requestBody); // json String -> js object let responseBody = JSON.parse(requestBody); console.log(responseBody); </script>