[TIL]JS>클래스

Kangsick·2022년 1월 29일
0

TIL

목록 보기
25/27

Class

  • 클래스는 객체를 찍어내는 틀로, 객체지향 프로그래밍의 핵심입니다

    • 객체지향 프로그래밍: 프로그램을 객체들로 구성하고 객체들 간에 서로 상호작용 하도록 작성하는 방법입니다.
  • 객체는 오브젝트, 말 그대로 사물을 의미합니다

  • 큰 규모나 비슷한 모양의 객체를 만들려면 클래스를 통해 만들면 편리하게 코딩할 수 있습니다.

객체의 구성

let kangho = {  
  name: 'Yookangho',  
  age: 25,   
  getName: function() {  
    return this.name;  
  },   
  getAge: function() {  
    return this.age;  
  }   
}
  • 객체에서 메서드를 접근할 수 있는 방법은 두가지가 있습니다
    • 프로퍼티명으로 접근하는 방법
      const kanghoAgeByPropertyName = kangho.age;
      console.log('프로퍼티명으로 접근 => ' + kanghoAgeByPropertyName);
        -메서드로 접근하는 방법
    • 메서드로 접근하는 방법
      const kanghoByFunction = kangho.getAge();
      console.log('함수로 접근 => ' + rayPriceByFunction);

생성자(constructor)

  • 객체와 클래스는 문법상 비슷하지만, 큰 차이점은 생성자 함수입니다
  • 클래스를 통해 객체를 생성하는 과정을 인스턴스화 라고 합니다

클래스 작성법

class Name {                    //Car는 클래스 명이며 CamelCase 사용, 첫문자는 대문자
  constructor(name, age) {      // 생성자
    this.name = name;             //name은 멤버변수라고 부름
    this.age = age;            //this는 현재 자기 자신의 객체의 정보를 불러옴
  }
}
  • 클래스는 생성할때마다 생성자 함수를 호출됩니다.

인스턴스(instance)

  • 인스턴스는 클래스를 통해 생성된 객체를 의미합니다
  • 인스턴스는 클래스의 프로퍼티 명과 메서드를 갖는 객체입니다
  • 인스턴스는 클래스 명에 new를 붙여서 생성을 하며 argument를 주어 매개변수에서 받습니다
    • 사용예시
    • const kangho = new Name('Yookangho', 25);

메서드

  • 객체가 프로퍼티 값으로 가지고 있는 함수를 메서드라고 합니다

    객체와의 차이점
    객체는 프로퍼티마다 콤마(,)로 구분해줘야 하지만 클래스는 필요없습니다


Assignment

class 생성 연습

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

0개의 댓글