본문 바로가기
임시저장

아ㅏㅏ

by GREEN나무 2024. 12. 6.
728x90

코드를 바탕으로 클로저, 렉시컬 환경, 정적 메소드, 상속, 그리고 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