Propiedades de clase en JavaScript: Públicas, privadas y estáticas

Comprender la diferencia entre propiedades públicas, privadas y estáticas es la clave para diseñar objetos seguros y eficientes. En esta sección, exploraremos cómo proteger tus datos sensibles con campos privados y cómo optimizar la memoria mediante el uso de miembros estáticos. Prepárate para dominar el control total sobre la estructura de tus clases y llevar la arquitectura de tu código al siguiente nivel profesional.

1. ¿Qué son las propiedades de clase (class fields) en JavaScript?

Las propiedades de clase (class fields) son variables que pertenecen a los objetos creados a partir de una clase. (ver que es una clase en JavaScript)
Sirven para guardar datos o estado dentro de cada instancia de la clase.

En otras palabras:

• Una clase define la estructura de un objeto.
• Las propiedades almacenan datos dentro de ese objeto.
• Los métodos contienen las funciones que operan sobre esos datos.

👉Las class fields permiten declarar propiedades directamente dentro de la clase, sin tener que crearlas siempre dentro del constructor.

1.2. Relación entre clases y propiedades

Una clase funciona como un molde para crear objetos.

Dentro de ese molde podemos definir:

• Propiedades → datos
• Métodos → comportamiento

1.2.1. Ejemplo básico:

// Definimos una clase
class Usuario {

  // ----- PROPIEDADES DE CLASE (class fields) -----

  nombre = "Sin nombre"; // Esta propiedad guarda el nombre del usuario. Cada objeto creado tendrá su propia copia
  edad = 0;  // Propiedad que almacena la edad del usuario
    
  // ----- MÉTODO -----

  saludar() {
    console.log("Hola, mi nombre es " + this.nombre); // Un método es una función que pertenece a la clase
  }

}


// ----- CREACIÓN DE UNA INSTANCIA -----

const usuario1 = new Usuario(); // Se crea un objeto basado en la clase Usuario

  
// ----- ACCESO A PROPIEDADES -----

console.log(usuario1.nombre); // "Sin nombre"


// ----- USO DE MÉTODOS -----

usuario1.saludar(); // Hola, mi nombre es Sin nombreLenguaje del código: JavaScript (javascript)

📌 Aquí ocurre algo importante:

Cada objeto creado con new Usuario() tendrá sus propias propiedades, pero compartirá los mismos métodos.

1.3. ¿Qué problema solucionan las class fields?

Antes era común escribir las propiedades dentro del constructor:

class Persona {

  constructor() {

    this.nombre = "Juan";
    this.edad = 30;

  }

}Lenguaje del código: JavaScript (javascript)

Con class fields el código queda más claro y organizado:

class Persona {

  nombre = "Juan";
  edad = 30;

}Lenguaje del código: JavaScript (javascript)

Ventajas:

• código más limpio
• estructura más clara
• mejor organización de clases

1.4 Relación con encapsulación

La encapsulación es un principio de la programación orientada a objetos que significa:

Encerrar datos y comportamiento dentro de una clase y controlar cómo se accede a ellos.

Las clases permiten:

• agrupar propiedades
• agrupar métodos
• proteger estado interno

Ejemplo simple:

class CuentaBancaria {

  saldo = 0;

  depositar(cantidad) {

    this.saldo += cantidad;

  }

}

const cuenta = new CuentaBancaria();

cuenta.depositar(100);

console.log(cuenta.saldo);
// 100Lenguaje del código: JavaScript (javascript)

Aquí:

• saldo es el estado
• depositar() controla cómo modificar ese estado

Más adelante, con propiedades privadas, podremos proteger completamente esos datos.

💡Idea clave que debes recordar

En una clase:

• class fields → guardan datos
• métodos → ejecutan acciones
• la clase → organiza todo

Estructura mental:

Clase
 ├─ Propiedades → datos
 └─ Métodos → comportamiento

1.5. Resumen sobre las class fields

