[Javascript] 클래스(class)란?(1) : 프로퍼티, 생성자, 매서드

자바스크립트의 클래스에 대해 복습해 보자.

클래스가 뭔가요

클래스란 어떤 그룹을 나타낼 때 쓰인다. 위키피디아의 정의에 따르면 다음과 같다.

객체 지향 프로그래밍 에서 클래스 는 상태( 멤버 변수 ) 및 동작 구현(멤버 함수 또는 메서드 ) 에 대한 초기 값을 제공하는 객체 생성을 위한 확장 가능한 프로그램 코드 템플릿

말이 어려우니 내가 이해한 대로 설명해보자면,
같은 속성을 갖는 애들끼리 묶어서 나타내는 개념이라고 생각하면 쉽다. 대체로 클래스를 설명할 때 '붕어빵 틀'이라고 설명한다. 같은 붕어빵이라면 모두 '밀가루', '붕어모양', '팥(또는 슈크림)'이라는 성질을 갖는다. 따라서 붕어빵을 여러 개 만들고 싶을 때, 하나의 붕어빵 클래스를 만든 뒤, 그 클래스에 따라 비슷한 붕어빵을 여러 개 찍어 내는 것이다.

사실 설명이 길었지만, 사용 예시를 통해 익히는 것이 가장 직관적이다.

코드로 살펴보자.

클래스 만들기

클래스를 만들 때에는 keyword인 class라는 단어를 쓰고, 뒤에 내가 만들 클래스의 이름을 쓴 뒤, {}를 입력한다.

class Boong{
//클래스에 담을 성질들 입력
}

이때 {}안에 Boong이라는 클래스에 대한 내용을 입력하면 된다.
클래스 안에 담을 수 있는 내용으로는, 프로퍼티, 생성자(constructor), 클래스 내 메서드, 게터, 세터 등이 있다. 하나씩 살펴보자.

프로퍼티

말 그대로 속성이다. 앞에서 클래스를 설명할 때, 같은 속성을 갖는 애들끼리 묶어서 나타내는 것이 클래스라고 했다. 이 '같은 속성'을 프로퍼티로 나타낼 수 있다. 자고로 붕어빵이라고 하면 귀여운 이름(^^;)과 속에 무엇을 넣을 지, 얼마나 익힐지 등이 모든 붕어빵이 갖는 속성이 되겠다.
이 속성을 프로퍼티라고 하며, 이를 클래스 안에 선언하면 이 붕어빵 클래스를 활용한 모든 붕어빵은 해당 속성을 갖게 된다. 이제 이 프로퍼티들을 활용해 새로운 붕어빵을 만들어 보자!

class Boong{
	name; //이름 속성
    inside; // 내용물
    cookedDegree; // 익힘 정도
}

생성자 : 인스턴스(객체)를 만들어 내기 위해 사용

생성자는 말 그대로 새로운 붕어빵을 생성해 낼 때 사용하는 애다. 이때, 클래스에서 만들어낸 새로운 '붕어빵1'을 우리는 붕어빵 클래스의 인스턴스(또는 객체)라고 한다.
생성자는 영어로하면 constructor이기 때문에, constructor라고 써준 뒤, 괄호 안에 매개변수들을 넣어 준다. 앞서 만들어 둔 세 개의 속성을 활용해 생성자를 만들어보자.

class Boong{
	name; //이름 속성
    inside; // 내용물
    cookedDegree; // 익힘 정도
    
	constructor(name, inside, cookedDegree){
		this.name = name; 
		this.inside = inside; 
        this.cookedDegree = cookedDegree
	}
}

이렇게 만들면 이제 붕어빵을 새로 만들 수 있다. '귀여운붕어'라는 이름을 갖고, 팥을 고명으로 하는, 바삭하게 익은 붕어빵을 만들어보자. 그리고 이 붕어빵은 boongBread1이라는 변수에 할당해주자. 코드는 다음과 같다. new 키워드 뒤에 클래스 이름을 쓰고, 괄호 안에 생성자 함수에 지정해줬던 매개변수를 순서대로 입력해주면 된다.

const boongBread1 = new Boong('귀여운붕어', '팥', '바삭')

클래스 내 메서드

프로퍼티는 같은 클래스면 갖는 같은 속성이었다. 하지만 이는 정적이다. 이름이면 이름, 내용물, 익힘 정도는 어떤 움직임을 나타내진 않았다. 클래스 내 함수(메서드)를 통해 해당 클래스(여기서는 붕어빵 클래스)에 속한 애들이 똑같이 어떤 행위를 하도록 설정할 수 있다. 이는 메서드이름(){}으로 function 키워드 없이 메서드를 설정 가능하다. 붕어빵이 자기소개하는 메서드를 만들어보겠다. 해당 메서드의 리턴값으로 자기소개를 반환하도록 했다.

class Boong{
	name; 
    inside; 
    cookedDegree; 
    
	constructor(name, inside, cookedDegree){
		this.name = name; 
		this.inside = inside; 
        this.cookedDegree = cookedDegree;
	}
    introduce(){
    return '안녕하세요 저는 붕어빵입니다.';
    }
}

const boongBread1 = new Boong('귀여운붕어', '팥', '바삭')

이제 앞서 만든 boongBread1의 자기소개를 들어보자. 이는 아래와 같이 들을 수 있다.

console.log(boongBread1.introduce());
//'안녕하세요 저는 붕어빵입니다.'

이때 템플릿 리터럴(template literal)을 활용해 본인 이름으로 자기소개를 하게 할 수 있다.
작은따옴표를 백틱으로 바꾸고 붕어빵자리에 ${this.name}을 입력한다.

	...
    introduce(){
    return `안녕하세요 저는 ${this.name}입니다.`;
    }
	...

const boongBread1 = new Boong('귀여운붕어', '팥', '바삭')
console.log(boongBread1.introduce());
//'안녕하세요 저는 귀여운붕어입니다.'

한 단계 더 발전시킨 매서드를 만들어보면, 해당 붕어빵의 가격을 반환하는 메서드를 만들어 볼 수 있다.
내용물에는 ['팥', '슈크림'] 이 있고, 익힘정도에는 ['촉촉','중간',바삭']이 있다고 해보자. 또한 팥은 500원, 슈크림은 1000원, 촉촉은 100원, 중간은 200원, 바삭은 300원이라 해보자.
그렇다면 우리의 귀여운붕어의 가격은 500+300원이 된다. 코드는 아래와 같이 '?(물음표)'연산자와 if문을 활용해 짤 수 있다.

//가격표
Inside = [{'팥' : 500}, {'슈크림':1000}]
CookedDegree = [{'촉촉':100},{'중간':200},{'바삭':300}]

class Boong{
	name; 
    inside; 
    cookedDegree; 
    
	constructor(name, inside, cookedDegree){
		this.name = name; 
		this.inside = inside; 
        this.cookedDegree = cookedDegree;
	}
    introduce(){
    return '안녕하세요 저는 붕어빵입니다.';
    }
    
    price() {
    let result = 0;
    this.inside === "팥" ? (result += 500) : (result += 1000);

    if (this.cookedDegree === "촉촉") {
      result += 100;
    } else if (this.cookedDegree == "중간") {
      result += 200;
    } else {
      result += 300;
    }

    return `총 ${result}원 입니다.`;
  }
}

const boongBread1 = new Boong('귀여운붕어', '팥', '바삭')
console.log(boongBread1.price()); //총 800원 입니다.

게터, 세터는 다음 게시물에서 이어서 설명해 보겠다.