티스토리 뷰
반응형
참고
- 아래와 같은 클래스가 있다고 하자.
class Runner {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
/*
엄
청
나
게
길
고
가
독
성
이
떨
어
지
는
로
직
*/
console.log('comments end');
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old!!!`);
}
}
module.exports = Runner;
- 이 클래스는 아마도 이렇게 사용될 것이다.
const Runner = require('./runner/Runner');
(() => {
const runner = new Runner('ingnoh', 3);
runner.sayHello();
})();
- 그런데 sayHello 메소드의 로직이 너무 길고 복잡하(다고 가정하)여 가독성이 떨어진다.
- 때문에 함수를 추출하여 다음과 같이 리팩토링을 적용하였다.
class Runner {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
this.stupidFunction();
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old!!!`);
}
stupidFunction() {
/*
엄
청
나
게
길
고
가
독
성
이
떨
어
지
는
로
직
*/
console.log('comments end');
}
}
module.exports = Runner;
- 그런데 이 클래스는 설계 의도와는 달리 다음과 같이 사용될 수도 있다.
const Runner = require('./runner/Runner');
(() => {
const runner = new Runner('ingnoh', 3);
runner.stupidFunction();
console.log(runner.name);
console.log(runner.age);
})();
- 상술한 방식은 클래스가 적절히 캡슐화되지 않으며, 내부의 세부사항이 그대로 노출된다.
- 이로 인해 다음과 같은 상황이 발생할 수 있다:
- sayHello 메소드에서만 사용하기 위해 정의한 stupidFunction 메소드를 외부에서 호출할 수도 있다.
- name과 age 프로퍼티를 외부에서 마음대로 수정하여 클래스가 오동작할 수도 있다.
- 상술한 예시는 매우 쉬운 클래스이지만, 충분히 복잡한 기능을 수행하는 클래스에서는 문제가 발생할 수 있다.
- 특히 다른 개발자가 해당 클래스를 사용하는 경우에 문제가 발생하기 쉬울 것이다.
- 이를 방지하기 위해 이 클래스는 이렇게 사용하세요, 를 문서화하거나 주석을 달 수도 있지만, 이는 강제성이 없다.
- 다행히도 ES2019에서 도입된 'private 멤버를 명시하기 위한 #'을 활용하여 내부 정보를 숨길 수 있다.
class Runner {
// private 필드는 여기에 정의한다.
#name;
#age;
// 생성자에서 평범하게 접근이 가능하다.
constructor(name, age) {
this.#name = name;
this.#age = age;
}
sayHello() {
// 클래스 내부에서 접근하는 경우, #을 함께 명시한다.
this.#stupidFunction();
console.log(`Hello, my name is ${this.#name} and I am ${this.#age} years old!!!`);
}
// 메소드에도 적용이 가능하다.
#stupidFunction() {
/*
엄
청
나
게
길
고
가
독
성
이
떨
어
지
는
로
직
*/
console.log('comments end');
}
}
module.exports = Runner;
- 이제 Runner 클래스는 sayHello 메소드만을 외부에 노출하게 된다.
주의사항
- 자신의 런타임이 ES2019를 지원하는지 확인한 후에 사용하도록 하자.
- 내 경우, Node.js 14에서 동작하는 것을 확인하였다!
'Dev. > javascript' 카테고리의 다른 글
[JS] Date 역순 정렬 (0) | 2022.05.17 |
---|---|
[JS] slice, splice endIndex에 undefined 넣었을 때 (0) | 2022.05.16 |
[JS] 메소드 오버라이딩 (0) | 2022.04.23 |
[JS] 객체 배열을 Map으로 변환하기 (0) | 2022.04.23 |
[JS] 정규표현식 괄호 안 문자 제거하기 (0) | 2022.04.22 |
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- IntelliJ
- Git
- AWS IoT
- spring boot
- JEST
- postgresql
- dev
- JPA
- Spring Cloud Config
- terraform
- etc
- jQuery
- hashicorp
- Database
- Node.js
- react
- mysql
- kotlin
- 코딩테스트
- Gradle
- pgloader
- javascript
- Java
- shell
- Puppeteer
- Vault
- Docker
- Linux
- eureka
- AWS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
글 보관함