#18. 클래스(Class)와 인스턴스(Instance)

qwerzxcvss·2020년 10월 25일
0

이번에는 클래스(Class)와 인스턴스(Instance)에 대해서 배워보겠습니다~

클래스(Class)

클래스는 객체지향 프로그래밍의 핵심입니다. 객체지향 프로그래밍이란 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호작용하도록 작성하는 방법이에요. 클래스는 이런 객체를 잘 설계하기 위한 일종의 틀입니다.

객체의 개념 다시보기

객체는 특정로직을 가진 행동(method)과 변경가능한 상태(멤버 변수)를 가집니다. 원하는 구조의 객체 틀을 짜놓고 비슷한 모양의 객체를 공장처럼 찍어낼 수 있는데 이 때, 클래스(Class)라는 설계도를 통해 만들 수 있습니다!

자동차 Ray의 이름과 가격의 정보가 담겨있는 객체가 있을 때 이와 같은 구조의 Mornig 객체를 추가한다면?
이 때, Morning 뿐만 아니라 모든 차종의 정보를 저장한다면! 클래스와 인스턴스가 있다면 무척 편해집니다.

클래스 설계도

class Car {
constructor(name, price) {
this.name = name;
this.price = price;
}
}
// class를 통해 생성된 객체를 인스턴스라고 합니다. 그리고 class는 새로운 instance를 생성할 때마다 constructor()메서도를 호출합니다.

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

인스턴스 생성

const morning = new Car('Morning', 10000000);
const volvo = new Car('Volvo', 100000000);

  1. 인스턴스는 Class 이름에 new를 붙여서 생성합니다.
  2. 클래스 이름 우측에 () 괄호를 열고 닫고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨줍니다.
  3. Car클래스의 instance를 morning이라는 변수에 저장했습니다.
  4. Car 클래스의 새로운 instance를 생성하려면 new 키워드가 필요합니다. new 키워드는 constructor()메서드를 호출하고 새로운 instance를 return해줍니다.

MyMath라는 class를 생성하고 4개의 메서드를 구현하기 + 인스턴스 생성

class MyMath {
	constructor(num1, num2) {
    	this.num1 = num1;
        this.num2 = num2;
    }
    
    getNumber(num1, num2) {
    	let whatNum = [this.num1, this.num2];
    	return whatNum;
	}

    add(num1, num2) {
    	let addNum = this.num1 + this.num2;
    	return addNum;
	}

    substract(num1, num2) {
    	let substractNum = this.num1 - this.num2;
    	return substractNum;
	}

    multiply(num1, num2) {
    	let multiplyNum = this.num1 * this.num2;
    	return multiplyNum;
	}
}

const yourMath = new MyMath(10, 15);
profile
Frontend Developer

0개의 댓글