Public & Private 클래스 필드

Coddy JavaScript 여정의 객체 지향 프로그래밍 섹션에 포함된 레슨 — 56개 중 18번째.

JavaScript 클래스에서는 public과 private이라는 두 가지 유형의 클래스 필드를 정의할 수 있습니다.

공개 필드(Public fields)는 클래스 외부에서 접근 가능하며 누구나 사용할 수 있습니다.

공개 필드가 있는 클래스를 생성합니다:

class Student {
  name = '';
  grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }
}

학생 인스턴스를 생성합니다:

const student = new Student('Alice', 95);

클래스 외부에서 퍼블릭 필드에 접근하기:

console.log(student.name); // 출력: "Alice"
student.grade = 98;
console.log(student.grade); // 출력: 98

프라이빗 필드는 # 기호로 표시되며 클래스 내부에서만 접근할 수 있습니다:

class Student {
  name = '';
  #grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.#grade = grade;
  }
  
  getGrade() {
    return this.#grade;
  }
  
  updateGrade(newGrade) {
    this.#grade = newGrade;
  }
}

프라이빗 필드(private fields) 사용하기:

const student = new Student('Bob', 87);
console.log(student.name); // 출력: "Bob"

// 메서드를 사용하여 프라이빗 필드에 접근
console.log(student.getGrade()); // 출력: 87

// 메서드를 사용하여 프라이빗 필드 업데이트
student.updateGrade(92);
console.log(student.getGrade()); // 출력: 92

// 다음 코드는 오류를 발생시킵니다:
// console.log(student.#grade); // SyntaxError

챌린지

UserAccount라는 이름의 클래스에 두 개의 필드를 추가하세요:
1. 공개(public) 필드 username
2. 비공개(private) 필드 #password
username과 password 매개변수를 받는 생성자를 추가하세요

치트 시트

JavaScript 클래스는 public 및 private 필드를 지원합니다.

Public 필드는 클래스 외부에서 접근할 수 있습니다:

class Student {
  name = '';
  grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }
}

const student = new Student('Alice', 95);
console.log(student.name); // 출력: "Alice"
student.grade = 98;

Private 필드는 # 기호를 사용하며 클래스 내부에서만 접근할 수 있습니다:

class Student {
  name = '';
  #grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.#grade = grade;
  }
  
  getGrade() {
    return this.#grade;
  }
  
  updateGrade(newGrade) {
    this.#grade = newGrade;
  }
}

const student = new Student('Bob', 87);
console.log(student.getGrade()); // 출력: 87
student.updateGrade(92);
// student.#grade는 SyntaxError를 발생시킵니다

직접 해보기

import { UserAccount } from './userAccount.js';

// 테스트 코드 - 수정하지 마세요
const user = new UserAccount("alice", "secret123");
console.log(user.username);          // "alice"가 출력되어야 함