Propiedades con get y set en JavaScript

A la hora de desarrollar una web o una tienda online, si estás familiarizado con la programación orientada a objetos entenderás rápidamente el funcionamiento de las propiedades get y set de JavaScript. De todos modos, en este artículo lo explicamos de manera sencilla para que no tengas excusa.

¿Qué es un getter o un setter?

Son construcciones frecuentes de los objetos que posibilitan el acceso a valores o propiedades, sin descubrir la forma de implementación de las clases. Es decir, permiten encapsular los objetos y evitar el mantenimiento de las aplicaciones cuando el modo de implementar esos objetos se transforma. De manera resumida, con setter asignas un valor y con getter lo recibe.

Propiedades computadas de objetos JavaScript

Get y set son prácticos para el acceso a propiedades de los objetos que resultan de computar otras propiedades que ya existen. Como ejemplo, vamos a crear el objeto persona. Le añadimos las propiedades nombre y apellidos. El resultado de nombre y apellidos sería su nombre completo, pero sin ser una nueva propiedad.

Podríamos implementar en JavaScript ese valor computado (NombreCompleto) con un método como este:

var persona = {
  nombre: 'Arsys',
  apellidos: 'Internet',
  getNombreCompleto: function() {
    return this.nombre + ' ' + this.apellidos;
  }
}

Estamos utilizando objetos literales de JavaScript, cuando lo habitual sería usar clases, pero estamos tratando la versión tradicional de JavaScript (ES5).

De esta forma, podríamos acceder al “nombre completo”:

var nombreCompletoPersona = persona.getNombreCompleto();

Con get y set de JavaScript definimos directamente la función que se encarga de realizar el cálculo y sería algo como esto:

var persona = {
  nombre: 'Arsys',
  apellidos: 'Internet',
  get nombreCompleto() {
    return this.nombre + ' ' + this.apellidos;
  }
}

Get nos ha servido para definir una especie de método, aunque realmente es una propiedad computada. Con el siguiente código, lo deberíamos de tener ya más claro:

var nombreCompletoPersona = persona.nombreCompleto;

En la variable nombreCompletoPersona disponemos del valor del nombre y apellidos concatenados. Sin existir la propiedad, date cuenta que para acceder a ese getter usamos persona.nombreCompleto.

Ejemplo completo con get y set

Vamos a realizar un ejemplo para penetrar más en los getters y los setters de JavaScript, añadiremos un nuevo uso para que podamos comprenderlos mejor y veremos el funcionamiento de set, para determinar un valor computado.

En este ejemplo disponemos de un objeto intervalo que, para su implementación, define un valor máximo y uno mínimo, aunque queremos tener algo que nos ofrezca los valores, enteros, comprendidos en ese intervalo.

Así lo resolveríamos de forma tradicional:

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

Ejecutamos el método siguiente para acceder a los valores contenidos:

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

Hay que tener en cuenta que no podemos recibir ningún parámetro con las propiedades generadas con get, ya que se añaden con funciones.

Llamaríamos al método así:

var valores = intervalo.valoresContenidos;

Por último, para ver la construcción set, recibiremos un parámetro con aquello que se tenga que asignar y efectuar los cambios oportunos en las propiedades de los objetos.

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 igual forma que el getter. Se usa la función para recibir el dato que tengamos que “setear”, en el se invoca mediante una asignación.

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

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

Con esto, podrás sacarle provecho a esta funcionalidad del lenguaje JavaScript y que cada vez vemos más en multitud de áreas de las aplicaciones. Especialmente con instrucciones como get y set, que están disponibles hasta en los navegadores más antiguos.

Si quieres profundizar más en la programación orientada a objetos, te recomendamos este artículo sobre los lenguajes de programación más utilizados.