[JSON] JSON 이란? 개념과 사용 방법

JSON
(Java Script Object Notation)

데이터를 저장하고 전송하는 데 사용하는 경량 데이터 형식

자바스크립트 객체와 비슷한 형태로 1:1 매핑에 용이

 

+ 저장되거나 전송될 때 문자열(string) 형태로 변환

---

1. JSON 특징

- 텍스트 기반 데이터 포맷

- 자바스크립트 객체 표기법 따름

- 키-값 (key - value) 구조

- 중첩 가능

- 배열 지원

---

2. 작성 방법

{"데이터 이름", "값"}

JSON 의 작성 방법은 모든 객체에 문자열 표시가 붙으며 데이터 쌍은 , 으로 구분한다.

→ 중괄호는 객체, 대괄호는 배열을 의미한다. (객체 안에 배열 넣기 가능)

---

3. JSON과 호환되는 자바스크립트 타입

- string, number, object, array, boolean, null

---

4. JSON과 호환되지 않는 자바스크립트 타입

- function, date, undefined

 

✅ 변수 일부 데이터가 undefined 로 적용되어 있는 경우 에러 발생할 수 있기에 변수 선언 시 null로 초기화 할 것

---

5. JSON 사용 방법

 1) JSON.stringify()

 - 변수에 적어 놓은 객체 타입을 제이슨 형태로 바꾼다. ( 객체 → JSON )

위처럼 객체 타입을 지정하고 JSON.stringify(obj1)을 선언하여 console.log 를 통해 확인해보면 객체 타입이 JSON으로 변환되었음을 확인할 수 있다.

const obj2 = ["aaa", "bbb", "ccc", "ddd"];
const myJSON2 = JSON,stringify(obj2);

console.log(myJSON2); // ["aaa", "bbb", "ccc", "ddd"]
console.log(type of myJSON2) // string

const obj3 = {name : "ning", today: new Date(), city : "New York"};
const myJSON3 = JSON.stringify(obj3);

console.log(myJSON3); // {"name":"ning","today":"2025-03-22T09:18:35.135Z","city":"New York"}
console.log(typeof myJSON3); // string

같은 방법으로 배열, date() 등 모두 JSON으로 변환되는 것을 확인할 수 있다.

 

✅ date() 의 경우, 문자열로 자동 변환되어 출력

 

+) 데이터 필터링하는 방법

객체 타입에서 제이슨 타입으로 변환할 때 데이터를 필터링하는 방법이 있는데 바로 replace 함수를 사용하는 것이다.

위에 작성한 replace 함수는 객체의 각 속성을 순회하며 특정 조건에 만족하는 값을 제거 혹은 변환할 수 있다.

 

함수 호출없이 해당 값만 변환하고 싶은 경우 [] + "" 조합으로 작성하면 된다.

 

✅ 왜 undefinded를 썼는가?

- undefined 를 반환할 경우 아예 제거되지만 null 을 반환할 경우 "key" : null 로 반환되어 해당 값이 포함된다.

 

 2) JSON.parse()

 - 제이슨 타입을 객체 타입으로 변환시킨다. ( JSON → 객체 )

 

JSON의 경우 key 와 value 작성 시 "" 를 필수로 기입해야 한다.

+) 숫자 데이터 타입의 경우 "" 사용 x

const obj2 = JSON.parse("true");
console.log(obj2);  // true

const obj3 = JSON.parse(`"abc"`);
console.log(obj3); // abc

const obj4 = JSON.parse('[1, true, "abc"]');
console.log(obj4); // [1, true, "abc"]
console.log(typeof obj4); // object

const obj5 = JSON.parse('null');
console.log(obj5); // null
console.log(typeof obj5); // object

const obj6 = `{"name" : "John", "age" : "28", "city" : "New York"}`;
console.log(typeof obj6); // string

const obj6_1 = JSON.parse(obj6);
console.log(typeof obj6_1); // object
console.log(obj6_1.name); // John

여기서 주의할 점은 문자열을 JSON에서 객체로 변환할 경우, ""를 한 번 더 감싸주어야 한다. (obj3 참고)

추가로 배열은 object에 해당하며 유사객체 배열의 경우, "" 안의 문자열 모두 "" 를 기입해야 에러가 발생하지 않는다.

 

→ 객체나 배열의 경우, JSON.parse() 를 쓰면 JSON의 객체는 자바스크립트에서의 obect 로 변환됨을 인지하자!