Entenent Getters i Setters en JavaScript

Des ES2015, tenim la possibilitat d’usar getters i setters per definir propietats en els nostres objectes. En aquest post entendrem com funcionen.

Aquest contingut el vaig publicar primer en el meu newsletter, la setmana després de publicar el newsletter públic al meu blog, si vols ser el primer a llegir subscriu-te

Abans de llegir aquest post et recomano llegir:

• Entenent this en JavaScript
• Entenent els tipus en JavaScript
• Entenent els objectes en JavaScript

a punt?

en aquest moment ja hauries de conèixer el comportament i atributs de les propietats de els objectes en JavaScript.

en aquest punt cal aclarir que els objectes tenen tres tipus de propietats:

• Data properties: Les propietats normals, que contenen dades.
• Accessor properties: Propietats que canvien el comportament estàndard de ] i ]
• _Internal properties: _propiedades internes de el llenguatge, com ], ] o ] entre d’altres.

què són els getters i setters

Una funció que obté un valor d’una propietat es diu getter i una que estableix el valor d’una propietat es diu setter.

Aquesta característica a estat implementada en ES2015, podent modificar el funcionament normal d’establir o obtenir el valor d’una propietat, a aquestes se’ls coneix com Accessor properties.

funcionament

De vegades volem valors basats en altres valors, per això els data accessors són força útils.

per crear-los fem servir els keywords get i set

const obj = { get prop() { return this.__prop__; }, set prop(value) { this.__prop__ = value * 2; },};obj.prop = 12;console.log(obj.prop); //24

Creem un objecte, amb una única propietat, que té un getter i un setter. d’aquesta manera cada vegada que establim un valor per prop es multiplicarà per dos.

Nota: utilitzeu prop per convenció, però no implica que és un valor especial, aquest és un valor normal.

Una altra manera de crear un Accessor properties és de manera explícita usant Object.defineProperty

const obj = {};Object.defineProperty(obj, //objeto target 'prop', //nombre propiedad { enumerable: true, configurable: true, get prop() { //getter return this.__prop__; }, set prop(value) { //setter this.__prop__ = value * 2; }, });obj.prop = 12;var atr = Object.getOwnPropertyDescriptor(obj, 'prop')console.log(atr); 

L’avantatge que tenim d’aquesta manera , és que podem establir els atributs que volem tingui la propietat.

Característiques

Una Accessor property, només té els atributs configurable i _enumerable, _si veiem els seus atributs veurem això.

 { configurable: true, enumerable: true, get: function get() { return this.__prop__; }, set: function set(value) { this.__prop__ = value * 2; }}

Això ens porta al fet que el valor no pot ser sobreescrit si no s’usa el setter de la funció (es recomana definir tots dos setter i getter).

Si no s’usa strict mode i s’intenta modificar el valor serà un error silenciós.

Una altra característica important, és que, si s’estableix o na propietat amb el mateix nom en un àmbit superior de la cadena de prototips, el Accessor property, serà la propietat que predomini.

Vegem un últim exemple

let persona = { nombre: 'Yeison', apellido: 'Daza', get nombreCompleto() { return `${nombre} ${apellido}` }, set nombreCompleto(nom) { const palabras = nom.split(' '); this.nombre = palabras || ''; this.apellido = palabras || ''; }}persona.nombreCompleto = 'Camilo Sanchez'console.log(persona.nombre); //camiloconsole.log(persona.apellido); //sanchez