class 는 object를 뽑아내는 기계역할 정도로 생각하면 쉽다.
그리고 아래 6가지 정도에 대한 convention이 있다.
- 클래스 이름은 대문자로 시작합니다.
- 클래스 이름은 명사 형태로 작성합니다.
- 클래스 이름이 여러 단어로 이루어진 경우, 각 단어의 첫 글자를 대문자로 작성하고 붙여씁니다. (ex. MyClass)
- 클래스 내부의 메소드나 변수는 카멜 케이스(camelCase)로 작성합니다. 즉, 첫 단어는 소문자로 시작하고, 다음 단어부터는 첫 글자를 대문자로 작성합니다.
- 클래스의 생성자(constructor) 함수는 클래스 이름과 동일하게 작성합니다.
- 메소드 이름은 동사 형태로 작성합니다.
쉬운예시로 lol(리그오브레전드)를 예로들어보자.
롤에는 수십개의 캐릭터가 존재한다. 그 캐릭터들의 이름과 스킬은 다 다르다.
그러면 소스코드로 만들면 이런느낌이겠지?
case 1. 캐릭터 이름을 객체화 해야할때
const a={name : "nunu", ...}
const b={name : "garen", ...}
const c={name : "미스포츈", ...}
const d={name : "마이", ...}
const e={name : "스레셔", ...}
.
.
.
.이렇게만 해도 너무 많은 상수와 객체들을 사용해야 한다. 만약 종류가 많이 않다고 했을때는 이렇게 쓰면 되겠지만 이게 100개가 넘는다면...? 개발자 영역에서는 있을 수 없는일... 여러줄을 쓸 수 없다
그래서 해야하는게 CLASS를 사용하는 것이다.
2016년 이전에는 CLASS가 없어서 function을 통해서 class 작업을 할 수 있었다. 예시를 들면
function caracter(skill){
this.skill = skill
}
const 마이 = new caracter('칼 휘두르기')
//return 마이 = 칼 휘두르기이런느낌이라고 볼 수 있다.
이제 CLASS를 사용하게되면 소스코드를 이렇게 쓸 수 있다.
Class caracter {
constructor(skill,ex1,ex2, ...){
this.skill = skill
this.ex1 = ex1
this.ex2 = ex2
.
.
.
}
}
const 마이 = new caracter('칼 휘두르기', ...)이렇게 하면 된다. 이렇게 코드를 작성하게되면 여러 객체를 만들필요 없어 하나의 class를 생성하므로 여러 캐릭터에 대한 정보를
쉽게 코드로 작성할 수 있다.
다른예시를 들어서 이해를 더 쉽게 할 수 있도록 접근해보자.
다른 예시를 또 들어보면..
// Class 선언(선언에 대한 변수는 첫문자는 대문자로)
Class Person{
//constructor
constructor(name,age){
//fields
this.name = name;
this.age = age;
}
//method
speak(){
console.log(`${this.name} : hello !`)
}
}
const yeori = new Person(hongyeol,36);
const noogoo = new Person(mola,10);
const nana = new Person(nico,22);이렇게 class를 선언해주게되면
console.log(yeori.name) //hongyeol
console.log(yeori.age)//36
yeori.speak()//hongyeol : hello !
console.log(noogoo.age)//10
console.log(nana.name)//nico가 출력된다.
이러한 기능들을 활용하게 되며 class를 다른 어떠한 비슷한 예시로 들자면 붕어빵 틀과 같다. class는 비슷하거나 똑같은 상황(붕어빵 틀)에 대하여 붕어빵을 생성하게 된다. 그때 만들어지는 붕어빵에는 어떠한 내용물이 들어갔느냐에 따라 팥붕, 슈붕,피자붕 이렇게 나눠지기 때문이다.
참고로 chatGPT에게도 class란 무엇이고 어떻게 쓰이는지에 대해서 물어보았는데 물어본 대답에 대해서 혹시 몰라 남겨놓는다.
chatGPT의 설명(질문 : javascript의 class에 대해서 설명해 줘)
JavaScript에서 class는 객체 지향 프로그래밍을 구현하는데 사용되는 구문입니다. class를 이용하면 객체를 정의하고 생성할 때 사용할 수 있는 속성과 메소드를 묶어서 정의할 수 있습니다. 이렇게 정의된 class는 객체를 생성하는데 사용되며, 이러한 객체를 인스턴스라고 부릅니다.
class를 이용해서 정의된 객체는 다른 객체와 독립적으로 동작합니다. 이를테면, 한 객체의 속성이나 메소드가 변경되더라도 다른 객체에 영향을 미치지 않습니다. 이러한 특성은 객체를 구분하고, 객체 간에 코드를 재사용하면서도 상호작용하는데 유용합니다.
예를 들어, 다음은 class를 이용해 객체를 정의하고 생성하는 코드입니다.class Person { constructor(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } introduce() { console.log(`Hi, my name is ${this.name}, I'm ${this.age} years old and ${this.gender}.`); } } const person1 = new Person("Alice", 25, "female"); person1.introduce(); // Hi, my name is Alice, I'm 25 years old and female. const person2 = new Person("Bob", 30, "male"); person2.introduce(); // Hi, my name is Bob, I'm 30 years old and male.위 예시 코드에서 Person 클래스는 생성자 함수에서 name, age, gender 매개변수를 받아 객체의 this.name, this.age, this.gender 프로퍼티에 저장합니다. 이후 클래스 내부에는 introduce()와 같은 메소드가 있으며, 이들 메소드는 객체의 name, age, gender 프로퍼티를 출력하도록 작성되어 있습니다. 마지막으로, person1과 person2 객체를 생성하고, introduce() 메소드를 호출한 결과를 콘솔에 출력합니다.
그럼 class에서 연관되어 쓰이는 prototype, getter, setter도 공부해야한다.
