JSON (Javascript), eval(), JSON.parse

Goal

 - JSON의 정의와 사용이유에 대해 알아본다.

 - JSON 데이터를 파싱하는 eval()과 JSON.parse에 대해 알아본다.

 

1. JSON

 - 자바스크립트의 데이터를 쉽게 생성하기위해 만들어진 표기법

 

 자바스크립트의 모든 데이터는 Wrapper클래스이기 때문에 데이터를 생성할 때 new를 통해 초기화 작업을 해야한다.

데이터를 생성할 때 마다 초기화 작업을 하면 시간이 오래걸리기 때문에 객체를 쉽게 사용할 수 있도록 자바스크립트는 표기법을 제공하는데 그것을 JSON(JavaScript Object Notation)이라고 한다.

var n = new Boolean(true); -> var n = true;
var n = new Number(3); -> var n = 3;
var s = new String("hello"); -> var s = "hello" (or 'hello')
var ar = new Array(); -> var ar = [];
var ob = new Object(); -> var ob = {};

var exam = { kor: 30, eng: 70, math: 80 };
// JSON으로 객체에 데이터를 생성할 때는 참조변수를 " "로 감싸야 하지만 JS에서 알아서 생략하고 인식해준다.
// 초기화 -> JSON 표기
//JSON을 통해 표기가 간편해졌지만, 데이터를 변수에 대입하는 것이 아닌 내부적으로 참조변수를 통해
//데이터를 참조하는것임.

 

 즉, 자바스크립트의 자료형식이 모두 객체이다 보니 그걸 쉽게 사용하게 만들기 위한 표기법이 JSON이다.

JSON은 자바스크립트 뿐만아니라 데이터를 간편히 표현할 수 있기 때문에 다양한 플랫폼에서 데이터를 표현할 때 범용적으로 사용되고 있다. ex) 공공데이터 등은 JSON형태로 데이터를 포장하고 있다.

 

 JSON형식인 외부의 데이터를 받아올 때는 문자열로 받아오기 때문에 데이터형식을 바꾸어 주여야 한다. 이 작업을 파싱이라고 하는데, 파싱기법은 대표적으로 eval()과 parse를 이용한 방법이 있다.

 

2. eval()

 - eval()은 괄호 안에 문자열이 객체의 형태를 하고 있으면 문자열 제거하여(파싱) 객체로 사용할 수 있게 해준다.

 - 객체의 참조변수는 ""로 감싸져 있지 않아도 된다.

 

1) eval을 이용하여 문자열로 감싸진 객체 사용

'var x = 30;'; // 형식은 변수지만 ' '안에 있기 때문에 문자열

console.log(x); // 오류발생

eval('var x = 30;'); //eval()을 이용한 파싱으로 문자열을 벗겨줌

console.log(x); // 30출력

2) eval을 이용하여 문자열로 감싸진 배열의 데이터 사용

var data = "[
    {"co":0.6, "so2":0.006,"03":0.009},
    {"co":0.6, "so2":0.006,"03":0.009},
    {"co":0.6, "so2":0.006,"03":0.009}
]";

eval("var ar = " + data + ";");

console.log(ar[0].co);

3. JSON.parse

 - JSON파서를 이용하여 파싱할 때는 각 참조변수를 ""로 확실히 감싸주어야 한다.

 - JSON.stringify()를 이용하면 다시 스트링화하여 JSON데이터를 전송할 수 있다.

<script>
    var data = JSON.parse('{"id":1, "title":"aaa"}'); // parse를 통한 데이터 파싱
    console.log(data.title);
    var data2 = {id:2, title:"hhh"};
    
    var json = JSON.stringify(data2); //파싱한데이터를 다시 스트링화(다른곳에 전달하기 위해)
    alert(json);

</script>