get y set

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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

La copia de seguridad que necesitas para tus dispositivos, tus proyectos y tus datos
Accede a tus archivos desde cualquier dispositivo y lugar de forma segura
pack
10 GB
Gratis
Consigue tu backup ahora