[코드로 배우는] JSON과 객체 차이점 – 자바스크립트 개발자 필독 JSON vs JavaScript Object

[English Summary]

Learning by Code: The Difference Between JSON and JavaScript Objects
JSON and JavaScript objects may look similar, but they have critical differences.
This post explains the key distinctions with real code examples, showing how data is structured, transmitted, and manipulated differently in JSON and in native JavaScript objects.

Key topics:
• JSON vs JavaScript Object
• Differences in data structure and usage
• How to parse and stringify JSON
• Practical coding examples for developers

자바스크립트(Javascript)를 처음 접하거나 API 연동 작업을 하다 보면 JSON과 객체(Object)의 차이로 헷갈리는 경우가 많습니다. 이 둘은 비슷해 보여도 엄연히 다른 개념이며, 특히 실무에서는 아래 내용들을 혼동하면 큰 오류로 이어질 수 있습니다.

⸻

1. 형태는 비슷, 실체는 다름
• 객체 (Object): JavaScript 런타임 내에서 사용되는 자료형입니다.
• JSON (JavaScript Object Notation): 객체를 문자열 형태로 표현한 데이터 포맷입니다.

const obj = { name: "Sam", age: 30 }; // 객체
const json = '{"name": "Sam", "age": 30}'; // JSON

2. JSON은 문자열이다
• JSON은 문자열이므로, 직접 .name 등의 방식으로 접근할 수 없습니다.
• JSON.parse()를 사용하여 객체로 변환한 후에 접근해야 합니다.

const parsed = JSON.parse(json);
console.log(parsed.name); // Sam

3. 객체를 JSON으로 변환하기

API 전송이나 로컬 저장 등 데이터를 저장할 때는 객체를 JSON 문자열로 바꿔야 합니다.

const str = JSON.stringify(obj);

4. 실무에서 자주 겪는 실수
• JSON 데이터를 객체처럼 바로 접근하려고 해서 undefined 오류가 발생하는 경우
• stringify()를 사용하지 않고 서버에 데이터를 보내 API 파라미터 인식 실패

추가 팁 1: JSON과 객체 차이 요약 표
아래 표를 통해 두 개념의 차이를 한눈에 알아보세요.

추가 팁 2: 실제 API 호출 예시

실무에서는 API 호출 시, JSON 문자열로 변환한 데이터를 함께 보내야 합니다.

fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Sam' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

이 코드에서 JSON.stringify()를 사용하지 않으면 서버에서 body 내용을 제대로 인식하지 못해 오류가 발생할 수 있습니다.