JS의 getter, setter

Q1.

St2veK: StringFormatException 클래스의 에러 객제 e에서, get element() 라는 getter 함수가 있는데, 이 메소드가 리턴하는 요소 객체 el에 접근하기 위해서는, e.element로 접근해야해? 아니면 e.element()로 접근해야해?

 

 

 

A1.
GitHub Copilot: get element()는 getter 메소드이므로, `e.element`로 접근해야 합니다. `e.element()`로 접근하면 함수 호출로 인식되어 오류가 발생합니다. 

따라서, `e.element`로 접근하세요.

 

 

Q2.
St2veK: JS에서 getter 메소드는, () 없이 접근하는게 JS 문법인거야?

 

A2.
GitHub Copilot: 네, 맞습니다. JavaScript에서 getter 메소드는 함수 호출처럼 `()`를 사용하지 않고, 속성처럼 접근합니다. 따라서 `e.element`로 접근해야 합니다. 

예를 들어, StringFormatException 클래스의 element getter 메소드는 다음과 같이 사용할 수 있습니다:

const e = new StringFormatException('에러 메시지', '#myElement');
const el = e.element; // () 없이 접근
console.log(el);

이렇게 하면 element getter 메소드가 호출되어 해당 요소를 반환합니다.

 

Q3.
St2veK: setter 메소드는 전달할 값을 넣어주기 위해서 당연히 setterA()꼴로 작성하는게 맞지?

 

A3.
GitHub Copilot: 아니요, JavaScript에서 setter 메소드도 getter 메소드와 마찬가지로 함수 호출처럼 `()`를 사용하지 않고 속성처럼 접근합니다. 값을 설정할 때는 `e.element = value`와 같은 형태로 사용합니다.

예를 들어, 

StringFormatException 클래스에 setter 메소드를 추가하고 사용하는 방법은 다음과 같습니다:

class StringFormatException extends Error {
    #selector;

    constructor(msg = '잘못된 요청입니다', selector = undefined) {
        super(msg);
        super.name = 'StringFormatException';
        this.#selector = selector;
    }

    get selector() {
        return this.#selector;
    }

    set selector(value) {
        this.#selector = value;
    }

    get element() {
        const el = this.#selector !== null ? document.querySelector(this.#selector) : undefined;
        return el;
    }
}

// 사용 예시
const e = new StringFormatException('에러 메시지', '#myElement');
console.log(e.selector); // getter 사용
e.selector = '#newElement'; // setter 사용
console.log(e.selector); // 변경된 값 확인

이렇게 하면 `e.selector = '#newElement'`와 같은 형태로 setter 메소드를 사용할 수 있습니다.

 

Q4.
St2veK: 각각의 과정은, JS에서의 getter/ setter 함수에 대한 접근 방법에 대한 문법적인 규칙인거지?

 

A4.
GitHub Copilot: 네, 맞습니다. JavaScript에서 getter와 setter 함수에 대한 접근 방법은 문법적인 규칙입니다. getter와 setter는 속성처럼 접근하며, 함수 호출처럼 `()`를 사용하지 않습니다.

예를 들어, StringFormatException 클래스에서 selector와 element에 접근하는 방법은 다음과 같습니다:

const e = new StringFormatException('에러 메시지', '#myElement');

// getter 사용
console.log(e.selector); // '#myElement'
console.log(e.element);  // 해당 요소 객체

// setter 사용
e.selector = '#newElement';
console.log(e.selector); // '#newElement'

이처럼 getter는 속성 값을 읽을 때 사용하고, setter는 속성 값을 설정할 때 사용합니다. 
`()`를 사용하지 않고 속성처럼 접근하는 것이 JavaScript의 문법적인 규칙입니다.