JavaScript - Class
October 22, 2020
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) // 0setter내부에서 사용자가 빈 문자열을 name에 지정하고, 음수를 age에 지정하는 것을 막아두었습니다.
