JSON.stringify()와 JSON.parse()

노마드코더 자바스크립트 무료 강의 영상 중 바닐라 JS로 크롬 앱 만들기를 하던 중

localStorage에서 배열을 사용할 때 value값으로 무조건 string 데이터타입만 넣을 수 있다며

JSON.stringify()를 사용하여 타입변환 후 저장. JSON.parse()로 자바스크립트로 사용할 수 있는 배열로 다시 변환하는 기능을 설명하는데 개념이 중요하다고 하여 정리하게 되었다!

---

JSON이란?

-JavaScript Object Notation의 약자로, 브라우저와 서버사이에서 오고가는 데이터 형식

-이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포멧

-기존에 사용되던 XML보다 가독성이 좋음

JSON.stringify(value, replacer, space) : JavaScript 객체를 JSON 문자열로

#value(필수) : JSON 문자열로 변환할 값(배열, 객체, 숫자, 문자 등)

#replacer(선택) : 함수 또는 배열. 이 값이 null 이거나 제공되지 않으면 객체의 모든 속성들이 JSON문자열 결과에 포함된다.

-함수일 때 : 문자열화 프로세스의 작동을 변경하는 함수로 사용 가능

문자열화 될 key와 value, 2개의 매개변수를 받는다.

-배열일 때 : 배열의 값과 일치하는 값만 문자열화 된다.

 

#space(선택) : 가독성을 목적으로 JSON문자열 출력에 공백을 삽입하는데 사용되는데 , string이나 number객체가 될 수 있다. 이 밗이 null이거나, 제공되지 않으면 공백이 사용되지 않는다.

-string일 때 : 입력한 string이 공백으로 사용된다.

-숫자일 때 : 입력한 숫자만큼 공백이 생긴다.

 

#JSON.stringify()의 특성

-value의 데이터 타입이 number또는 boolean일 경우, 그 값 자체를 그대로 가져오고, 데이터 타입은 string(문자열)이 된다.

-value의 데이터 타입이 string일 경우 그 값 자체가 string이 되고 배열일 경우 그 배열 자체가 string이 된다.

-value가 배열인데, 배열안에 undefine, 함수, 또는 심볼(symbol)이 있을 경우, 이런 값들은 null로 변환된다.

-value가 객체일 경우 그 객체 자체가 string이 되고 객체의 속성(property)들은 꼭 순서대로 문자열화되지 않는다.

-value가 객체인데 객체 안에 undefined, 함수, 심볼(symbol)이 있을 경우, 이런 값들은 생략된다.

JSON.parse() : JSON문자열을 JavaScript 객체로 변환

#parse()메서드는 JSON문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환

ex) JSON문자열을 변수 str에 저장 후 JSON.parse()메서드에 str인자를 넘겨서 console에 호출

-JSON 문자열에서는 키(key)를 나타낼 때 반드시 쌍따옴표로 감싸줘야 하는 반면에, JavaScript 객체에서는 쌍따옴표를 꼭 사용할 필요 X)

-JSON.parse()로 JavaScript 객체로 변환된 데이터는 .나[ ]를 사용하여 각 속성에 접근할 수 있다.

 

 

외부에서 문자열의 형태로 주어진 데이터를 해당 언어에서 다루기 용이하도록 내장 데이터 타입으로 변환하는 과정을 CS(Computer Science)에서는 소위 **역직렬화(deserialization)**이라고 부른다. 대표적인 사례로 클라이언트에서 JSON 포멧으로 데이터를 보내면, 서버에서 우선 JavaScript 객체로 변환한 후에 데이터를 처리하게 되는 것을 들 수 있습니다.