[책] 자바스크립트 코드 레시피 278 - 229일차

클래스에서 변수 사용하기

• 클래스에 변수를 사용하고 싶을 때
• API 통신 결과 클래스를 생성하고 싶을 때

구문

this.변수명 = 값;

설명

클래스에 속하는 변수를 클래스 필드, 클래스 변수, 멤버 변수라고 합니다. 클래스에 멤버 변수를 정의하기 위해서는 다음과 같이 constructor() 내부에 'this.변수명'을 사용합니다. 여기서 this는 클래스 자신을 가리킵니다. 클래스 멤버 변수에 let과 const를 사용하지 않도록 주의합시다.

멤버 변수의 초깃값으로 사용

class MyClass {
  constructor() {
    this.myField1 = 100;
    this.myField2 = '사자';
  }
}
// 인스턴스화
const myInstance = new MyClass();
console.log(myInstance.myField1);
console.log(myInstance.myField2);

함수 파라미터의 초깃값 지정

class MyName {
  constructor(age, myName) {
    this.myAge = age;
    this.myNameIs = myName;
  }
}
// 인스턴스화
const myInfo = new MyName(30, '프로그래머');
console.log(myInfo.myAge);
console.log(myInfo.myNameIs);

API 통신 결과의 JSON 데이터를 보관하는 클래스의 생성

class WorkClass {
  constructor(myField1, myField2 = '일러스트레이터') {
    this.myField1 = myField1
    this.myField2 = myField2
  }
}
const classOne = new WorkClass(300);
console.log(classOne.myField1);
console.log(classOne.myField2);

API 통신 결과를 보관하는 클래스

// API 통신 결과를 보관하는 클래스
class ApiResultData {
  constructor() {
    this.result;
    this.errorMessage;
    this.userName;
    this.age;
  }
}
function parseData(response) {
  const apiResultData = new ApiResultData();
  apiResultData.result = response.result
  apiResultData.errorMessage = response.error_message;
  apiResultData.userName = response.user_name;
  apiResultData.age = response.age;
  console.log(`${apiResultData.userName} / ${apiResultData.age}세`) // 사자 / 24세
}
// API response 데이터
const apiResultData = {
  result: true,
  user_name: '사자',
  age: 24
};
parseData(apiResultData);