Javascript 및 Express.js에서 클래스 인스턴스를 문자열화하는 방법

Javscript에서 객체 지향 접근 방식을 시도할 때 다음 문제에 직면하게 될 것입니다. 일반 객체에 대해 경이롭게 작동하는 기본JSON.stringify() 메서드는 기본적으로 클래스 인스턴스에 쓸모가 없습니다.

예를 들어:

const plainObject = {
  hello: 'world',
  something: 'else',
  nested: {item: {number:10}}
};
JSON.stringify(plainObject);
// Yields the perfect JSON string:
// '{"hello":"world","something":"else","nested":{"item":{"number":10}}}'

class MyFancyClass{
  #something;
  constructor(){
    this.hello = 'world';
    this.#something = 'else';
  }
  get item(){
    return {number:10};
  }
  get nested(){
    return {item: this.item}
  }
}
const instanceOfMyFancyClass = new MyFancyClass();
JSON.stringify(instanceOfMyFancyClass);
// Yields:
// '{"hello":"world"}'

(그 #something 구문은 개인 속성을 식별하는 최신 JavaScript의 방법이므로 JSON 문자열에 표시되지 않습니다.)

.toJSON() 사용

객체에서 JavaScript의 내장JSON.stringify() 함수를 호출하면 해당 객체에서 toJSON() 함수를 찾고 그러한 함수가 있는 경우 해당 함수의 반환 값 결과를 문자열화합니다.

이것은 클래스에 toJSON() 메서드를 추가하고 문자열화를 위한 일반 객체를 출력할 수 있기 때문에 매우 편리합니다.

class MyStringifiableClass {
  #something;
  constructor(){
    this.hello = 'world';
    this.#something = 'else';
  }
  get item(){
    return {number:10};
  }
  get nested(){
    return {item: this.item}
  }
  toJSON(){
    return {
      hello: this.hello,
      something: this.#something,
      nested: this.nested
    }
  }
}

const stringifiableInstance = new MyStringifiableClass();
JSON.stringify(stringifiableInstance);
// '{"hello":"world","something":"else","nested":{"item":{"number":10}}}'

.toObject() 및 JSON.stringify 교체 사용

그러나 문자열화하려는 것의 내장을 제어할 수 없거나 다른 이유로 사용할 수 없는 경우toJSON()? 또는 동일한 객체를 다른 방식으로 문자열화할 수 있어야 하는 경우 어떻게 해야 합니까?

몇 가지 JavaScript 라이브러리에서 본 접근 방식은 클래스 인스턴스의 일반 개체 표현을 반환하는 메서드.toObject()를 포함하는 것입니다. 아마도 메서드 이름은 모든 JavaScript 개체에 있는 내장 .toString() 메서드를 미러링합니다. 어쨌든 클래스에 .toObject() 메서드를 사용하는 것은 여러 가지 이유로 훌륭하지만 도움이 되지 않는 한 가지는 JSON 문자열화입니다.

즉, JavaScript의 기본JSON.stringify 메서드에서 "replacer" argument을 활용하지 않는 한. .toObject() 사용을 시도하도록 교체자를 업데이트한 다음 모든 사용자 정의 클래스에서 해당 메서드를 사용하고(그리고 내장 클래스를 확장하여 추가하면) 클래스 인스턴스에서 의미 있는 방식으로 JSON.stringify를 계속 사용할 수 있습니다.

class MyStringifiableClass {
  #something;
  constructor(){
    this.hello = 'world';
    this.#something = 'else';
  }
  get item(){
    return {number:10};
  }
  get nested(){
    return {item: this.item}
  }
  toObject(){
    return {
      hello: this.hello,
      something: this.#something,
      nested: this.nested
    }
  }
}

/**
 * @param {string} key
 * @param {any} value
 */
function jsonStringifyToObjectReplacer(key,value){
  if(value && value.toObject){
    return value.toObject();
  }
  return value;
}

const stringifiableInstance = new MyStringifiableClass();
JSON.stringify(stringifiableInstance,jsonStringifyToObjectReplacer);
// And now we're back to where we started:
// '{"hello":"world","something":"else","nested":{"item":{"number":10}}}'

편의를 위해 기본 stringifier 주위에 고유한 함수를 래핑하고 애플리케이션 전체에서 사용합니다.

function stringify(something){
  return JSON.stringify(something,jsonStringifyToObjectReplacer);
}

toJSON() 및 toObject(또는 다른 사용자 정의 함수와 내장 JSON stringifier 및 사용자 정의 함수를 자체 교체기로 결합하여 컨텍스트에 따라 클래스 인스턴스의 다른 문자열화된 버전을 출력할 수도 있습니다!

Express.js JSON.stringify 교체 프로그램 변경

Express.js 프레임워크는 RESTful 서버를 빠르게 설정하는 데 탁월합니다. 많은 훌륭한 특성 중 하나는 클라이언트로 데이터를 다시 보내는 방법을 처리하는 것입니다. 일종의 JavaScript 개체를 보내려고 하면 Express가 자동으로 해당 개체를 JSON 문자열화하고 Content-Type 헤더를 "application/json"으로 설정합니다.

// Express server setup
// See {@link https://expressjs.com/en/starter/hello-world.html}
const express = require('express');
const app = express();
app.listen(8080);

app.get('/',(req,res)=>{
 res.send({hello:'world'});
 // Client recieves '{"hello":"world"}' body
 // with content-type header set to "application/json"
});

그러나 클래스 인스턴스를 클라이언트에 보내고 싶다면 어떻게 해야 할까요? Express는 귀하가 보내는 데이터에 대해 일반JSON.stringify 방법을 사용하므로 원래 문제로 바로 돌아갑니다. 다행히 Express를 사용하면 원하는 대체 프로그램을 설정할 수 있습니다.

app.set('json replacer',jsonStringifyToObjectReplacer)

그리고 이를 통해 res.send(myClassInstance) 메서드를 포함하는 모든 클래스에 대해 전체 Express 애플리케이션에서 간단하게.toObject() 할 수 있습니다.