Propiedades con get y set en Javascript

  • Por
Es un modo disponible en Javascript para crear lo que se conoce por getters y setters, útil para propiedades computadas con get y set.

En este artículo vamos a aprender una posibilidad de los 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.

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 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;
  }
}
Nota: El código anterior, y el que verás en el resto de este artículo, está basado en objetos literales de Javascript. Lo normal sería usar clases, pero mantendremos este estilo de codificación ya que las clases se agregaron en el lenguaje en la versión ES6 y en este manual estamos tratando la versión tradicional de Javascript (ES5).

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;
  },
}
Nota: No lo hemos mencionado todavía, pero las propiedades generadas con get se implementan con funciones no pueden recibir ningún parámetro.

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 utilidad a esta funcionalidad del lenguaje Javascript, que cada vez se ve más en diferentes áreas de las aplicaciones.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

PotterChains

26/7/2017
Excelente
Gracias por compartir algo básico de JS pero muchos no conocíamos :D