[JavaScript] 자바스크립트 클래스에서 변수 사용하기

255_자바스크립트 클래스에서 변수 사용하기

[적용]

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

---

[문법]

구문	의미
this.변수명 = 값	멤버 변수 정의

---

[내용]

클래스에 속하는 변수를 클래스 필드, 클래스 변수, 멤버 변수라고 한다.

클래스에 멤버 변수를 정의하기 위해서는 다음과 같이 constructor() 내부에 'this.변수명'을 사용한다.

여기서 this는 클래스 자신을 가리킨다.

클래스 멤버 변수에 let과 const를 사용하지 않도록 주의하자.

JavaScript               

class MyClass {
  constructor() {
    this.myField1 = 100;
    this.myField2 = '사자';
  }
}

 

멤버 변수는 초기값 대입이 가능하며, 대이하지 않으면 undefined로 정의된다.

JavaScript               

class MyClass {
  constructor() {
    // myField에 초기값 '사자'를 대입
    this.myField = '사자';
  }
}

 

인스턴스(new 클래스명())의 멤버 변수 접근은 '인스턴스.멤버변수명'을 사용하며,

객체의 속성 접근 방법과 같다.

JavaScript               

class MyClass {
  constructor() {
    this.myField1 = 100;
    this.myField2 = '사자';
  }
}

// 인스턴스화
const myInstance = new MyClass();

console.log(myInstance.myField1);  // 결과: 100
console.log(myInstance.myField2);  // 결과: '사자'

 

멤버 변수의 초기값으로 사용하기 위해 constructor()에 인수를 전달한다.

JavaScript               

// 두 개의 파라미터를 가지는 클래스
class MyClass {
  constructor(myField1, myField2) {
    this.myField1 = myField1;
    this.myField2 = myField2;
  }
}

const myInstance = new MyClass('사자', '여우');
console.log(myInstance.myField1);  // 결과: '사자'
console.log(myInstance.myFIeld2);  // 결과: '여우'

 

constructor()도 함수이므로 파라미터의 초기값을 지정할 수 있다.

JavaScript               

// myField2에 초기값 지정하기
class MyClass1 {
  constructor(myField1, myField2 = '사과') {
    this.myField1 = myField1;
    this.myField2 = myField2;
  }
}

const myInstance = new MyClass('사자');
console.log(myInstance.myField2);  // 결과: '사자'

 

API 통신 결과의 JSON 데이터를 보관하는 클래스의 생성을 확인해 보자.

JavaScript     

/** API 통신 결과를 보관하는 클래스 */
class ApiResultData {
  constructor() {
    this.result;
    this.errorMessage;
    this.userName;
    this.age;
  }
}

/** response 데이터 변환(API ResultData로 변환)을 위한 함수 */
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]세`);
}

// API response 데이터
const apiResponse = {
  result: true,  // API 통신 결과
  user_name: '사자',
  age: 24
};

// 데이터 변환
parseData(apiResponse);  // '사자 / 24세'가 출력됨

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김