JavaScript JSON (parse, stringify)

Javascriptexamples

JSON은 JavaScript Object Notation으로, JavaScript Ojbect를 문자열로 표현한 것입니다. JSON은 Server와 Client 간에 데이터를 전달할 때 사용됩니다. JSON은 JavaScript에서만 사용하려고 만들었지만, 요즘에는 다른 언어, 시스템에서도 JSON을 사용하여 데이터를 주고 받습니다. 따라서, 플랫폼 또는 언어에 독립적으로 데이터를 전달하는데 사용되고 있습니다.

이 글에서는 JavaScript의 Object를 JSON 형식의 문자열로 변환하는 방법과, JSON 문자열을 JavaScript의 Object로 변환하는 방법을 소개합니다.

1. JSON.parse() : JSON 문자열을 Object로 변환

아래 문자열은 JSON 형식의 문자열입니다. name과 age라는 데이터를 attribute-value 쌍으로 저장하고 있습니다. JSON에서 { }는 Object를 의미하며, 안에 데이터를 추가할 수 있습니다.

{
  "name": "John Doe",
  "age": 30
}

JSON.parse()는 인자로 전달된 JSON 문자열을 파싱하여 JavaScript의 Object로 변환하는 함수입니다.

아래 예제에서는 문자열을 파싱하여 Object로 변환하였고, object에서 변수를 접근하여 데이터를 출력하고 있습니다. JSON 문자열에서 attribute는 Object의 변수 이름이 됩니다.

const obj = JSON.parse('{"name":"John Doe","age":30}');
console.log(obj);
console.log(obj.name);
console.log(obj.age);

Output:

{ name: 'John Doe', age: 30 }
John Doe
30

2. JSON.stringify() : Object를 JSON으로 변환

JSON.stringify()는 Object의 데이터를 JSON 형식의 문자열로 변환하여 리턴합니다.

아래와 같이 객체를 JSON으로 변환할 수 있습니다.

const obj = {
  name: "John Doe",
  age: 30
}

console.log("obj: " + JSON.stringify(obj));

Output:

obj: {"name":"John Doe","age":30}

3. 배열이 포함된 JSON 예제

JSON은 key-value 형식의 데이터 뿐만 아니라 배열도 정의할 수 있습니다. 배열은 [ ]로 표현하며 안에 데이터를 입력합니다.

아래와 같이 배열이 포함된 JSON이 있습니다.

{
    "name": "John",
    "age": 22,
    "hobby": {
	     "reading": true,
	     "gaming": false,
	     "sport": "football"
    },
    "class": ["JavaScript", "HTML", "CSS"]
}

위 JSON 문자열을 JSON.parse()로 Object로 변환하고, 데이터를 접근하여 읽을 수 있습니다. 배열의 경우 class[index] 처럼 배열처럼 접근할 수 있습니다.

const str = '{ "name": "John", "age": 22, "hobby": { "reading" : true, "gaming" : false, "sport" : "football" }, "class" : ["JavaScript", "HTML", "CSS"] }';

const obj = JSON.parse(str);

console.log(obj);
console.log(obj.name);
console.log(obj.age);
console.log(obj.hobby);
console.log(obj.class);
console.log(obj.class[0]);
console.log(obj.class[1]);
console.log(obj.class[2]);

Output:

{
  name: 'John',
  age: 22,
  hobby: { reading: true, gaming: false, sport: 'football' },
  class: [ 'JavaScript', 'HTML', 'CSS' ]
}
John
22
{ reading: true, gaming: false, sport: 'football' }
[ 'JavaScript', 'HTML', 'CSS' ]
JavaScript
HTML
CSS
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha