Campos de clase públicos y privados

Parte de la sección Programación Orientada a Objetos del Journey de JavaScript de Coddy — lección 18 de 56.

En las clases de JavaScript, podemos definir dos tipos de campos de clase: públicos y privados.

Los campos públicos son accesibles desde fuera de la clase y pueden ser utilizados por cualquier persona.

Crea una clase con campos públicos:

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

Crea una instancia de estudiante:

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

Accede a campos públicos desde fuera de la clase:

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

Los campos privados se denotan con el símbolo # y solo se puede acceder a ellos desde dentro de la clase:

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

Uso de campos privados:

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

// Acceder al campo privado usando un método
console.log(student.getGrade()); // Salida: 87

// Actualizar el campo privado usando un método
student.updateGrade(92);
console.log(student.getGrade()); // Salida: 92

// Esto causaría un error:
// console.log(student.#grade); // SyntaxError

Desafío

Agrega dos campos a la clase llamada UserAccount:
1. Un campo público username
2. Un campo privado #password
Agrega un constructor que reciba los parámetros username y password

Hoja de referencia

Las clases de JavaScript admiten campos públicos y privados.

Los campos públicos son accesibles desde fuera de la clase:

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

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

Los campos privados utilizan el símbolo # y solo se puede acceder a ellos dentro de la clase:

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()); // Resultado: 87
student.updateGrade(92);
// student.#grade causaría un SyntaxError

Pruébalo tú mismo

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

// Código de prueba - no modificar
const user = new UserAccount("alice", "secret123");
console.log(user.username);          // Debería mostrar "alice"