JavaScript - Class

Class in JavaScript

우리가 객체를 선언할 때에는 보통 이런 식으로 작성합니다

const person1 = {
	name: 'mengkki',
	age: 25,
	speak : function() {...},
}

그런데 여기서, person1과 똑같은 형식을 가지는 객체를 여러개 만들고 싶을 때가 있습니다.

function createPerson(name, age){
	const person = {
		name: name,
		age: age,
		speak : function() {...},
	}
	return person;
}

const person1 = createPerson('mengkki',25);

이런식으로 객체를 생성하는 함수를 만들어 원하는 인자를 전달해 객체를 만들 수도 있겠죠!

객체를 매번 만들어서 사용해도 좋지만,

큰 규모의 객체거나 비슷한 모양의 객체를 계속 만들어야 한다면 class를 사용하는 것도 좋은 방법입니다.

Class 생성하기

class는 연관이 있는 데이터들을 한 곳으로 묶어놓은 컨테이너같은 친구입니다.

class Person { // class의 이름은 CamelCase로 작성하는것이 국룰!
  constructor(name, age){ // 생성자
    this.name = name;// field 1
    this.age = age;// field 2
  }
  speak() {...} // method 1
}

위 코드에서 Person 클래스를 선언했습니다.

Person은 name, age를 field로 갖고 speak()라는 함수를 메소드를 갖습니다.

클래스를 선언해두면 정말 간편한 방법으로 객체들을 생성할 수 있습니다.

const mengkki = new Person('mengkki', 25);
const momo = new Person('momo', 22);

이런 방법으로 class를 통해 생성된 객체를 인스턴스라고 부릅니다.

class에서는 새로운 인스턴스를 생성할 때마다 constructor()메소드를 호출합니다.

getter & setter

Person 클래스의 필드에 사용자들이 의도치 않은 값을 설정하지 않도록 하기 위해 getter와 setter를 이용할 수 있습니다.

class Person {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  speak() {...}
  get name(){
    return this._name;
  }
  set name(newname){
    this._name = newname.length <= 0 ? 'no one' : newname;
  }
  get age(){
    return this._age;
  }
  set age(newage){
    this._age = newage < 0 ? 0 : newage;
  }
}

name과 age 필드에 getter와 setter를 설정해주었습니다.

getter와 setter를 설정해두었을 경우 내부적으로 this.name을 부를 때 getter 나setter를 불러오기 때문에

getter와 setter 내부에서는 조금 다른 변수를 사용해줘야 무한루프를 방지할 수 있습니다.

let arya_stark = new Person('', -1);
console.log(arya_stark.name); // 'no one'
console.log(arya_stark.age); // 0

setter내부에서 사용자가 빈 문자열을 name에 지정하고, 음수를 age에 지정하는 것을 막아두었습니다.