안녕하세요. 제임스 입니다. 


이전 포스팅에서 JSON.stringify() 에 대해 알아 봤는데요. 이번에는 반대의 역할을 하는 JSON 의 parse() 함수에 대해 알아 보겠습니다. 


JSON.parse() 함수는 JSON 문자열을 javascript 객체로 변환합니다. 


Syntax

 JSON.parse( text[, reviver ] )



Parameters


text

javascript 객체로 변환하고자 하는 JSON 문자열 


reviver (Optional - 선택적)

만약 함수라면, 파싱을 통해 원래 생성 된 값이 반환되기 전에 어떻게 변환 될지를 지정




Examples


1
console.log(JSON.parse('{}'));
cs


실행 결과는 아래와 같습니다. 

{} 



1
2
console.log(JSON.parse('true'));
console.log(JSON.parse('"true"'));
cs


실행 결과는 아래와 같습니다. 

true

true


보기에는 동일해 보이지만 데이타 형이 다릅니다. 

첫번째 값은 boolean 값인 true

두번째 값은 String 값인 "true" 입니다. 


1
2
console.log(JSON.parse('[1, 5, "false"]'));
console.log(JSON.parse('[1, 5, false]'));
cs


실행 결과는 아래와 같습니다. 

[1, 5, "false"]

[1, 5, false]


첫번째 값은 배열에 문자열 false 가 

두번째 값은 배열에 boolean 값 false 가 리턴 되었습니다. 



1
2
console.log(JSON.parse('"string test"'));
console.log(JSON.parse('string test'));
cs


실행 결과는 아래와 같습니다. 

string test

Uncaught SyntaxError: Unexpected token s in JSON at position 0


첫번째는 문자열 string test 를 리턴 했습니다. 

하지만 두번째는 오류가 발생 했습니다. position 0 에 위치한 값이 string test 의 첫번째 문자 s 입니다. 

뭐가 문제일까요? 


문자열을 나타내고자 한다면 " " (double quotation marks) 로 감싸야 합니다. 그런데 " " 없이 string test 라는 문장을 입력 했기 때문에 문자열로 인식하지 못해 오류가 발생 한 것입니다. 

이런 실수 하지 않도록 조심해야 겠죠? ^^




 도움이 되셨다면 로그인이 필요 없는 

▼ 하트 클릭 한번 부탁 드립니다 

감사합니다 :D












블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,



안녕하세요. 제임스 입니다. 


웹서버와 클라이언트 사이에서 통신을 하기 위해서는 문자열을 이용합니다. 클라이언트에서 사용하는 javascript 객체를 웹서버로 보내기 위해 많이 사용하는 것이 JSON 입니다. 

(앞선 포스팅 내용을 간단히 정리 했습니다)


JSON 의 stringify() 라는 함수를 이용하여 javascript 객체를 JSON 문자열로 변환할 수 있습니다. 


Syntax

 JSON.stringify ( value[, replacer[, space]] ) 


stringify 는 사전적 의미로는 아래와 같습니다. 

  • (computing) To convert to a textual representation.

"(컴퓨터 언어로) 텍스트 표현으로 변환한다"는 의미가 됩니다. 

즉, 여기서는 입력받은 값을 JSON 문자열로 변환한다는 의미가 됩니다. (한글 번역은 없습니다)



Parameters


value

JSON string (문자열)로 변환하고자 하는 javasript 객체


replacer (Optional - 선택적)

문자열화 프로세스의 동작을 변경하는 함수 또는 JSON 문자열에 포함될 객체의 속성을 선택 / 필터링하기 위한 화이트리스트 역할을 하는 String 및 Number 객체의 배열

이 값이 null 이거나 제공되지 않을 경우 객체의 모든 속성이 결과 JSON 문자열에 포함


space (Optional - 선택적)

가독성을 위해 출력 JSON 문자열에 공백을 삽입하는데 사용되는 String 또는 Number 객체

    • Number - 공백분자로 사용할 공백 문자 수를 의미함. 최대 10, 10 이상의 값일 경우 10으로 적용
    • String - 문자열이 공백으로 사용됨

space 값이 null 이거나 제공되지 않을 경우 공백이 사용되지 않음



위 내용을 요약하자면...


JSON string 으로 변환하고자 하는 value 값은 필수 입력 값이지만 객체 속성을 선택 / 필터링 하기 위한 replcacer 와 공백문자열을 지정하는 space 는 선택적으로 입력 또는 입력 하지 않아도 됩니다. 



Description


■ Boolean, Number 및 String 객체들이 변환될때는 각각의 primitive type 에 맞는 값으로 변환됩니다. 


1
console.log(JSON.stringify({x: 1004, y: 7942}));
cs


x 및 y 값을 Number 로 입력 했습니다. 

JSON 문자열로 변환된 값은 아래와 같습니다. 


"{"x":1004,"y":7942}"



1
console.log(JSON.stringify({x: 'true', y: 'false'}));
cs


x 및 y 값을 String 형으로 입력 했습니다. 

JSON 문자열로 변환된 값은 아래와 같습니다. 


"{"x":"true","y":"false"}"



1
console.log(JSON.stringify({x: true, y: false}));
cs


x 및 y 값을 boolean 형으로 입력 했습니다. 

JSON 문자열로 변환된 값은 아래와 같습니다. 


"{"x":true,"y":false}"


바로 앞서 문자열 true / false 와 달리 double quotation marks ( " " ) 가 달려 있지 않습니다.



