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.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.