👨‍💻 사건

원티드 온보딩 챌린지 과제에서 로그인 기능 구현 과제를 수행하면서 토큰 부분을 설정할때, stringify 함수를 통하여 JSON 형식의 문자열로 반환하는 과정이 있었다. 그 과정에서 JSON 함수로 자주 사용하는 stringify 함수와 parse 함수에 대해 명확히 집고 넘어가고 싶었다.

✅ 해결

• JSON.stringify

  • 자바스크립트 객체를 JSON 파일의 형태의 문자열로 반환하는 함수이다.

    JSON.stringify(value, replacer, space)
    // value - 변환할 자바스크립트 객체
    // replacer - 선택 옵션으로, 함수 혹은 배열의 값을 한번 거쳐서 필요한 내용만을 반환하고자 할때
    // space - 문자열로 반환시, 공백을 사용하고 싶을때 사용한다.

  • value

    const obj = {name: "John", age: 30, city: "New York"};
    const jsonString = JSON.stringify(obj);
    
    console.log(jsonString); // {"name":"John","age":30,"city":"New York"}

  • replacer

    • 배열

      const obj = {name: "John", age: 30, city: "New York"};
      const jsonString = JSON.stringify(obj,["name"]);
      // 배열로 설정된 값만 추출
      console.log(jsonString);// {"name":"John"}

    • 함수

      function replacer(key, value) {
      	if (typeof value === "string") {
      		return undefined;
      	}
      	return value;
      }
      const obj = {name: "John", age: 30, city: "New York"};
      const jsonString = JSON.stringify(obj,replacer);
      // replacer 함수를 한번 거쳐서 출력
      console.log(jsonString);// {"age":30}

  • space

    const obj = {name: "John", age: 30, city: "New York"};
    const jsonString = JSON.stringify(obj,null,5);
    
    console.log(jsonString);
    //결과값 
    //{
    //     "name": "John",
    //     "age": 30,
    //     "city": "New York"
    //}

• JSON.parse
  • 자바스크립트 객체로 변환할 수 있는 JSON 문자열을 파싱하여 자바스크립트 객체로 변환합니다.

    JSON.parse(text, reviver)
    // text - 파싱할 문자열
    // reviver - 설정된 매개변수 함수는 파싱할 JSON 문자열의 각 키/값 쌍을 처리하는 방법을 정의합니다.
    //           이 함수는 파싱 결과 객체의 각 속성값을 대체하거나 필터링하는 데 사용됩니다.

    • 예시

      const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
      const obj = JSON.parse(jsonString);
      
      console.log(obj.name); // "John"
      console.log(obj.age); // 30
      console.log(obj.city); // "New York"