Las propiedades de clase (class fields) son variables declaradas dentro de una clase que permiten almacenar el estado de cada instancia. Se utilizan para guardar datos, referencias o configuraciones y funcionan junto a los métodos para definir el comportamiento de los objetos. Son una pieza fundamental para aplicar programación orientada a objetos y encapsulación en JavaScript.

2. Miembro de instancia y miembro estático

2.1. Diferencia entre miembro de instancia y miembro estático

Cuando trabajamos con clases en JavaScript, los elementos de una clase pueden pertenecer a dos lugares distintos:

1. A cada objeto creado (instancia)
2. A la clase misma

Esto da lugar a dos tipos de miembros:

• Miembros de instancia
• Miembros estáticos (static)

Entender esta diferencia es clave para diseñar clases bien estructuradas.

2.2. ¿Qué es un miembro de instancia?

Un miembro de instancia es una propiedad o método que pertenece a cada objeto creado a partir de la clase.

Cada vez que usamos new, se crea una copia independiente de esas propiedades.

2.2.1. Ejemplo simple

class Usuario {

  // ----- PROPIEDAD DE INSTANCIA -----

  nombre = "Sin nombre";
  // Cada objeto tendrá su propio valor de "nombre"


  // ----- MÉTODO DE INSTANCIA -----

  saludar() {

    // "this" hace referencia al objeto que ejecuta el método
    console.log("Hola, soy " + this.nombre);

  }

}


// ----- CREACIÓN DE OBJETOS (INSTANCIAS) -----

const usuario1 = new Usuario();
const usuario2 = new Usuario();


// ----- MODIFICAMOS LAS PROPIEDADES -----

usuario1.nombre = "Juan";
usuario2.nombre = "Ana";


// ----- CADA OBJETO TIENE SU PROPIO ESTADO -----

usuario1.saludar();
// Hola, soy Juan

usuario2.saludar();
// Hola, soy AnaLenguaje del código: JavaScript (javascript)

📌 Aquí ocurre algo importante:

• nombre pertenece a cada objeto
• saludar() se ejecuta sobre cada objeto

Por eso se llaman miembros de instancia.

2.3. ¿Qué es un miembro estático (static)?

Un miembro estático pertenece a la clase misma, no a los objetos creados.

Por lo tanto:

• No se accede desde las instancias
• Se accede desde la clase

2.3.1. Ejemplo simple

class Calculadora {

  // ----- MÉTODO ESTÁTICO -----

  static sumar(a, b) {

    // Este método pertenece a la clase Calculadora
    return a + b;

  }

}


// ----- USO DEL MÉTODO ESTÁTICO -----

const resultado = Calculadora.sumar(5, 3);

console.log(resultado);
// 8Lenguaje del código: JavaScript (javascript)

📌 Observa algo clave:

No necesitamos crear un objeto:

new Calculadora()Lenguaje del código: JavaScript (javascript)

Simplemente usamos:

Calculadora.sumar()Lenguaje del código: CSS (css)

Porque el método pertenece a la clase.

2.4. ¿Qué pasa si intentamos usar un método estático desde una instancia? (error común)

class Calculadora {

  static multiplicar(a, b) {

    return a * b;

  }

}

const calc = new Calculadora();

calc.multiplicar(2, 3);
// ❌ ERRORLenguaje del código: JavaScript (javascript)

¿Por qué ocurre el error?

Porque multiplicar() no pertenece al objeto, sino a la clase.

La forma correcta:

Calculadora.multiplicar(2, 3);Lenguaje del código: CSS (css)

2.5. Comparación clara

Tipo	Pertenece a	Cómo se accede
Miembro de instancia	al objeto	objeto.metodo()
Miembro estático	a la clase	Clase.metodo()

2.6. Regla mental fácil

Piensa así:

Clase
 ├─ miembros estáticos (pertenecen a la clase)
 │
 └─ instancia
     ├─ propiedades
     └─ métodos

2.7. Cuándo usar cada uno

2.7.1. Usar miembros de instancia cuando:

• cada objeto tiene su propio estado
• los métodos trabajan con this
• representan entidades reales

Ejemplo:

• Usuario
• Producto
• Carrito
• Componente UI

2.7.2. Usar miembros estáticos cuando:

• la función no depende de un objeto
• es una utilidad
• es una configuración global
• es un helper

Ejemplo:

• funciones matemáticas
• validadores
• utilidades DOM

3. Campos públicos en una clase

3.1. ¿Qué son los campos públicos en una clase de JavaScript?

Los campos públicos (public class fields) son propiedades declaradas directamente dentro de una clase que pueden ser accedidas y modificadas desde cualquier lugar del programa.

Se llaman públicos porque:

• No tienen restricción de acceso
• Pueden leerse o modificarse desde las instancias de la clase
• Son visibles fuera de la clase

En términos simples: Son variables que pertenecen a cada objeto creado a partir de la clase.

3.1.1. Sintaxis de los campos públicos

Los campos públicos se declaran directamente dentro de la clase, sin usar constructor.

class NombreClase {  
   propiedad = valor;
}Lenguaje del código: JavaScript (javascript)

3.1.2. Ejemplo básico de campos públicos

// Definimos una clase
class Usuario {

  // ----- CAMPOS PÚBLICOS -----   (igual que decir ---Propiedad de instancia---)

  nombre = "Sin nombre";
  // Campo público que guarda el nombre del usuario

  edad = 0;
  // Campo público que guarda la edad

}


// ----- CREACIÓN DE UNA INSTANCIA -----

const usuario1 = new Usuario();
// Creamos un objeto basado en la clase Usuario


// ----- ACCESO A LOS CAMPOS -----

console.log(usuario1.nombre);
// "Sin nombre"

console.log(usuario1.edad);
// 0Lenguaje del código: JavaScript (javascript)

📌 Aquí sucede lo siguiente:

• nombre y edad son campos públicos
• Cada objeto creado con new Usuario() tendrá sus propias propiedades

NOTA!! Un campo público es una propiedad de instancia declarada con la sintaxis moderna de class fields.

3.2. Modificar campos públicos desde una instancia

Al ser públicos, podemos modificarlos fácilmente.

class Usuario {

  nombre = "Sin nombre";
  edad = 0;

}

const usuario1 = new Usuario();


// ----- MODIFICAMOS LOS VALORES -----

usuario1.nombre = "Carlos";
usuario1.edad = 30;


// ----- ACCESO A LOS NUEVOS VALORES -----

console.log(usuario1.nombre);
// Carlos

console.log(usuario1.edad);
// 30Lenguaje del código: JavaScript (javascript)

📌 Esto funciona porque los campos son públicos y accesibles desde la instancia.

3.3. Ejemplo agregando un método

Las clases normalmente combinan:

• campos públicos (datos)
• métodos (comportamiento)

class Usuario {

  // ----- CAMPOS PÚBLICOS -----

  nombre = "Sin nombre";
  edad = 0;


  // ----- MÉTODO -----

  saludar() {

    // "this" hace referencia al objeto actual
    console.log("Hola, soy " + this.nombre);

  }

}


// ----- CREACIÓN DE INSTANCIA -----

const usuario1 = new Usuario();

usuario1.nombre = "Laura";


// ----- USO DEL MÉTODO -----

usuario1.saludar();
// Hola, soy LauraLenguaje del código: JavaScript (javascript)

Aquí vemos que el método usa el campo público nombre.

ALGO IMPORTANTE!!! Los métodos NO son campos públicos. Los campos públicos solo se refieren a propiedades.

3.4. Inicialización usando el constructor

El constructor se usa cuando queremos inicializar propiedades con datos que recibimos al crear el objeto.

3.4.1. Ejemplo

class Usuario {

  // ----- CAMPOS PÚBLICOS -----

  nombre;
  edad;


  // ----- CONSTRUCTOR -----

  constructor(nombreUsuario, edadUsuario) {

    // "this" representa la instancia que se está creando

    this.nombre = nombreUsuario;
    // Asignamos el valor recibido al campo público

    this.edad = edadUsuario;
    // Inicializamos la propiedad con el dato recibido

  }

}