■ 만약 변환 중 undefined, 함수 또는 Symbol 이 객체에서 발견되면 undefined 가 리턴되며 array 에서 발견되면 null 을 리턴 합니다. 


1
2
3
console.log(JSON.stringify(undefined));
console.log(JSON.stringify(function(){}));
console.log(JSON.stringify(Symbol('')));
cs


위 코드의 결과 값은 아래와 같습니다. 


undefined

undefined

undefined


객체에서 undefined, 함수 또는 Symbol 이 들어왔기 대문에 undefined 로 리턴 되었습니다. 



1
console.log(JSON.stringify([undefined, function(){}, Symbol('')] ));
cs


위 코드는 객체가 아닌 배열 (array) 에 undefined, 함수 그리고 Symbol 이 들어 왔습니다. 

결과는 아래와 같습니다. 


[null,null,null]


배열에서 위 값들이 들어 올 경우 null 로 리턴 됩니다. 



■ Number Infinity 와 NaN 그리고 객체 null 등은 모두 null 로 리턴됩니다. 


1
2
3
console.log(JSON.stringify(NaN));
console.log(JSON.stringify(null));
console.log(JSON.stringify(Infinity));
cs


위 코드 실행 결과는 아래와 같습니다. 


null

null

null



1
console.log(JSON.stringify([NaN, null, Infinity]));
cs


위 코드 실행 결과는 아래와 같습니다. 


[null,null,null]



 도움이 되셨다면 로그인이 필요 없는 

▼ 하트 클릭 한번 부탁 드립니다 

감사합니다 :D




블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,



안녕하세요. 제임스 입니다. 


이번에 포스팅할 내용은 JSON 입니다. 참 많이 들어 보고 써보기도 했었지만 막상 사용하고자 하면 기억이 안나고 그렇죠? JSON 에 대해 알기 쉽게 정리 해보겠습니다. 



■ JSON 이란? 


JSON은 JavaScript Object Notation 의 약자로 자바스크립트 객체의 형태를 가지는 문자열을 의미 합니다. 

JSON은 데이터를 저장하거나 주고 받기 위한 구문입니다. 

JSON은 javascript 구문을 사용하고 있으나 JSON 의 포맷은 text 형태를 취하고 있습니다. Text 는 어떤 프로그래밍 언어에서건 데이터 포맷으로 사용되기에 언어 독립적 입니다. 



Client (웹 브라우저) 와 Server 사이에서 데이터를 주고 받을 때, 이 데이터는 text 형태입니다. 

JSON 은 text 형이므로 최소한의 Client 와 Server 사이에서 통신을 위한 데이터 형으로는 적합합니다. 


어떠한 Javascript 객체라도 JSON 으로 변환 가능하며 이를 Sever 로 전송 가능합니다. 

반대로 Sever 로 부터 받은 어떠한 JSON 값도 Javascript 객체로 변환 가능합니다. 



■ Sending Data 


Javascript 객체에 저장된 데이터가 있다면 javascript 객체를 JSON 형으로 변환하여 sever 에 전송할 수 있습니다. 


1
2
3
var jsObj = { "name":"James""occupation":"Developer""city":"Seoul" };
var myJSON = JSON.stringify(jsObj);
window.location = "json_test.jsp?jsonParam=" + myJSON;
cs


jsObj 라는 javascript 객체를 생성하여 JSON 의 stringify() 함수를 이용하여 json_test.jsp 에 jsonParam 이라는 key 값으로 맵핑하여 변환한 JSON 값을 전달하는 코드 입니다. 


2018/05/14 - [javascript] - [ javascript 코딩 ] JSON.stringify() 사용방법 - JSON 가독성 높이기




■ Receiving Data


전송과 달리 JSON 형이 데이터를 받았을 경우 JSON 을 javascript 객체로 변환 할 수 있습니다. 


1
2
3
var jsObj = jsonParam;
var myObj = JSON.parse(jsObj);
console.log('myObj.name = '+myObj.name);
cs


Sending Data 샘플 코드에서 jsonParam 이라는 key 값으로 전달 한 값을 받는 형식으로 작성 했습니다. 

jsObj 는 JSON format 이므로 JSON 의 parse() 함수를 이용하여 javascript 객체로 변환 해줍니다. 


2018/05/11 - [javascript] - [ Javascript 코딩 ] JSON.parse() - JSON 문자열을 자바스크립트 객체로 변환하기



위 코드를 실행 하면 결과 값은 아래와 같습니다. 


myObj.name = James



만약 위 코드를 아래와 같이 작성 한다면 어떻게 될까요? 


1
2
3
var jsObj = { "name":"James""age":30"city":"Seoul" };
var myObj = JSON.parse(jsObj);
console.log('myObj.name = '+myObj.name);
cs


jsObj 를 JSON 형을 취하고 있는 자바 객체로 제공할 경우 오류가 발생 합니다. 


Uncaught SyntaxError: Unexpected token o in JSON at position 1


이는 jsObj 가 이미 javascript 객체인데 이를 JSON 의 parse 함수를 이용하여 javascript 객체로 변환하려 시도 했기 때문에 발생하는 오류 입니다. 


이런 실수는 안하는 게 좋겠죠? 




JSON 을 설명하기 위해 stringify() 함수와 parse() 함수가 샘플 코드에 등장 했는데요. 

이 함수들은 별도 포스팅으로 정리 하겠습니다. 




 도움이 되셨다면 로그인이 필요 없는 

▼ 하트 클릭 한번 부탁 드립니다 

감사합니다 :D



블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,