[새싹프론트엔드] JSON이 뭐예요??

JSON?? 그게 뭔데??

JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용한다. 이름에 JavaScript가 들어가긴 하지만 JavaScript 아닌 곳에서도 널리 사용되고 있다.

JSON구조

json을 사용하기 위해서는 형태를 변환하는 과정이 필요한데 이 때 사용되는 것이 stringify()와 parse() 이다.

JSON.stringify()

객체또는 배열 구조로 되어있는 JSON을 문자열로 변환할때 사용한다. 객체->문자열

const obj = {
name: "Soo",
age: 20,
alive: true,
hobby: ["traveling", "piano"]
};
const json = JSON.stringify(obj);
console.log(json);

결과

{"name":"Soo","age":20,"alive":true,"hobby":["traveling","piano"]}

배열->문자열

const person = [
{ id: 1, name: "Soo", age: 20 },
{ id: 2, name: "Kim", age: 30 },
{ id: 3, name: "Lee", age: 40 }
];
const json = JSON.stringify(person);
console.log(json);

결과

[{"id":1,"name":"Soo","age":20},{"id":2,"name":"Kim","age":30},
{"id":3,"name":"Lee","age":40}]

JSON.parse()

위에서 언급한 JSON객체나 배열을 문자열로 변환하는 기능과 정 반대의 기능이다. 문자열을 객체나 배열로 변환시켜주는 기능인데 이 때는 parse()가 사용된다.

문자열->객체

const obj = {
name: "Soo",
age: 20,
alive: true,
hobby: ["traveling", "piano"]
};

const json = JSON.stringify(obj);

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

결과

{ name: 'Soo', age: 20, alive: true, hobby: ['traveling', 'piano'] }```

문자열-> 배열

const person = [
{ id: 1, name: "Soo", age: 20 },
{ id: 2, name: "Kim", age: 30 },
{ id: 3, name: "Lee", age: 40 }
];

const json = JSON.stringify(person);

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

결과

[ { id: 1, name: 'Soo', age: 20 },
{ id: 2, name: 'Kim', age: 30 },
{ id: 3, name: 'Lee', age: 40 } ]