📅 2025-09-23
➡️ JavaScript Class에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리 + 🤔❓
🔎 학습 리마인드
📌 클래스
- 객체를 만들기 위한 설계도(템플릿) 역할
- 객체가 가져야 할 속성(프로퍼티)과 동작(메서드)을 정의할 수 있음
- 클래스를 기반으로 만들어진 실제 객체를 인스턴스라고 함
💡 클래스 기본 구조
class키워드 사용class Car { // 생성자 메서드 constructor(brand, model) { this.brand = brand; this.model = model; } // 인스턴스 메서드 displayInfo() { console.log(`${this.brand} ${this.model}`); } } // 인스턴스 생성 const car1 = new Car("Hyundai", "Veloster"); car1.displayInfo(); // Hyundai Veloster- 필수는 아니지만 대문자로 시작
Car클래스는brand와model속성을 가지고 있으며,displayInfo메서드를 정의new키워드를 사용하여Car클래스의 인스턴스를 생성하고,displayInfo메서드를 호출
💡 클래스와 인스턴스, 생성자(Constructor)
- Constructor는 Class의 생성자 함수
- 생성자 함수는 객체를 생성할 때 호출되며, 객체를 초기화하는 역할을 함
constructor키워드를 사용하여 정의class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`안녕하세요, 제 이름은 ${this.name}, 나이는 ${this.age}살입니다.`); } } const p1 = new Person("Alice", 30); const p2 = new Person("Bob", 25); p1.greet(); // 안녕하세요, 제 이름은 Alice, 나이는 30살입니다. p2.greet(); // 안녕하세요, 제 이름은 Bob, 나이는 25살입니다.
💡 Geter/Setter
getter와setter를 사용하여 Class의 속성에 접근할 수 있음getter: 클래스 속성(프로퍼티)의 값을 읽어올 때 사용하는 특별한 메소드setter: 클래스 속성(프로퍼티)의 값을 설정(변경)할 때 사용하는 특별한 메소드- 보통
get프로퍼티명(),set프로퍼티명()형식으로 메서드 이름을 지음const user = { name : "홍길동", age: 20, getName(){ return user.name; } setName(value){ user.name = value; } } console.log( user.getName()); user.setName("김철수"); - ES6부터는 객체 리터럴 안에서 속성 이름 앞에 get, set 키워드만 붙여 Getter, Setter를 정의
const user = { name: "홍길동", age: 20, get fullName() { return this.name; }, set changeName(value) { this.name = value; } }; console.log(user.fullName); // 홍길동 user.changeName = "김철수"; console.log(user.fullName); // 김철수
❗ 주의할 점
- Getter만 선언
getter메서드만 있어 값을 할당하려고 하면 에러 발생const user = { name: "홍길동", age: 20, get fullName() { return this.name; } }; user.fullName = "김철수" // Error- Setter 무한 루프
get,set둘다 이름이 같은경우 무한 루프에 빠짐const user = { name: "홍길동", age: 20, get name(){ return this.name; } set name(value){ user.name = value; } } user.name = "김철수";- 클래스 속성을 그냥
.value처럼 직접 접근해도 되는데 왜 쓸까?
- 데이터 보호
- 데이터 검증 (유효성 검사)
- 코드 일관성
💡 정적메서드 (Static Method)
- 클래스 안에서
static키워드를 붙이면, 그 메서드는 클래스 자체에 속하는 함수가 됨 - 인스턴스를 만들지 않고도 바로 사용 가능
class Calculator { static add(a, b) { return a + b; } } console.log(Calculator.add(2, 3)); // 5- 인스턴스(객체)에서는 호출 안됨
- 클래스 이름으로 직접 호출 가능
- 인스터스마다 다르게 동작할 필요가 없는 모든 객체가 똑같이 공유해야 하는 기능을 넣을 때 사용
- 유틸함수 (날짜 포멧 , 문자열 처리)
- 정적 속성 (공용 설정값)
📌 상속
💡 extends 키워드
- 클래스를 다른 클래스의 하위 클래스로 만들 수 있음
class Parent{
...
}
class Child extends Parant{
...
}Child클래스가 Parent 클래스를 상속- 자식 클래스
Child를 통해서 부모 클래스Parent의 정적 메소드와 정적 속성을 사용할 수 있음 - 부모 클래스
Parent의 인스턴스 메서드와 인스턴스 속성을 자식 클래스Child의 인스턴스에서 사용 할 수있음
- 자식 클래스
- 필요하다면 메소드를 재정의(오버라이딩) 가능
class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name}가 소리를 냅니다.`); } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed = breed; } speak() { console.log(`${this.name}가 멍멍 짖습니다.`); } } const d = new Dog("Rex", "Labrador"); d.speak(); // Rex가 멍멍 짖습니다.
💡 super 키워드
- 생성자 내부에서
super를 함수로 호출하면 부모 클래스의 생성자 호출 - 정적 메서드 내부에서는
super.prop과 같이 써서 부모 클래스prop정적 속성에 접근 가능 - 인스턴스 메서드 내부에서는
super.prop와 같이 써서 부모 클래스의prop인스턴스 속성에 접근 가능
class Person {
constructor(name, age){
this.name = name;
this.age = age;
}
printInfo(){
return `제 이름은 ${this.name} 입니다 나이는 ${this.age}` ;
}
}
class Person2 extends Person{
constructor(name, age, hobby){
super(name, age);
this.hobby = hobby;
}
printInfo(){
return super.printInfo() + ` 취미는 ${this.hobby} 입니다. `
}
}
const personName = new Person2("홍길동", 20, "스노우보드");
console.log( personName.printInfo()); 💡 Private 클래스 변수
- 클래스 외부에서 접근이 불가능 내부에서만 사용 가능
- ES2021부터
#기호를 붙여private필드/메서드를 만들 수 있음
class User {
#password = "1234"; // private 변수
checkPassword(pw) {
return this.#password === pw;
}
}
const u = new User();
console.log(u.checkPassword("1234")); // true
console.log(u.#password); // 오류: 외부 접근 불가🌊 Deep Dive
🤔 클래스 속성에서 _의 의미와 용도
_붙은 변수: 이 속성은private처럼 다뤄야 한다라는 의미 → 일종의 관습(convention)_는 개발자에게 신호를 주는 역할이며, 언어적으로 접근을 막지는 않음- 진짜
private필드는#로 선언
