TIL - 14 - JavaScript - Class

JungHoon Park·2021년 6월 22일

JavaScript React class

JavaScript

목록 보기

5/6

리액트를 공부하며 객체지향 프로그래밍의 핵심 공부를 다시하고자 자바스크립트의 Object와 Class를 정리해보고자 한다. 이번 TIL은 그 중에서 Class를 적고자 한다! 📝

1. Class

클래스는 객체지향 프로그래밍의 핵심이다. 객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호 작용 하도록 작성하는 방법이다.

클래스는 { num: 1}처럼 생긴 객체(Objcet)를 잘 설계하기 위한 틀이다. 이 때의 객체는 특정 로직을 갖고 있는 method(행동)와 멤버 변수(변경 가능한 상태)를 가진다. 원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 공장처럼 찍어낼 수 있다.

객체를 매번 만들어서 사용해도 좋지면, 큰 규모의 객체이거나 비슷한 모양의 객체를 단순반복적으로 계속 만들어야 한다면, class라는 설계도를 통해 만들 수 있다.

CSS의 class와는 전혀 다른 개념이니 헷갈리지 말자!!!

2. Construcror(생성자)

객체(object)의 설계도인 클래스는 문법이 서로 비슷하다. 하지만 둘의 가장 큰 차이는 constructor라는 생성자 함수이다.

const morning = new Car('Morning', 2000000);

위와 같이 class로 객체를 생성하는 과정을 '인스턴스화'라고 부른다.class를 통해 생성된 객체를 인스턴스(instance) 라고 부른다. class는 새로운 인스턴스를 생성할때마다 constructor() 매서드를 호출한다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  };
}

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

3. Instance(인스턴스)

const intance = new Word("사례, 경우", "~을 예로 들다");
인스턴스의 사전적 의미를 새로운 인스턴스에 담아 보았다.
사전적 의미에서 보듯이 instance는 새로운 case(경우)가 생겨난 것이다.
~~개인적으로 사전의 의미를 보면 이해하기 쉬워 적어 보았다. 이번에도 역시 이해하는데 도움이 되었다.~~

위에서 class instance를 생성했다.
Instace(인스턴스) == class를 통해 생성된 객체
인스턴스는 class의 property 이름과 method를 갖는 객체이다.
각각의 인스턴스마다 모두 다른 프로퍼티 값을 갖고 있다.

const morning = new Car('Morning', 20000000);

인스턴스는 Class 이름에 new를 붙여서 생성한다.
클래스 이름 우측에 ()괄호를 열고 닫고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨준다.
Car라는 클래스의 새로운 instance를 morning이라는 변수에 저장했다.
morining이라는 String과 20000000이라는 Number를 Car 생성자에게 넘겨주었고, name, price 프로퍼티에 각자의 값이 할당되었다.

즉, Car라는 클래스에 새로운 인스턴스를 생성하려면 new키워드가 필요하다. new키워드는 constructor() 메서드를 호출하고 새로운 인스터스를 return 해준다.

4. Methods(메서드)

메서드는 함수다. 그런데 객체가 프로퍼티 값을 갖고 있는 것을 메서드라고 부른다.
Class의 method는 Object(객체)의 문법과 똑같다.
다만 객체는 프로퍼티마다 comma(,)로 구분해줘야 하지만, 클래서는 그렇지 않다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
  }


  applyDiscount(discount) {  
    return this.price * discount;   
  }


  changeDepartment(departmentName) {
    this.department = departmentName;
  }
}

위는 Car 객체에 changeDepartment 메서드를 추가한 것이다.

Assignment

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

Answer

class MyMath { constructor(number1, number2) {
  this.number1 = number1;
  this.number2 = number2;
}
  getNumber(){
  let arr = [];
  arr.push(this.number1);
  arr.push(this.number2);
    return arr;
}
  add(){
    return this.number1 + this.number2;
}
  substract() {
    return this.number1 - this.number2;
}
  multiply(){
    return this.number1 * this.number2;
 }
}

Model Soulution

class MyMath { 
  constructor(a, b) {
  	this.num1 = a;
  	this.num2 = b;
}
  getNumber(){
  	return [this.num1, this.num2];  
}
  add(){
    return this.num1 + this.num2;
}
  substract() {
    return this.num1 - this.num2;
}
  multiply(){
    return this.num1 * this.num2;
 }
}