En este artículo vamos a conocer los getters y los setters de Javascript, una herramienta disponible en objetos de Javascript, que existe en el lenguaje desde hace bastante tiempo y que muchos desconocen. Son los getters y los setters que produces con get y set en los objetos o clases de Javascript.

En principio, esta utilidad se encuentra disponible en navegadores muy antiguos, pues forma parte de ES5, así que la puedes usar con tranquilidad. Si conoces la programación orientada a objetos, y conceptos como encapsulación, tendrá más sentido para ti, pero si no es así tampoco te viene mal echarle un vistazo, para cuando encuentres código que haga uso de esta construcción del lenguaje, que sepas de qué se trata.

Qué es un getter o un setter

Para los que no han oído hablar sobre éstos, los getters y los setters son construcciones habituales de los objetos que permiten acceder a valores o propiedades, sin revelar la forma de implementación de las clases. En pocas palabras, permiten encapsular los objetos y evitar mantenimiento de las aplicaciones cuando la forma de implementar esos objetos cambia.

Utilidad aparte, en la práctica son simplemente métodos que te permite acceder a datos de los objetos, para leerlos o asignar nuevos valores. El setter lo que hace es asignar un valor y el getter se encarga de recibir un valor.

Sin embargo, los getters y los setters de los que vamos a hablar en Javascript son un poco distintos de los tradicionales.

También llamados accessors

Los get y los set de Javascript se denominan técnicamente accessors o también "Object Accessors". Seguramente encontrarás esta terminología en documentación diversa de Javascript, por lo que deberías conocer el término.

Otra manera de denominar este tipo de miembros de objetos es con el nombre de propiedades computadas o "computed properties" en inglés.

Propiedades computadas de objetos Javascript

Los get y los set de los que nos ocupamos en este artículo son útiles básicamente para realizar el acceso a propiedades de los objetos que son resultado de computar otras propiedades existentes.

El ejemplo más claro de setters y getters en Javascript lo tenemos con el objeto persona. Este objeto podría tener un par de propiedades como el "nombre" y los "apellidos". Además podríamos desear conocer el nombre completo, pero realmente éste no sería realmente una propiedad nueva del objeto, sino el resultado de un cómputo de concatenación entre el nombre y los apellidos que tenemos en las dos propiedades anteriores.

Es decir, "nombreCompleto" podría ser una propiedad computada. En los lenguajes tradicionales, incluso en Javascript si lo deseamos, podríamos implementar ese valor computado con un método, como este:

var persona = {
  nombre: 'Miguel Angel',
  apellidos: 'Alvarez Sánchez',
  getNombreCompleto: function() {
    return this.nombre + ' ' + this.apellidos;
  }
}

Podríamos acceder al nombre completo con este código:

var nombreCompletoPersona = persona.getNombreCompleto();

Sin embargo, con las construcciones get y set de Javascript la forma de definir este código cambia un poco. Mediante la palabra reservada "get" puedo definir una función que se encarga de realizar el cómputo. Aquello que devuelve la función será el valor de la propiedad computada. El código nos quería más o menos así:

var persona = {
  nombre: 'Miguel Angel',
  apellidos: 'Alvarez Sánchez',
  get nombreCompleto() {
    return this.nombre + ' ' + this.apellidos;
  }
}

La novedad es el uso de la construcción "get" en el código anterior, que nos sirve para definir una especie de método. Sin embargo, no es un método tradicional, sino más bien una propiedad computada, es decir, una propiedad de un objeto que para resolver su valor tiene que ejecutar una función. Nos debería quedar claro este punto con el código siguiente, en el que usamos esa propiedad computada "nombreCompleto".

var nombreCompletoPersona = persona.nombreCompleto;

Ahora en la variable "nombreCompletoPersona" tenemos el valor del nombre y apellidos concatenados. Fíjate que para acceder a ese "getter" usamos "persona.nombreCompleto", que es como si estuviéramos accediendo a una propiedad convencional, aunque internamente en nuestro objeto no existe tal propiedad, sino que se realiza un cómputo para poder evaluarla.

Ejemplo completo con get y set

En el siguiente ejemplo vamos a profundizar un poco en los getters y los setters de Javascript, implementando un nuevo caso de uso que seguro que nos despejará posibles dudas. Además veremos cómo funciona set, para asignar un valor "computado".

En nuestro ejemplo tenemos un objeto intervalo que para su implementación define un valor máximo y un valor mínimo. Pero queremos disponer de un mecanismo que nos ofrezca los valores, enteros, comprendidos en ese intervalo. Para practicar con los get y set vamos a hacerlo mediante una propiedad computada.

Aunque primero vamos a ver cómo se resolvería de manera tradicional, con un método de toda la vida.

var intervalo = {
  valorMinimo: 3,
  valorMaximo: 4,
  valoresContenidos: function() {
    var contenidos = [];
    for(var i=this.valorMinimo; i<=this.valorMaximo; i++) {
      contenidos.push(i);
    }
    return contenidos;
  }
}

Como ves, para acceder a los valores contenidos tendríamos que ejecutar el método correspondiente:

var valores = intervalo.valoresContenidos();

Ahora vamos a ver cómo realizar esto mismo pero con una propiedad "get", computada.

var intervalo = {
  valorMinimo: 3,
  valorMaximo: 7,
  get valoresContenidos() {
    var contenidos = [];
    for(var i=this.valorMinimo; i<=this.valorMaximo; i++) {
      contenidos.push(i);
    }
    return contenidos;
  },
}

Ahora llamaríamos al método de esta manera.

var valores = intervalo.valoresContenidos;

Nos queda por ver un ejemplo con el la construcción "set". En este caso lo que vamos a hacer es recibir un parámetro con aquello que se tenga que asignar y realizar los cambios en las propiedades de los objetos que sea pertinente.

var intervalo = {
  valorMinimo: 3,
  valorMaximo: 7,
  get valoresContenidos() {
    var contenidos = [];
    for(var i=this.valorMinimo; i<=this.valorMaximo; i++) {
      contenidos.push(i);
    }
    return contenidos;
  },
  set valoresContenidos(arrayValores) {
    arrayValores.sort();
    this.valorMinimo = arrayValores[0];
    this.valorMaximo = arrayValores[arrayValores.length - 1];
  }
}

El setter se define de manera similar al getter. En este caso como hemos dicho se usará una función que recibe un dato que haya que setear. La gracia está en el modo de uso de un setter, que no es un método tradicional en el que se enviarían parámetros, sino que se invoca mediante una asignación.

intervalo.valoresContenidos = [5, 6, 2, 9, 3];

El valor que asignamos en la propedad definida como un setter es el que se recibe como valor del parámetro.

Eso es todo, espero que puedas sacarle partido a los getters y los setters de Javascript, una interesante funcionalidad del lenguaje, que cada vez se utiliza más en diferentes áreas de las aplicaciones.