Campos de Classe Públicos e Privados

Parte da seção Programação Orientada a Objetos do Journey de JavaScript da Coddy — lição 18 de 56.

Em classes JavaScript, podemos definir dois tipos de campos de classe: públicos e privados.

Campos públicos são acessíveis de fora da classe e podem ser usados por qualquer pessoa.

Crie uma classe com campos públicos:

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

Crie uma instância de estudante:

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

Acesse campos públicos de fora da classe:

console.log(student.name); // Saída: "Alice"
student.grade = 98;
console.log(student.grade); // Saída: 98

Campos privados são denotados com o símbolo # e só podem ser acessados de dentro da classe:

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

Usando campos privados:

const student = new Student('Bob', 87);
console.log(student.name); // Saída: "Bob"

// Acessar campo privado usando um método
console.log(student.getGrade()); // Saída: 87

// Atualizar campo privado usando um método
student.updateGrade(92);
console.log(student.getGrade()); // Saída: 92

// Isso causaria um erro:
// console.log(student.#grade); // SyntaxError

Desafio

Adicione dois campos na classe chamada UserAccount:
1. Um campo público username
2. Um campo privado #password
Adicione um construtor que aceite os parâmetros username e password

Folha de consulta

As classes JavaScript suportam campos públicos e privados.

Campos públicos são acessíveis de fora da classe:

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

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

Campos privados usam o símbolo # e só podem ser acessados dentro da classe:

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()); // Saída: 87
student.updateGrade(92);
// student.#grade causaria um SyntaxError

Experimente você mesmo

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

// Código de teste - não modifique
const user = new UserAccount("alice", "secret123");
console.log(user.username);          // Deve exibir "alice"