// ----- CREACIÓN DE UNA INSTANCIA -----

const usuario = new Usuario("Laura", 28);


// ----- ACCESO A LAS PROPIEDADES -----

console.log(usuario.nombre);
// Laura

console.log(usuario.edad);
// 28Lenguaje del código: JavaScript (javascript)

Aquí el constructor permite que cada objeto tenga valores distintos desde su creación.

3.5. ¿Cuándo usar campos públicos y cuándo usar constructor?

3.5.1. Usar campos públicos cuando:

• el valor inicial es simple
• es un valor por defecto
• no depende de datos externos

Ejemplo:

estado = "activo"
contador = 0Lenguaje del código: JavaScript (javascript)

3.5.2. Usar constructor cuando:

• necesitamos parámetros
• dependemos de datos externos
• debemos configurar el objeto

Ejemplo:

new Usuario("Juan", 30)Lenguaje del código: JavaScript (javascript)

3.6. Orden en que JavaScript inicializa todo

Cuando creamos un objeto:

new Clase()Lenguaje del código: JavaScript (javascript)

JavaScript hace esto:

1. crea la instancia
2. inicializa los campos públicos
3. ejecuta el constructorLenguaje del código: JavaScript (javascript)

Esto explica por qué el constructor puede modificar esos valores.

