[JS] Class 이해하기

devCecy·2020년 11월 22일
0

JavaScript

목록 보기
11/14

Class 란?

class는 함수다. 함수를 함수표현식과 함수 선언으로 정의할 수 있듯이, class도 class 표현식과 class 선언 두가지로 class는 몸체에 0개 이상의 메서드만 정의할 수 있다. class 몸체에서 정의 할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드 세가지가 있다.

1. 생성자 (constructor)

생성자는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드다. 생성자는 이름을 변경할 수 없다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}
  • Car는 class이름이며 class이름은 항상 대문자로 시작하고, CamelCase로 작성해야 합니다.
  • Car class의 instance를 생성할 때마다 constructor메서드가 호출된다.
  • constructor()메서드는 name, price 2개의 argument(인자)를 받는다.
  • constructor()메서드에서 사용한 this 키워드class의 실행범위(context)에서 해당 instance를 의미합니다.
  • constructor()에서 인자로 넘어오는 name과 price를 사용해 Car instance의 name, price 프로퍼티에 값을 할당했습니다.
  • 이렇게 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부릅니다.
  • 멤버 변수는 this 키워드로 접근합니다.

2. 인스턴스 (Instance)

인스턴스는 class를 통해 생성된 객체이며, class의 property이름과 메서드를 갖는 객체이다. class로 객체를 생성하는 과정을 '인스턴스화'라고 부릅니다.

//인스턴스 생성 
const morning = new Car('Morning', 20000000);
console.log(morning); 

/*생성된 인스턴스 
Car {
  name: 'Morning',
  price: 20000000,
  __proto__: Car { constructor: ƒ Car() }
} */
  • 인스턴스는 class이름에 new를 붙여서 생성한다.
  • 클래스 이름 우측에 ()괄호를 만들고, 내부에는 생성자에 필요한 정보를 인자로 넘겨준다.
  • 그럼, Car라는 클래스의 인스턴스가 moring이라는 변수에 저장된다.

3. 메서드 (Method)

객체의 프로퍼티 값을 함수로 갖고 있는 것을 메서드라고 부른다.

//메서드 생성하여 인스턴스 정보 변경하기 
class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
  }
  changeDepartment(departmentName) {
    this.department = departmentName;
  }
}
const morning = new Car("morning", 2000);
const newDepartment = morning.changeDepartment("강남지점")
                              
console.log(morning)

/* derpartment의 정보가 "선릉지점" 에서 "강남지점"으로 변경되었다! 
Car {
  name: 'morning',
  price: 2000,
  department: '강남지점',
  __proto__: Car { constructor: ƒ Car(), changeDepartment: ƒ changeDepartment() }
}
*/

4. Assignment

  • MyMath라는 class를 생성해주세요.
  • constructor에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
  • 총 4개의 메서드를 구현해주세요.
    1) getNumber: 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 ex) [1, 2]
    2) add: 두 개의 숫자를 더하는 메서드
    3) substract: 두 개의 숫자를 빼는 메서드
    4) multiply: 두 개의 숫자를 곱하는 메서드
class MyMath {
  constructor(num1,num2){
    this.num1 = num1;
    this.num2 = num2;
  }
  getNumber(num1,num2){
    return [this.num1, this.num2];
  }
  add(num1,num2){
    return this.num1+this.num2;
  }
  substract(num1,num2){
    return this.num1-this.num2;
  }
  multiply(num1,num2){
    return this.num1*this.num2;
  }
}

let myNumber = new MyMath(2,5);
console.log(myNumber.multiply());

오류가 났던 부분

새로 생성한 메서드에 this.num1, this.num2가 아니라 num1, num2라고 적어주었던 것.
사실, this.num1대신 왜 num1로 적으면 안되지는 아직 클리어하게 이해하지 못했다. class구조에 대해서 좀 더 명확하게 정리할 필요가 있다!

profile
https://velog.io/@dev_cecy 로 벨로그 옮겼습니다👻❣️

0개의 댓글