JSON과 데이터 형태

객체를 글자로, 글자를 객체로

객체는 프로그램 안에서만 존재합니다. 서버로 보내거나 파일로 남기려면 글자로 바꿔야 합니다. 그 약속된 형식이 JSON 입니다.

이름은 JavaScript Object Notation 이지만 지금은 거의 모든 언어가 사용합니다. 서버에서 받아 오는 데이터도 대부분 JSON 입니다(5부).

바꾸고 되돌리기

const person = { name: "홍길동", age: 27 };

const text = JSON.stringify(person);
console.log(text);
console.log(typeof text);

const back = JSON.parse(text);
console.log(back.name);
console.log(typeof back);

stringify 는 객체를 글자로, parse 는 글자를 객체로 되돌립니다. 글자가 된 뒤에는 .name 으로 꺼낼 수 없습니다 — 그냥 글자입니다.

JSON 의 규칙

객체를 적는 방식과 비슷하지만 더 엄격합니다.

• 속성 이름에도 큰따옴표가 붙습니다.
• 작은따옴표를 사용할 수 없습니다.
• 마지막 쉼표를 남길 수 없습니다.
• 주석을 넣을 수 없습니다.

console.log(JSON.parse('{"name": "홍길동"}'));
console.log(JSON.parse("{'name': '홍길동'}"));

잘못된 글자를 parse 하면 오류가 납니다. 밖에서 받아 온 데이터를 다룰 때는 try...catch 로 감쌉니다(5.4).

보기 좋게 내보내기

const person = { name: "홍길동", age: 27 };

console.log(JSON.stringify(person, null, 2));

세 번째 인자가 들여쓰기 칸 수입니다. 사람이 읽을 때만 사용하고, 서버로 보낼 때는 붙이지 않습니다.

담기지 않는 것

const data = {
	name: "홍길동",
	greet: () => "안녕",
	when: undefined,
	nothing: null
};

console.log(JSON.stringify(data));

함수와 undefined 는 사라집니다. null 은 남습니다. 데이터가 왜 빠졌는지 모를 때 이것을 의심해 보세요.

서버에서 받는 모양

실제로 받아 오는 데이터는 객체가 담긴 배열입니다. 5부에서 이런 글자를 받아 parse 한 뒤 3부에서 배운 방법으로 다룹니다.

const received = '[{"name":"연필","price":1000},{"name":"공책","price":2000}]';

const products = JSON.parse(received);

console.log(products.length);
console.log(products[0].name);
console.log(products.reduce((sum, p) => sum + p.price, 0));

처음에 자주 걸리는 것

SyntaxError: Expected property name or '}' in JSON at position 1

직접 해보기

파트 3 미니 실습 — 상품 필터·정렬기

값을 바꿔 가며 확인해 보세요. 여기까지 하면 파트 3 이 끝납니다. 다음 파트부터는 화면을 다룹니다.

이 단원의 정리