(JavaScript) JSON -JSON.stringify(), JSON.parse()

neity16·2020년 10월 30일
0

JavaScript

목록 보기
8/9
post-thumbnail

(참조글 : https://steemit.com/kr-dev/@cheonmr/json-stringify )

JSON 이란? 😯

[ 개념 ]

JavaScript Object Notation의 약어로
데이터를 저장하거나 전송할 때 많이 사용되는 경량 Data 교환 형식

  • key-value 형식의 쌍을 갖는다
  • 최근에는 XML을 대체하여 데이터 전송에 많이 사용
  • null / number / string / array / object / boolean 형 사용 가능
  • 문자열 or 프로퍼티이름 작성큰따옴표 " " 만 사용

[ 생성 & 사용 ]

/* 생성 */
const result = { 
   "name" : "neity16", // "name"이 key, "neity16"이 value
   "email" : "neity16@daum.net",
   "age" : 25
}

/* 사용 */
console.log(result.name); // neity16
console.log(result.age); // 25

[ 요소 추가 & 삭제 ]

/* 객체.key = value로 추가 
    phone 요소 추가! */
result.phone = '010-1234-5678';
console.log(result); /* { 
                         "name" : "neity16",
                         "email" : "neity16@daum.net",
                         "age" : 25,
                         "phone" : "010-1234-5678"} */

/* delete 객제.key로 삭제 
    name 요소 삭제! */
delete result.name;
console.log(result); /* { 
                         "email" : "neity16@daum.net",
                         "age" : 25,
                         "phone" : "010-1234-5678"} */

JSON.stringify()

[ 개념 ]

Javascript값 —> JSON 문자열로 변환


[ 원형 & 사용 ]

JSON.stringify(value, replacer, space)

  • value (필수) : JSON 문자열로 변환할 값 // 배열, 객체, 숫자, 문자 등등
var object = {name: 'kjw', nickname: '정욱', age: 25};
var useJson = JSON.stringify(object);

console.log(useJson); // {"name":"kjw","nickname":"정욱","age":25}
  • replacer(선택) : 필터링을 해주는 역할 // 함수, 배열이 온다
/* 함수 일 때 */
function replacer(key, value){
 if(typeof value === 'string'){
  return undefined;
 }
return value;
}

var object = {name: 'kjw', nickname: '정욱', age: 25};
var useJson = JSON.stringify(object, replacer);

 // replacer에서 typeof가 string인 요소들은 없어진다.
console.log(useJson) // {"age:25} 

--------------------------------------------------------------

/* 배열 일 때 */
var object = {name: 'kjw', nickname: '정욱', age: 25};
var useJson = JSON.stringify(object, ['name', 'age']);

 // replacer에 있는 배열에 해당하는 요소만 선택된다.
console.log(useJson); // {"name":"kjw","age":25} 
  • space(선택) : 공백을 삽입하는 역할(가독성 목적) // string, number 등
var object = {name: 'kjw', nickname: '정욱', age: 25};
var useJson = JSON.stringify(object, null, 5);


console.log(useJson);
/*
{
     "name": "kjw", // 각 요소 앞에 공백 5개가 추가되어 가독성 증가!
     "age": 25
} 
*/

JSON.parse()

[ 개념 ]

문자열 —> Javascript 객체로 변환
(JSON.stringify() 와 반대)


[ 원형 & 사용 ]

JSON.parse(text[, reviver])

  • text : JSON으로 변환할 문자열
console.log(useJson);
/*
{
     "name": "kjw", // 각 요소 앞에 공백 5개가 추가되어 가독성 증가!
     "age": 25
} 
*/

var goJson = JSON.parse(useJson);
console.log(goJson); // {name:"kjw", age:25} 

* reviver : 함수라면, 반환 결과를 반환하기 전에 이 인수를 전달해 변형

profile
Developer & PhotoGrapher

0개의 댓글