[JS] Class | 클래스 정의와 특징 #기초편
- 프론트/자바스크립트
- 2024. 7. 31.
클래스
자바스크립트에서 클래스는 객체 지향 프로그래밍을 구현하는 문법적 구조이다. 클래스를 사용하여, 속성과 메서드를 정의할 수 있다.
클래스 정의
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
printName() {
console.log(`반갑다, 내 이름은 ${this.name} 그리고 나이는 비밀이야`);
}
}
- `class Person`: Person이라는 클래스를 생성함. 클래스 명은 PascalCase로 작명함 (국룰임 안지키면 혼남)
- `constructor(속성1, 속성2 ...)`: 클래스의 `인스턴스` (뒤에 설명) 를 생성할 때 자동으로 호출되는 메서드이다. 초기화 작업을 수행한다. (객체의 속성을 설정하거나, 초기값을 정의하는 역할)
- `printName()`: 클래스에 정의된 메서드. 바인딩된 `this`를 사용할 수 있다.
클래스 인스턴스 생성
const hong = new Person('홍길동', 30);
hong.printName(); // 출력: 반갑다, 내 이름은 홍길동 그리고 나이는 비밀이야
const hwang = new Person('이황', 352);
hwang.printName(); // 출력: 반갑다, 내 이름은 이황 그리고 나이는 비밀이야
- `new`: 클래스의 인스턴스를 생성하려면 `new` 키워드를 사용한다.
- `인스턴스`: 클래스를 기반으로 생성된 실제 객체를 `인스턴스` 라고 한다. 즉, 인스턴스가 진짜다. 클래스라는 설계도(템플릿)를 이용해서 만들어진 실제 객체라고 생각하면 된다.
- 하나의 클래스로 무수히 많은 인스턴스를 생성 가능하다. 각각의 인스턴스는 클래스의 "설계"에 따라 생성된 객체로 `name`, `age` 속성 값을 가지고, `printName()` 메서드를 사용할 수 있다.
인스턴스 특징
- 각 인스턴트는 독립적인 상태를 가진다. 즉, `hong` 과 `hwang` 은 서로 다른 속성 값을 가진다.
'프론트 > 자바스크립트' 카테고리의 다른 글
[JS] Set | 객체가 들어있는 배열에서 중복되는 값을 지워줘~ (0) | 2024.08.02 |
---|---|
[JS] Set | 배열에서 중복되는 값 지워줘~ (0) | 2024.08.01 |
[JS교양] 상황에 따라 달라지는 this (0) | 2024.07.29 |
[JS기록] 중복된 함수 하나로 합쳐버리기 (feat. callback) (0) | 2024.07.29 |
[JS] DOM | 입맛대로 HTML 변경하기 (0) | 2024.07.29 |