자바스크립트 eval, JSON.parse 파싱

자바스크립트 eval, JSON.parse  파싱

자바스크립트의 json 파싱에 대해서 다뤄보려고 한다.

json을 파싱 하는 방법에는 JSON.parse를 사용하거나, eval 함수를 사용할 수 있다.

 

eval 함수 사용방법

<script type="text/javascript">
 
        // JSON 표기법
var jsonStr = "{no:1, name:'쿠키맨'}";
eval("var Obj = ("+ jsonStr +")" );

document.write(Obj.no + ', ');
document.write(Obj.name);
 
</script>

 

결과 : 쿠키맨

 

JSON.parse 함수 사용 방법

eval함수는 빠르기는 하지만 eval함수 안의 스트링을 그대로 실행시켜 주기 때문에 리턴값으로

자바스크립트 명령어가 오면 그대로 실행시키기 때문에 보안적으로 이슈가 많다.

 

<script type="text/javascript">
 
var jsonStr = '{"no":1, "name":"쿠키맨"}';

var obj = JSON.parse(jsonStr);

document.write(obj.no + ', ');
document.write(obj.name);
 

</script>

 

결과 : 쿠키맨

 

최신 브라우저는 javascript 엔진에서 JSON을 객체로 채택했다.

예전 구버전의 브라우저에서는 JSON 객체를 못 찾을 수 있다. 

브라우저 구형 버전에서도 JSON 객체 사용을 보장하기 위해서는 json2.js 가 필요하다.

json2.js 는 "더글라스 크록포드" 형이 JSON의 편리한 사용을 위한 JSON API라고 생각하면 된다.

 

json2.js 사용방법

- www.json.org 접속

- 하단 메뉴 중 JavaScript - json2.js 클릭

json2,. js 파일을 

<script type="text/javascript" src="json2.js"></script>  해줘야 한다.

 

JSON.stringify 함수 사용  ( json 객체 - > json String )

역으로 json 또는 배열의 객체를 String 값으로 바꿔서 사용해야 할 때가 있다.

그때는 JSON.stringfy 함수를 사용하면 된다.

 

 

var obj = {
  name: 'myObj'
};


JSON.stringify(obj);

 

결과 : {"name":"myObj"}

 

 

JSON 파싱에 대해서 알아보았고, eval과 JSON.parse 함수를 이용할 수 있다는 점을 알 수 있고,

eval의 경우는 특별한 경우가 아니면 사용하지 않기를 권장한다.

 

 

자바 스크립트 관련 다른 재밌는 글

 

자바스크립트 escape, encodeURI, encodeURIComponent 차이점

 

 

자바스크립트 브라우저 종류 버전 체크 ( navigator )

 

 

자바스크립트 호이스팅 Hoisting 이란?? ( 아주 쉽게 설명 )

 

 

자바스크립트 ES6 block scope