get y set

Propiedades con get y set en JavaScript

A la hora de crear una página 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é son los métodos Getter y Setter en JavaScript

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.
  • Con getter, lo recibes.

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 de Getter y Setter en JavaScript

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 web 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.

Conclusiones sobre Get y Set

En conclusión, las propiedades get y set en JavaScript nos permiten personalizar el comportamiento de lectura y escritura de las propiedades de un objeto, lo que nos ayudará a tener un mayor control y flexibilidad a la hora de mejorar nuestro código.

Además de su utilidad en el desarrollo de aplicaciones web y de software en general, también podríamos señalar su conexión con el ámbito de los dominios y el hosting web; pues, así como podemos definir reglas y restricciones para el acceso y manipulación de datos en nuestro código utilizando get y set, los servicios de hosting y dominio también ofrecen funciones similares para gestionar y controlar el acceso a nuestros sitios web y bases de datos.

Por ejemplo, al configurar un servidor para alojar nuestra página web, podemos establecer reglas de acceso y seguridad utilizando herramientas como un certificado SSL para cifrar la comunicación y proteger los datos más sensibles. Del mismo modo, al trabajar con bases de datos, podemos definir restricciones de acceso y manipulación de datos para garantizar la integridad y seguridad de nuestra información, de manera similar a cómo utilizamos get y set para controlar el acceso a propiedades en JavaScript.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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