FrontEnd/Javascript

[javaScript]JSON 과 javascript의 Object 차이 바로 알기

김평범님 2022. 3. 7. 22:07
반응형

javascript JSON과 Object 차이점

javascript를 작성하다 보면 JSON과 javascript에서 Object가 매우 흡사한 형태를 가지고 있다는 사실을 알 수 있다.

형태가 비슷하기 때문에 똑같아고 생각하는 분들도 있을 테지만

엄연하게 두개는 다르다. 

 

그럼 오늘은 JSON과 javascript의 Object의 차이를 알아보겠다.

 

 

📄JSON이란?

JSON은 Javascript Object Notation의 약자로 서버와 데이터를 교환할 때 사용하는 Data 형태이다.

JSON은 단순히 데이터를 표시하는 포맷일 뿐이고 프로그래밍 문법은 아니다.

 

JSON은 서버와 클라이언트 데이터를 주고받을 때 현재 많이 사용되는 

데이터 표시방식이며, 자바스크립트의 Object와 굉장히 비슷하게 작성이 되지만

이는 단순한 텍스트일 뿐이다.

 

JSON형태의 예시

let jsonExample = `{"student": [{"id":"1", "name":"홍길동"}, {"id":"2", "name":"김철수"}]}`

 

 

👩‍💻Javascript Objcet란?

반면, Javascirpt에서 사용하는 Object는 자바스크립트 내부 문법에서 사용하는 데이터 유형이다.

key/value로 이루어진 데이터 형식으로 복잡한 데이터를 저장하는데 적합하다.

 

javascript Object(객체) 예시

let objectExample = {student: [{id:1, name:'홍길동'}, {id:2, name:'김철수'}]}

JSON은 텍스트 형태이기 때문에 모든 키값을 따옴표로 묶어서 표시하는 반면

자바스크립트에서는 따옴표가 없이 사용이 가능합니다.

 

🤔둘이 혼동되는 이유는?

보통 두 개가 뭐가 다르지?라는 생각이 드는 이유는 위의 처럼 형태가 매우 비슷하기 때문이다.

둘 다 모두 key/value가 매칭 되는 형태로 구성되어있고

내부 value 안에 객체, 배열 등 자바스크립트에서 많이 보던 형식의 데이터를 넣어서 표시된다.

 

📑둘의 차이점은?

하지만, 둘은 근본적으로 다르다는 점을 알아야 한다.

JSON과 Javascirpt Object 모양이 비슷하지만 다른 점들이 있다.

  • JSON은 type이 String인 반면 Javascript Object는 Object 타입으로 데이터 타입이 다르다.
  • JSON에서는 모든 property를 따옴표로 묶어 사용하지만 Javascirpt Object는 따옴표가 없이 사용 가능하다.
  • JSON에서는 함수를 할당할 수 없다.
<html>
<script>

    let jsonExample = `{"student": [{"id":"1", "name":"홍길동"}, {"id":"2", "name":"김철수"}]}`;
    let objectExample = {student: [{id:1, name:'홍길동'}, {id:2, name:'김철수'}]};

    console.log(typeof(jsonExample));
    console.log(jsonExample);
    console.log("----------------");
    console.log(typeof objectExample);
    console.log(objectExample);


</script>
</html>

JSON테스트코드실행화면

 

🚩JSON과 Object 변환하기

서버와 데이터를 주고받다 보면, 

JSON으로 받은걸 Javascript에서 쓰기 위해 Object형태로 바꾸거나,

자바스크립트 Object를 JSON으로 바꿔야 되는 경우가 있을 수 있다.

Javascript에서는 JSON 변환 메서드를 제공한다.

 

 

JSON.parse()

문자열로 구성된 JSON을 javascript Object 형태로 변경해준다.

<html>
<script>

    let jsonExample = `{"student": [{"id":"1", "name":"홍길동"}, {"id":"2", "name":"김철수"}]}`;

    console.log(typeof(jsonExample));
    let objectExample = JSON.parse(jsonExample);
    console.log(objectExample);


</script>
</html>

json parse 실행화면

 

 

 

JSON.stringify()

javascript Object를 JSON형태의 문자열로 변경해준다.

<html>
<script>

    let objectExample = {student: [{id:1, name:'홍길동'}, {id:2, name:'김철수'}]};

    console.log(typeof(objectExample));
    let jsonExample = JSON.stringify(objectExample);
    console.log(jsonExample);



</script>
</html>

json stringify 실행화면

반응형