4. Campos privados (#) en JavaScript

4.1. ¿Qué son los campos privados (#) en JavaScript?

Los campos privados son propiedades de una clase que solo pueden ser accedidas desde dentro de la propia clase.
Se identifican porque empiezan con #.

Esto significa que:

• no se pueden leer desde fuera
• no se pueden modificar desde fuera
• solo los métodos de la clase pueden acceder a ellos

Esto permite aplicar encapsulación real, uno de los principios fundamentales de la programación orientada a objetos.

4.2. Sintaxis de los campos privados

La sintaxis es muy simple:
Solo se agrega # delante del nombre de la propiedad.

Sintaxis general

class Clase {

  #propiedadPrivada = valor;

}Lenguaje del código: PHP (php)

4.3. Ejemplo básico de un campo privado

class CuentaBancaria {

  // ----- CAMPO PRIVADO -----

  #saldo = 0;
  // Esta propiedad solo puede ser usada dentro de la clase


  // ----- MÉTODO PÚBLICO -----

  depositar(cantidad) {

    // Accedemos al campo privado desde dentro de la clase
    this.#saldo += cantidad;

  }


  mostrarSaldo() {

    console.log("Saldo actual:", this.#saldo);

  }

}


// ----- CREACIÓN DE UNA INSTANCIA -----

const cuenta = new CuentaBancaria();

cuenta.depositar(100);

cuenta.mostrarSaldo();
// Saldo actual: 100Lenguaje del código: PHP (php)

📌 Aquí ocurre algo importante:

#saldo no es accesible desde fuera de la clase.

4.4. Intentar acceder a un campo privado desde fuera (error)

class CuentaBancaria {

  #saldo = 0;

}

const cuenta = new CuentaBancaria();

console.log(cuenta.#saldo);Lenguaje del código: PHP (php)

Esto produce un error de sintaxis.

❌ No se puede acceder a un campo privado desde fuera de la clase.

Esto es lo que hace posible la encapsulación real.

4.5. Diferencia entre campo público

Campo público

class Usuario {

  nombre = "Juan";

}

const usuario = new Usuario();

console.log(usuario.nombre);
// FuncionaLenguaje del código: JavaScript (javascript)

El campo es accesible desde fuera.

4.6. Qué problema solucionan los campos privados

Antes de los campos privados, la «privacidad» era solo una convención.

Ejemplo antiguo:

class Usuario {  _saldo = 0;}Lenguaje del código: JavaScript (javascript)

El _ solo indicaba que no debería tocarse, pero sí se podía modificar.

usuario._saldo = 100000;

Con # ahora JavaScript realmente bloquea el acceso.

4.7. Usar métodos públicos para acceder a campos privados

Como no se puede acceder directamente, se utilizan métodos públicos.

Ejemplo

class Usuario {

  // ----- CAMPO PRIVADO -----

  #nombre = "";


  // ----- MÉTODO PARA MODIFICAR EL VALOR -----

  setNombre(nuevoNombre) {

    this.#nombre = nuevoNombre;

  }


  // ----- MÉTODO PARA LEER EL VALOR -----

  getNombre() {

    return this.#nombre;

  }

}

const usuario = new Usuario();

usuario.setNombre("Laura");

console.log(usuario.getNombre());
// LauraLenguaje del código: PHP (php)

Aquí el acceso al campo privado está controlado por métodos.

4.8. Inicializar un campo privado desde el constructor

Los campos privados también pueden inicializarse con valores recibidos al crear el objeto.

Ejemplo

class Producto {

  // ----- CAMPO PRIVADO -----

  #precio;


  // ----- CONSTRUCTOR -----

  constructor(precioInicial) {

    // Inicializamos el campo privado con el valor recibido
    this.#precio = precioInicial;

  }


  obtenerPrecio() {

    return this.#precio;

  }

}

const producto = new Producto(1500);

console.log(producto.obtenerPrecio());
// 1500Lenguaje del código: PHP (php)

Aquí el constructor configura el estado inicial del objeto.

5. Métodos privados en una clase

5.1. ¿Qué son los métodos privados en una clase de JavaScript?

Los métodos privados son funciones definidas dentro de una clase que solo pueden ser utilizadas desde dentro de esa misma clase.

Se utilizan para:

• encapsular lógica interna
• evitar que ciertas funciones se usen desde fuera
• organizar mejor el código

Al igual que los campos privados, los métodos privados se identifican porque empiezan con #.

5.2. Sintaxis de los métodos privados

Para declarar un método privado se coloca # antes del nombre del método.

Sintaxis general

class Clase {

  #metodoPrivado() {

    // lógica interna

  }

}Lenguaje del código: PHP (php)

Este método solo puede ser llamado dentro de la clase.

5.3. Ejemplo básico de método privado

class Calculadora {

  // ----- MÉTODO PÚBLICO -----

  sumar(a, b) {

    // Llamamos al método privado
    return this.#validarNumero(a) + this.#validarNumero(b);

  }


  // ----- MÉTODO PRIVADO -----

  #validarNumero(numero) {

    // Método interno que asegura que el valor sea un número
    if (typeof numero !== "number") {

      return 0;

    }

    return numero;

  }

}


// ----- CREACIÓN DE INSTANCIA -----

const calc = new Calculadora();

console.log(calc.sumar(5, 3));
// 8Lenguaje del código: PHP (php)

Explicación:

• sumar() es método público
• #validarNumero() es método privado

El método privado solo se usa como ayuda interna.

5.4. Intentar acceder a un método privado desde fuera (error)

class Calculadora {

  #doble(n) {

    return n * 2;

  }

}

const calc = new Calculadora();

calc.#doble(5);Lenguaje del código: PHP (php)

❌ Esto produce error.

Los métodos privados no pueden ser llamados desde fuera de la clase.

5.5. Diferencia con método público

Método público

class Usuario {

  saludar() {

    console.log("Hola");

  }

}

const usuario = new Usuario();

usuario.saludar();
// FuncionaLenguaje del código: JavaScript (javascript)

El método es accesible desde fuera.

5.6. Estructura típica de una clase profesional

Una clase bien organizada suele tener:

Clase
 ├─ propiedades públicas
 ├─ propiedades privadas
 ├─ constructor
 ├─ métodos públicos
 └─ métodos privadosLenguaje del código: JavaScript (javascript)

5.7. Beneficios principales

Usar métodos privados mejora:

1. Legibilidad
   • El código se entiende más rápido.
2. Encapsulación
   • La lógica interna queda protegida.
3. Reutilización interna
   • Los métodos pueden usarse dentro de la misma clase.
4. Mantenimiento
   • Cambiar una parte del sistema es más sencillo.

6. Propiedades estáticas (static)

6.1. ¿Qué son las propiedades estáticas (static) en una clase de JavaScript?

Las propiedades estáticas (static) en una clase de JavaScript son propiedades que pertenecen a la clase en sí misma y no a las instancias (objetos) creadas a partir de esa clase.

Esto significa que:

• No se acceden con this desde una instancia
• Se acceden directamente desde la clase

Se utilizan generalmente para:

• configuración global de la clase
• contadores
• valores constantes
• utilidades relacionadas con la clase

6.2. Sintaxis de una propiedad estática

Una propiedad estática se declara usando la palabra clave static.

class Clase {
  static propiedad = valor;
}Lenguaje del código: JavaScript (javascript)

6.3. Ejemplo básico de propiedad estática

class Usuario {

  // ----- PROPIEDAD ESTÁTICA -----
  // Esta propiedad pertenece a la clase, no a los objetos creados

  static tipo = "usuario del sistema";


  // ----- CONSTRUCTOR -----
  // Se ejecuta cuando se crea una instancia

  constructor(nombre) {

    // propiedad de instancia
    this.nombre = nombre;

  }

}


// ----- CREACIÓN DE INSTANCIA -----

const usuario1 = new Usuario("Juan");


// ----- ACCESO A PROPIEDAD ESTÁTICA -----

console.log(Usuario.tipo); // RESULTADO: usuario del sistema
   // se accede desde la clase


// ----- ACCESO A PROPIEDAD DE INSTANCIA -----

console.log(usuario1.nombre); RESULTADO: Juan
// se accede desde el objetoLenguaje del código: JavaScript (javascript)

6.4. Acceso incorrecto a una propiedad estática

Un error común es intentar acceder desde una instancia.

class Configuracion {

  static version = "1.0";

}

const config = new Configuracion();

console.log(config.version);Lenguaje del código: JavaScript (javascript)

Esto devuelve:

undefinedLenguaje del código: JavaScript (javascript)

Porque la propiedad está en la clase, no en el objeto.

La forma correcta:

console.log(Configuracion.version);Lenguaje del código: CSS (css)

6.5. Ejemplo real: contador de instancias

Las propiedades estáticas se usan mucho para contar objetos creados.

class Usuario {

  // ----- PROPIEDAD ESTÁTICA -----
  // almacena el número de usuarios creados

  static totalUsuarios = 0;


  constructor(nombre) {

    this.nombre = nombre;

    // cada vez que se crea un usuario
    // incrementamos el contador global

    Usuario.totalUsuarios++;

  }

}


const u1 = new Usuario("Ana");
const u2 = new Usuario("Luis");
const u3 = new Usuario("Pedro");


// acceder desde la clase

console.log(Usuario.totalUsuarios);
// resultado: 3Lenguaje del código: JavaScript (javascript)

Explicación:

Cada vez que se crea un usuario:

Usuario.totalUsuarios++;Lenguaje del código: CSS (css)

Se incrementa la propiedad estática.

6.6. Diferencia con métodos estáticos (vistos en punto 2.3).

Ambos pertenecen a la clase y no a las instancias, pero cumplen funciones distintas.

La diferencia principal es simple:

Tipo	Qué es	Para qué se usa
Propiedad estática	Un dato almacenado en la clase	guardar valores compartidos
Método estático	Una función en la clase	ejecutar lógica que no depende de instancias

6.1.1. Diferencia visual clara

class Ejemplo {

  // PROPIEDAD ESTÁTICA
  static version = "1.0";

  // MÉTODO ESTÁTICO
  static mostrarVersion() {

    console.log(Ejemplo.version);

  }

}Lenguaje del código: JavaScript (javascript)

Uso:

console.log(Ejemplo.version);Ejemplo.mostrarVersion();Lenguaje del código: CSS (css)

En resumen:
Tanto las propiedades estáticas como los métodos estáticos pertenecen a la clase y se acceden usando el nombre de la clase. La diferencia es que las propiedades estáticas almacenan datos compartidos, mientras que los métodos estáticos contienen funciones o lógica que no depende de instancias.