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과 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.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>
'FrontEnd > Javascript' 카테고리의 다른 글
| [자바스크립트] 세미콜론(;)을 꼭 안찍어도되는 ASI 알아보기 (0) | 2022.04.11 |
|---|---|
| [Javascript] Math 객체를 이용해서 랜덤 값 만들기(Math.random) (0) | 2022.03.14 |
| [정규식에러/크로스브라우징] 모바일(IOS) 크롬, 사파리 에서 페이지 안뜰 때 (PC 정상 작동) (0) | 2021.12.29 |
| [Javascript] 자바스크립트 표현식 비구조화할당(Destructuring assignment) 이해하기 (0) | 2021.09.12 |
| [JavaScript/Vue] 자바스크립트로 크롬 전체 화면 실행 및 종료하기 (0) | 2021.05.25 |