코드를 바탕으로 클로저, 렉시컬 환경, 정적 메소드, 상속, 그리고 Getter와 Setter가 어떤 것인지 설명하겠습니다.
---
### 1. 클로저(Closure)
클로저는 함수가 생성될 때, 해당 함수가 선언된 렉시컬 환경(Lexical Environment)을 함께 기억하는 것을 의미합니다. 함수 내부에서 외부의 변수에 접근하는 경우, 그 함수가 클로저가 됩니다. 예를 들어, `makeAnswerCircle` 함수는 `showCircle` 함수를 호출할 때 `guess`와 같은 외부 변수에 접근하는데, 이는 `showCircle` 함수가 클로저가 되도록 만듭니다. 클로저는 외부 함수의 상태를 유지하는 데 유용하게 사용됩니다.
function makeAnswerCircle(guess) {
const CIRCLE_NAME = "answer";
showCircle(guess, CIRCLE_NAME, $answerCircleArea).then((div) => {
div.id = "answerCircle";
div.append(CIRCLE_NAME);
});
}
여기서 `showCircle`은 `makeAnswerCircle` 함수의 환경을 기억하고, `guess`, `CIRCLE_NAME`, `$answerCircleArea` 등의 값을 참조할 수 있습니다.
---
### 2. 렉시컬 환경(Lexical Environment)
렉시컬 환경은 자바스크립트가 변수와 함수에 대한 접근을 어떻게 관리하는지를 나타냅니다. 함수가 선언된 위치에 따라 변수를 검색하는 범위가 결정되며, 이 환경이 기억된 상태로 함수가 실행됩니다. `displayMessage` 함수에서 `$guessingResult`와 같은 외부 변수에 접근하는 것은 렉시컬 환경 덕분에 가능합니다.
function displayMessage(message) {
$guessingResult.innerHTML = `<h1>${message}</h1>`;
}
이 함수는 `$guessingResult`를 외부 환경에서 찾아 사용합니다. 이처럼 함수가 선언된 위치에 따라 접근할 수 있는 변수의 범위가 결정됩니다.
---
### 3. Static Method (정적 메소드)
정적 메소드는 클래스의 인스턴스 없이도 호출할 수 있는 메소드입니다. 이 코드에서는 정적 메소드를 사용하지 않았지만, 예시로 `class` 키워드를 사용하여 `Math.random()`처럼 별도의 인스턴스를 만들지 않고도 접근 가능한 메소드를 작성할 수 있습니다. 정적 메소드는 클래스의 속성이 아닌, 클래스 자체에 속하므로, 클래스의 특정 상태에 의존하지 않는 기능들을 정의할 때 유용합니다.
class Circle {
static getArea(radius) {
return Math.PI * radius * radius;
}
}
// 사용 예시
Circle.getArea(10); // 100π
---
### 4. Inheritance (상속)
상속은 클래스를 기반으로 하위 클래스가 상위 클래스의 속성과 메소드를 물려받는 것을 의미합니다. 이 코드에서는 상속이 사용되지 않았지만, 게임을 위한 클래스 설계에서 유용하게 사용할 수 있습니다. 예를 들어, `Shape`라는 기본 클래스를 상속받아 `Circle`이나 `Square` 같은 하위 클래스를 만들면 재사용성과 유연성이 높아집니다.
class Shape {
constructor(color) {
this.color = color;
}
draw() {
console.log(`Drawing a shape in ${this.color}`);
}
}
class Circle extends Shape {
constructor(color, radius) {
super(color); // 부모 클래스의 생성자를 호출
this.radius = radius;
}
calculateArea() {
return Math.PI * this.radius * this.radius;
}
}
---
### 5. Getter와 Setter
Getter와 Setter는 객체의 속성을 가져오거나 설정하는 메소드로, 객체의 특정 속성에 접근하는 방식을 제어할 수 있습니다. Getter는 속성의 값을 가져오는 역할을 하고, Setter는 값을 설정하는 역할을 합니다. 코드에서는 Getter와 Setter가 사용되지 않았지만, 사용자 입력 값을 가져오거나 설정할 때 유용하게 사용할 수 있습니다.
예를 들어, 사용자 입력을 `getter`를 통해 가져오고, 유효성 검사를 `setter`에서 수행할 수 있습니다.
class Game {
constructor() {
this._guess = 0; // 프라이빗 변수로 선언
}
get guess() {
return this._guess;
}
set guess(value) {
if (value < 20 || value > 120) {
console.log("20 이상 120 이하의 정수를 입력해 주세요.");
} else {
this._guess = value;
}
}
}
이처럼 Getter와 Setter를 사용하면 객체 내부의 상태를 보호하면서 안전하게 값을 읽고 설정할 수 있습니다.
'임시저장' 카테고리의 다른 글
목차 만들기 (0) | 2024.12.10 |
---|---|
변수 일괄 수정 (0) | 2024.12.09 |
스텐다드 IOS 7계층 (0) | 2024.12.08 |
github 터미널 명령어 모음 (0) | 2024.12.06 |
Node.js 숙련주차 4.3 - 로그(Log) 미들웨어 - 게시판프로젝 (0) | 2024.11.25 |