JavaScript

JavaScript 2-2 클래스의 getter와 setter 그리고 private

simplism 2025. 5. 29. 02:38

클래스 내부에 property(속성)에 저장과 반환을 위해 사용.
getter :
  1) 데이터를 가공해서 새로운 데이터를 반환할 때
  2) private한 값을 반환할 때

 

 

setter :  getter의 반대 개념. 즉 값을 새로 저장할 때


 

여기서 잠깐!

constructor가 있는데, getter와 setter를 사용하는이유는?

클래스의 constructor는 인스턴스가 생성될 때 한 번만 호출되어 초기값을 설정하는 역할을

반면, getter와 setter는 인스턴스가 생성된 이후에도 속성값을 읽거나 변경할 때마다 실행

getter: 클래스 내부 속성에 직접 접근하지 않고, 간접적으로 값을 읽음.

           (필요시 값을 가공해서 반환ok)
setter: 속성값을 변경할 때 조건을 검사하거나, 추가적인 로직(예: 값의 유효성 검사 등)을 실행. (잘못된값 입력방지)


그럼 직접접근, 간접접근은 뭐야?


직접접근
person.name = "핰씨";
console.log(person.name);


간접접근
getter나 setter 같은 메서드를 통해 간접적으로 접근.

 

 


 

 

클래스생성

class Lol{
    name;
    year;

    constructor(name, year){
        this.name = name;
        this.year = year;
    }
    
    get nameAndYear(){                      // 함수가 아니기에 사용시에는 변수처럼 사용
        return `${this.name}-${this.year}`; // Lol.nameAndYear;
    }

    set setName(name){    		// parameter를 1개 받아야함(뭔갈 저장해야하니까?)
        this.name = name;
    }
}

 

 

getter확인

const hoo = new Lol('핰씨', 2025);
console.log(hoo);                   // Lol { name: '핰씨', year: 2025 }
console.log(hoo.nameAndYear);       // 핰씨-2025

 

setter확인

hoo.setName = "강재석";
console.log(hoo);                   // Lol { name: '재석', year: 2025 }
console.log(hoo.nameAndYear);       // 재석-2025

 

 

private 값이란??

1) 클래스 내부에서만 접근할 수 있도록 제한된 속성이나 메서드를 의미

2) 오직 해당 클래스 내부에서만 읽거나 쓰기가능 

   ( 클래스 외부나 상속받은 클래스에서도 접근 불가능 )


클래스 생성 + private 값 생성

class Lol2{
    #name;                      // 🎉private 값은 앞에 #을 붙여준다
    year;
    constructor(name, year){    
        this.#name = name;      // 🎉private 값은 앞에 #을 붙여준다
        this.year = year;
    }
    get name(){                 // (getter에서는 #사용x)
        return this.#name;      // 🎉private 값은 앞에 #을 붙여준다
    }
    set name(name){
        this.#name = name;
    }
}

 

private값이 포함되어있는 객체를 출력시 확인

const hoo2 = new Lol2('아무무', 2022);
console.log(hoo2);          // Lol2 { year: 2022 }
                            // private 값은 출력되지 않음

 

setter, getter를 이용한 수정 및 반환

hoo2.setName = '오라이';
console.log(hoo2.getName);     // 오라이

 

 

 

 

출처 : https://www.youtube.com/watch?v=ZOVG7_41kJE&t=183s